The first time I heard 'IIFE' in my Coding Bootcamp class, it immediately reminded me of my sister's dog 'Yeffi' which means 'pretty' in some human language.
So what is IIFE in JavaScript language?
IIFE stands for Immediately Invoked Function Expression. It is a JavaScript function that runs as soon as it is defined.
Normally, when we create a function using 'Function Declaration' or 'Function Expression', we need to call the function in order to use it.
Function Declaration:
function myFunction(p1, p2) {
return p1 * p2;
}
alert(myFunction(4, 3));
//12
Function Expression:
let myFunction = function(p1, p2){
return p1 * p2;
}
alert(myFunction(4,3));
//12
However, in IIFE, the function is wrapped in a parenthesis which makes it a function expression followed by () which tells the JavasScript compiler to invoke or call immediately.
(function() {
let dName = "Yeffi";
alert(dName);
}
)();
//Yeffi
So why do we use IIFE?
Mainly because of privacy. Any variables declared inside the IIFE are not accessible from the outside world.
(function() {
let dName = "Yeffi";
}
)();
console.log(dName);
// Uncaught ReferenceError: dName is not defined
If you try to access the dName variable outside of the IIFE, you get the error message as you can see above. All the variables inside the IIFE stay within the scope of the function.
Also, it protects the global namespace by not creating a named function. When a named function lingers in the global namespace, it could accidentally be called again. However, since IIFE isn't a named function, it can't accidentally be called. This will avoid any potential security implications. Therefore, many JavaScript libraries use this technique nowadays.
Thanks for reading!
Top comments (11)
Great post, clear and to the point. Thanks for sharing!
Nice description. Thank you!
Although, I do not know at the moment whether the term closure might help in this description (it explains, how privacy is achieved) or if it would confuse people (because it is really advanced) reading this.
Perhaps you may consider it to mention in a side note ;)
Most people might not know this but if you are accustomed to not using semicolons you will run into cryptic runtime errors when using an IIFE. The solution is to always put a semicolon before an IIFE ;(() => {})()
I think semicolon is voluntary or best practice reason is if statement was not completed from previous code or semicolon do the job so we worry about our function only.
Super well described.
Anybody know if this behavior has any parallels in other languages?
It all boils down to scopes. JavaScript is weird, well actually ES5 is weird. Back then with the
varkeyword, variables we're limited by function scope. Meaning, only functions could create scopes, unlike normal languages that have block scopes (i.e. a for loop creates a separate scope).Nowadays with
constandletblock scopes are added in ES6 and above. Hence, making IIFEs less prominent as of late.To get back to the question. Every normal language that has block scopes has this behavior. 😄
This is cool. Very Yeffi post
Another very common reason to use this is with async/await, since await doesn't work globally, only under an async function.
Great content this how JQuery library was built hiding its properties from GLOBAL EXECUTION CONTEXT allowing compiler to access its object.
I've got lots of benefits from this post
thanks for sharing!