Different ways of defining functions in JavaScript

Suggested Videos
Part 22 - JavaScript array filter method
Part 23 - Creating two dimensional array in javascript
Part 24 - Functions in JavaScript



In JavaScript, there are several different ways of defining functions.



Defining a function using function declaration

Example 1 : Declaring a function first and then calling it.

function addNumbers(firstNumber, secondNumber) 
{
    var result = firstNumber + secondNumber;
    return result;
}

var sum = addNumbers(10, 20);
document.write(sum);

Output : 30

Example 2 : A function call is present before the function declaration

In Example 1, we are first defining the function and then calling it. The call to a JavaScript function can be present anywhere, even before the function is declared. The following code also works just fine. In the example below, we are calling the function before it is declared.

var sum = addNumbers(10, 20);
document.write(sum);

function addNumbers(firstNumber, secondNumber) 
{
    var result = firstNumber + secondNumber;
    return result;
}

Function Hoisting : By default, JavaScript moves all the function declarations to the top of the current scope. This is called function hoisting. This is the reason JavaScript functions can be called before they are declared.

Defining a JavaScript function using a function expression : A Function Expression allows us to define a function using an expression (typically by assigning it to a variable). There are 3 different ways of defining a function using a function expression.

Anonymous function expression example : In this example, we are creating a function without a name and assigning it to variable add. We use the name of the variable to invoke the function.

var add = function (firstNumber, secondNumber) 
{
    var result = firstNumber + secondNumber;
    return result;
}

var sum = add(10, 20);
document.write(sum);

Functions defined using a function expression are not hoisted. So, this means a function defined using a function expression can only be called after it has been defined while a function defined using standard function declaration can be called both before and after it is defined.

// add() is undefined at this stage
var sum = add(10, 20);
document.write(sum);

var add = function (firstNumber, secondNumber) 
{
    var result = firstNumber + secondNumber;
    return result;
}

Named function expression example : This is similar to the example above. The difference is instead of assigning the variable to an anonymous function, we’re assigning it to a named function (computeFactorial). 

var factorial = function computeFactorial(number) 
{
    if (number <= 1) 
    {
        return 1;
    }

    return number * computeFactorial(number - 1);
}

var result = factorial(5);
document.write(result);

The name of the function (i.e computeFactorial) is available only with in the same function. This syntax is useful for creating recursive functions. If you use computeFactorial() method outside of the function it raises  'computeFactorial' is undefined error.

var factorial = function computeFactorial(number) 
{
    if (number <= 1) 
    {
        return 1;
    }

    return number * computeFactorial(number - 1);
}

var result = computeFactorial(5);
document.write(result);

Output : Error - 'computeFactorial' is undefined.

Self invoking function expression example : 

var result = (function computeFactorial(number) 
{
    if (number <= 1) 
    {
        return 1;
    }

    return number * computeFactorial(number - 1);
})(5);

document.write(result);

Output : 120

These are called with different names
Immediately-Invoked Function Expression (IIFE)
Self-executing anonymous functions
Self-invoked anonymous functions