JavaScript Introduction | Functions

What Is a Function?

A function is an independent block designed to perform a specific task.
Such functions can be called whenever needed to repeat that task.

function addNum(x, y) {
    return x + y;
}
document.write(addNum(2, 3));

In JavaScript, a block refers to a part enclosed in braces ({}) in a function or statement.

JavaScript Functions

In JavaScript, a function is also a data type.

Therefore, a function can be assigned to a variable, or properties can be assigned to a function.
JavaScript functions can also be defined nested inside other functions.

Defining Functions

In JavaScript, a function definition starts with the function keyword and has the following components.

1. The function name
2. Function parameters separated by commas inside parentheses
3. JavaScript statements enclosed in braces ({})

The syntax for defining a function in JavaScript is as follows.

function functionName(parameter1, parameter2,...) {
    statements to execute when the function is called;
}

A function name is an identifier that distinguishes the function.
A parameter is a variable that allows a value passed as an argument when calling a function to be used inside the function.

// Define a function named addNum.
function addNum(x, y) {    // x and y are parameters of this function.
    document.write(x + y);
}
addNum(2, 3);              // Call addNum() by passing 2 and 3 as arguments.

In the example above, argument 2 is stored in parameter x, and argument 3 is stored in parameter y.
In this way, both the number and order of arguments and parameters are very important.

An argument of a function means a variable or constant that passes a value to the function when the function is called.

Return Statement

In JavaScript, a function can contain a return statement.
Through this return statement, the caller can receive the result executed by the function.

The return statement stops execution of the function and returns the value of the expression specified after the return keyword to the caller. A return statement can return a value of any type, including arrays and objects.

function multiNum(x, y) {
    return x * y;         // Return the result of multiplying x and y.
}
var num = multiNum(3, 4); // After multiNum() is called, its return value is stored in variable num.
document.write(num);

Calling Functions

A defined function is executed only when it is called within the program.
A normal function call can be made in the same form as the function definition statement.

Function definition

function addNum(x, y) {
    return x + y;
}

Function call

var sum = addNum(3, 5); // Call addNum() and pass 3 and 5 as arguments.
                        // After the function call finishes, assign its return value to variable sum.

In the example above, the numbers 3 and 5 passed as arguments are assigned to parameters x and y defined in the function.
Therefore, inside the called function, parameters x and y are assigned 3 and 5 respectively and then calculated.

Functions as Values

In JavaScript, a function is not only a syntactic construct but also a value.
Therefore, a function can be assigned to a variable or passed as an argument to another function.

The following example stores a function in a variable and uses it.

function sqr(x) {                // Define function sqr that calculates a square.
    return x * x;
}
var sqrNum = sqr;                // Assign function sqr to variable sqrNum.
document.write(sqr(4) + "<br>"); // Call function sqr.
document.write(sqrNum(4));       // Call variable sqrNum like a function.