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.
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
let calcArea = function (width, height) {
let result = width * height;
return result;
};
var result = calcArea(10, 10)
console.log(result)
There are a few differences between the Function expression and Function Declaration.
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.
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
let calcArea = function (width, height) {
let result = width * height;
return result;
};
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.
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.
var result = calcArea(10,10) //Uncaught ReferenceError: calcArea is not defined
console.log(result)
calcArea = function (width, height) {
let result = width * height;
return result;
};
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.
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.
var result = calcArea(10,10) //Uncaught ReferenceError: calcArea is not defined
console.log(result)
calcArea = function (width, height) {
let result = width * height;
return result;
};
Consider this example
let calcArea = function areaCalculator(width, height) {
let result = width * height;
return result;
};
calcArea(10,10) //ok
areaCalculator(10,10) //error
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.
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.
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.
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.
