JavaScript IIFE; Through this tutorial, i am going to show you what is IIFE and how to use JavaScript IIFE with the help of examples.
JavaScript Immediately-invoked Function Expressions (IIFE)
An Immediately-invoked Function Expression that runs as soon as it defined. An IIFE can be used for avoiding the variable hoisting from within the blocks and they don’t pollute the global object.
Syntax Of JavaScript IIFE
The following syntax represents how to define an immediately invoked function expression:
(function(){
//...
})();
The following syntax represents how to define IIFE with arrow functions as well:
(() => {
/* */
})()
How to Use Immediately-invoked Function Expressions (IIFE)
Define a regular function in javascript. So the js engine adds the function to the global object.
Let’s take a simple example for see the usage of IIFE; as shown below:
function sum(a,b) {
return a + b;
}
On the Web Browsers, the sum() function is sum of two variable to the window object:
console.log(window.sum);
Similarly, if you declare a variable outside of a regular function, the js engine also adds the variable to the global object:
var counter = 10; console.log(window.counter); // 10
In this syntax, the part on the right side of the assignment operator(=) is a function expression. Because a function is an expression, you can wrap it inside parentheses:
let sum = (function(a, b) {
return a + b;
});
In this example, the sum variable is referenced as the anonymous function that adds two arguments.
If you declare many global variables and functions, the JavaScript engine will be allocated memory for them until when the global object loses the scope.
As a result, the script may use memory inefficiently. On top of that, having global variables and functions will likely cause the name collisions.
So, the best way to prevent the functions and variables from allocating memory to the global object is to use immediately invoked function expressions.
In addition, you can run the function immediately after creating it:
let sum = (function(a,b){
return a + b;
})(10, 20);
console.log(sum);
In this example, the sum variable holds the result of the function call.
The following expression is called an immediately invoked function expression (IIFE) because the function is created as an expression and run immediately:
(function(a,b){
return a + b;
})(10,20);
By placing functions and variables inside an immediately invoked function expression, you can avoid polluting them to the global object:
(function() {
var counter = 0;
function sum(a, b) {
return a + b;
}
console.log(sum(10,20)); // 30
}());
Named IIFE
An IIFE can have a name. However, it cannot be invoked again after execution:
(function namedIIFE() {
//...
})();
IIFE starting with a semicolon (;)
Sometimes, you may see an IIFE that start with a semicolon(;):
;(function() {
/* */
})();
In this syntax, the semicolon is used to terminate the statement in case two or more JavaScript files are blindly concatenated into a single file.
For example, you may have two file my1.js and my2.js which use IIFEs:
(function(){
// ...
})()
(function(){
// ...
})()
If you use a code bundler tool to concatenate code from both files into a single file, without the semicolon (;) the concatenated JavaScript code will cause a syntax error.
In this tutorial, you will have learned about the JavaScript immediately invoked function expressions (IIFE) and their purposes.