Functions in JavaScript

Functions are the basic building block of JavaScript. Functions allow us to encapsulate a block of code and reuse it multiple times.

Functions make JavaScript code more readable, organized, reusable, and maintainable.

function <function-name>(arg1, arg2, arg3,...)
{
    //write function code here
};

In JavaScript, a function can be defined using the function keyword, followed by the name of a function and parentheses. Optionally, a list of input parameters can be included within the parentheses. The code block that needs to be executed when the function is called is written within curly braces.

Defining a Function in JavaScript

The following defines a function named greet that will display an alert box.

function greet() {
    alert("Hello World!");
}

The above greet() function does not include any input parameters. It contains a single statement that displays an alert message.

Now, you can call or invoke the greet function by using the function name followed by the () operator, as shown below. When you call a function, JavaScript will execute the codes written inside the calling function.

greet();

Function Parameters

You can pass values to a function using parameters. A function can have one or more parameters, and the values will be passed by the calling code.

function greet(firstName, lastName) {
    alert("Hello " + firstName + " " + lastName);
}

greet("Steve", "Jobs");

JavaScript is a dynamic type scripting language, so a function parameter can have a value of any data type.

function greet(firstName, lastName) {
    alert("Hello " + firstName + " " + lastName);
}

greet("Bill", "Gates");
greet(100, 200);

You can pass fewer or more arguments while calling a function. If you pass fewer arguments then the rest of the parameters will become undefined. If you pass more arguments then additional arguments will be ignored.

function greet(firstName, lastName) {
    alert("Hello " + firstName + " " + lastName);
}

greet("Steve", "Jobs", "Mr."); // display Hello Steve Jobs
greet("Bill"); // display Hello Bill undefined
greet(); // display Hello undefined undefined

You can also use the built-in arguments object to access parameters inside a function.

Return a Value From a Function

A function can return a value to the calling code using the return keyword followed by a variable or a value.

The following returns a number 10.

function getNumber() {
    return 10;
};

let result = getNumber();
console.log(result); //output: 10

Typically, a function returns some calculated value using paramters or an expression from a function. For example, the following sum function adds two parameters values using the + operator and returns the result of an expression.

function Sum(num1, num2) {
    return num1 + num2;
};

var result = Sum(10,20); // returns 30

A function can return another function in JavaScript.

function multiple(x) {

    function fn(y)
    {
        return x * y;
    }
    
    return fn;
}

var triple = multiple(3);
triple(2); // returns 6
triple(3); // returns 9

Function Expression

A function expression in JavaScript is a function that is stored as a value, and can be assigned to a variable or passed as an argument to another function.

var add = function (num1, num2) {
    return num1 + num2;
};

var result = add(10, 20);//returns 30

Anonymous Function

In JavaScript, you can also create anonymous functions, which are functions without a name. Anonymous functions are often used as arguments to other functions, and are

Anonymous functions are typically used in functional programming e.g. callback function, creating closure or immediately invoked function expression.

let numbers = [10, 20, 30, 40, 50];

let squareNumbers = numbers.map(function(number) {
  return number * number;
});

Arrow Functions

Arrow functions are a shorthand syntax for defining anonymous functions in JavaScript. They have compact syntax compared to anonymous functions. However, they do not have their own this value.

let square = num => num * num;

let result = square(5);
console.log(result); //25

Nested Functions

In JavaScript, a function can have one or more inner functions. These nested functions are in the scope of outer function. Inner function can access variables and parameters of outer function. However, outer function cannot access variables defined inside inner functions.

function greet(firstName)
{
    function SayHello() {
        alert("Hello " + firstName);
    }

    return SayHello();
}

greet("Steve");