DEV Community

loading...

What is IIFE in JavaScript?

gyi2521 profile image gyi2521 Updated on ・2 min read

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!

Discussion

pic
Editor guide
Collapse
juanfrank77 profile image
Juan F Gonzalez

Great post, clear and to the point. Thanks for sharing!

Collapse
thomasjunkos profile image
Thomas Junkツ

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 ;)

Collapse
theoutlander profile image
Nick Karnik

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 ;(() => {})()

Collapse
njoash1 profile image
Toptips

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.

Collapse
adityapadwal profile image
Aditya Padwal

This is cool. Very Yeffi post

Collapse
ben profile image
Ben Halpern

Super well described.

Anybody know if this behavior has any parallels in other languages?

Collapse
adnanrahic profile image
Adnan Rahić

It all boils down to scopes. JavaScript is weird, well actually ES5 is weird. Back then with the var keyword, 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 const and let block 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. 😄

Collapse
caubeen profile image
caubeen

Another very common reason to use this is with async/await, since await doesn't work globally, only under an async function.

Collapse
njoash1 profile image
Toptips

Great content this how JQuery library was built hiding its properties from GLOBAL EXECUTION CONTEXT allowing compiler to access its object.

Collapse
younheejang profile image
curious Jaeger

thanks for sharing!