JavaScript - Function Expressions

The function expression allows us to define a JavaScript function in an expression. JavaScript functions are defined using a function declaration or a function expression. The main difference between them is the function name. The function name can be omitted in function expressions. This helps to create anonymous functions in JavaScript. We can store the function expression in the variable and use that variable to invoke the function expression.

Syntax

The syntax of function expression in JavaScript is as follows –

function (parameter-list) {
    statements
};

We can use a variable to store a JavaScript function expression –

const varName = function (parameter-list) {
    statements
};

Here the function expression is stored in the variable, varName. Once the function is assigned to a variable, the variable is used to invoke the function. Let’s look at the example below –

const sum = function (x, y) {
     return x + y;
};
let z = sum(2, 3);

In the above code the function expression is assigned to the variable sum. The variable sum is used as function to invoke the function.

Please note there is no name after the function keyword. The function expression allows to define anonymous function.

Named Function Expression

We can define a named function as a function expression –

const sum = function addNumbers(x, y) {
    return x + y;
};
let z = sum(2, 3);

But we need to invoke the function using the variable only. We can’t use the function name to invoke the function.

Immediately Invoked Function Expression

A function expression can be used as the IIFE (immediately invoked function expression) which is invoked as soon as defined.

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

Examples

Example: Function Expression

In the example below, we stored the function expression in the ‘sum’ variable. The function expression adds two numbers and prints in the output.

At last, we used the ‘sum’ variable to invoke the function expression stored in that.

<html>
<body>
   <p id = "output"> </p>
   <script>
      const sum = function () {
         let a = 10;
         let b = 20;
         document.getElementById("output").innerHTML = 
		 "The sum of " + a + " and " + b + " is " + (a + b);
      }
      sum();
   </script>
</body>
</html>

Output

The sum of 10 and 20 is 30

Example: The return statement in function expression

The below code demonstrates the using the ‘return’ statement in the function expression. You can use the return statement inside the function expression as you use it in the function definition.

In the below code, the function returns the multiplication value of two numbers.

<html>
<body>
   <p id = "output"> </p>
   <script>
      const mul = function (a, b) {
         return a * b;
      }
      let result = mul(4, 5);
      document.getElementById("output").innerHTML = 
	  "The returned value from the function is " + result;
    </script>
</body>
</html>

Output

The returned value from the function is 20

Example: Using the function expression as a value

The below example demonstrates using the function expression as a value. Here, we stored the function expression in the ‘num’ variable and multiplied its returned value by 3.

You may return the random number from the function expression and use the function expression as a value.

<html>
<body>
   <p id = "output"> </p>
   <script>
      const num = function () {
         return 2;
      }
      let result = num() * 3;
      document.getElementById("output").innerHTML = 
	  "The multiplication value is " + result;
    </script>
</body>
</html>

Output

The multiplication value is 6

Example: Nested function expression

The example below demonstrates using the nested function expression. We defined the function expression and stored it in the ‘num’ variable. In the function expression body, we defined another function expression and stored it in the ‘decimal’ variable.

We call the decimal() function expression in the parent function expression and return its value. When we call the num() function expression, it returns the value returned by the decimal() function expression.

<html>
<body>
   <p id = "output"> </p>
   <script>
      const num = function () {
         const decimal = function () {
            return 5;
         }
         return decimal();
      }
      document.getElementById("output").innerHTML = 
	  "The returned value from the function is " + num();
   </script>
</body>
</html>

Output

The returned value from the function is 5

Print Page