The Function Expression is another way to create a JavaScript function. We learned how to create JavaScript Function. In that article, we used the Function Statement or declaration to create the Function. In this tutorial, we will look at Function Expression.
Table of Contents
Function Expression
Here we create the function as part of the JavaScript Expression.
JavaScript Expression is any code that JavaScript evaluates to get a Value. They produce value
The following is the example, we create a function and assign it to the variable calcArea. We use the variable calcArea to invoke the function
1 2 3 4 5 6 7 8 9 10 11 12 | let calcArea = function (width, height) { let result = width * height; return result; }; var result = calcArea(10, 10) console.log(result) |
Function Expression Vs Function Declaration
There are a few differences between the Function expression and Function Declaration.
Syntax
If we declare a function using a JavaScript statement, then we call it a Function declaration.
The following code creates the calcArea function using the Function statement/ declaration. Here we give a name to function calcArea. The JavaScript creates a Variable calcArea and assigns the function to it.
1 2 3 4 5 6 7 | function calcArea (width, height) { let result = width * height; return result; }; |
If the function is created using a JavaScript expression, then we call it Function Expression
The following is the function expression. We create the function and use the assignment operator to assign it to a variable. Note that we have not given any name to the function. The Syntax of creating the function is almost similar to the function declaration
1 2 3 4 5 6 | let calcArea = function (width, height) { let result = width * height; return result; }; |
Hoisting
JavaScript process the Function declarations (Hoisting), before it executes any code block. Hence they are available everywhere. But it evaluates the Function Expressions during the code execution and when the code reaches it. Hence they are available only after the evaluation.
JavaScript process all the declaration statements before it executes a block of code. This is called Hoisting.
In the following example, we invoke the calcArea function before its declaration. It works because JavaScript moves the calcArea to the top. Hence It does not matter where we declare the function.
1 2 3 4 5 6 7 8 9 10 11 | var result = calcArea(10,10) console.log(result) function calcArea (width, height) { let result = width * height; return result; }; |
But the following code results in an error. That is because the hoisting works only in declarations and not in assignments. Since we used the assignment operator to assign the function to the calcArea variable, we can only invoke after the assignment.
1 2 3 4 5 6 7 8 9 10 | var result = calcArea(10,10) //Uncaught ReferenceError: calcArea is not defined console.log(result) calcArea = function (width, height) { let result = width * height; return result; }; |
Named Function Expression
We can assign a name to a Function Expressions as shown in the example below. But we cannot use that name to invoke the function.
1 2 3 4 5 6 7 8 9 10 11 12 | let calcArea = function areaCalculator(width, height) { let result = width * height; return result; }; calcArea(10,10) //ok areaCalculator(10,10) //error |
Use case of Function Expression
Using it as callback
The callback functions are one of the use cases for a function expression. A callback is a function that we pass as an argument to another function.
For Example, take a look at this function. The third parameter to addNum is a function.The function invokes it with the result. The addNum is not aware of what this function does.
The logToConsole function prints the message to console whatever it gets.
We invoke the addNum with logToConsole as the third argument. You will see the result on the console.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function addNum(a, b, callBack) { let result = a + b callBack(result) return result; } function logToConsole(message) { console.log(message) } addNum(1, 2, logToConsole) |
Here the logToControl is the callback function. We pass it to the addNum and it invokes it.
We can rewrite the function as shown below. Instead of declaring the function, we use the function expression to create the function on the fly and pass it to the addNum function.
1 2 3 4 5 6 7 8 9 10 | function addNum(a, b, callBack) { let result = a + b callBack(result) return result; } addNum(1, 2, function(message) { console.log(message) }) |
Advantageous of this is that the function is discarded after it is invoked.
Immediately Invoked Function Expressions (IIFE)
We can create a function using the function expression on the fly, invoke it, and forget about it. Such a use case is called IIFE (Immediately Invoked Function Expressions). It also helps to avoid polluting the global scope.
