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
constvarName=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. Lets look at the example below
constsum=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
constsum=functionaddNumbers(x, y){return x + y;};let z =sum(2,3);
But we need to invoke the function using the variable only. We cant 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.
(functiongreet(){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.
Open Compiler
<html><body><p id ="output"></p><script>constsum=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.
Open Compiler
<html><body><p id ="output"></p><script>constmul=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.
Open Compiler
<html><body><p id ="output"></p><script>constnum=function(){return2;}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.
Open Compiler
<html><body><p id ="output"></p><script>constnum=function(){constdecimal=function(){return5;}returndecimal();}
document.getElementById("output").innerHTML ="The returned value from the function is "+num();</script></body></html>Output
The returned value from the function is 5
Leave a Reply