Efficient JavaScript: A Guide to Different Ways of IIFE Crafting (5+ Ways to Create an IIFE)
Enhance Your Code Efficiency by Learning Multiple Ways to Implement Immediately-Invoked Function Expressions
IIFE: Immediately Invoked Function Expression.
A function which can be called immediately after its creation.
In Javascript, this is how we create a function
function मधुशाला() {
console.log('मधुशाला');
}
Generally, we call a function in javascript like this:
function मधुशाला() {
console.log('मधुशाला');
}
मधुशाला();
But we want to call this function right after its creation, Like this:
function मधुशाला() {
console.log('मधुशाला');
}();
If we run this code then we get this error:
Because this is a syntax error, we can’t not call a function like this.
In JavaScript, there are two ways to define a function.
1. Function Declarations:
function example() {
// function body
}
In a function declaration, the function name is followed by parentheses and the function body. And we call such function like this:
example(); // this is standard way of calling a function.
// no conversion is required in order to call a function like this.
2. Function Expressions:
var example = function() {
// function body
};
In a function expression, the function is assigned to a variable. Notice that in this case, the function doesn’t have a name and is referred to through the variable.
Now, let’s look at the concept of wrapping the entire function in parentheses:
(function() {
// function body
})();
Here, the function is enclosed in a set of parentheses. This is done for a specific reason:
- Preventing Ambiguity: In JavaScript, parentheses can be used for grouping and for defining expressions. Wrapping the function in parentheses clarifies that what follows the opening parenthesis is an expression. This helps avoid potential issues with interpretation.
- Creating a Function Expression: By wrapping the function in parentheses, you explicitly create a function expression. This is important when you want to immediately invoke the function using the trailing `()`.
In short, to call a function immediately we have to first convert it into an expression.
There are multiple ways by which we can convert a function declaration into a function expression, and call it immediately.
Way 1: Wrapping function in parenthesis
(function मधुशाला() {
console.log('I am an IIFE');
})();
// Logs 'I am an IIFE'
Way 2: Wrapping function + function call in parenthesis
(function मधुशाला() {
console.log('I am an IIFE');
}());
// Logs 'I am an IIFE'
Way 3: Adding + in front of function
+function मधुशाला() {
console.log('I am an IIFE');
}();
// Logs 'I am an IIFE'
Way 4: Adding ! in front of the function
!function मधुशाला() {
console.log('I am an IIFE');
}();
// Logs 'I am an IIFE'
Way 5: Add void in front of the function
void function मधुशाला() {
console.log('I am an IIFE');
}();
// Logs 'I am an IIFE'
Way 6: Add typeof in front of the function
typeof function मधुशाला() {
console.log('I am an IIFE');
}();
// Logs 'I am an IIFE'
Thanks for reading, let me know in the comments if you found this insightful and also if you have any other cool ways to call a function immediately.