IIFEs in JavaScript — Use cases

Koteswar Rao
Apr 4, 2019 · 3 min read

Recently, I have come across IIFE’s in a library that used plain JavaScript in module pattern. They are used extensively in most of the JavaScript files that composed the library. I initially did not understand the reason why to have the constructor functions, many variables, and object definitions wrapped in a function expression(parentheses), until I was explained the most significant reason behind doing that by my colleague.

I assume that one is aware of how an IIFE (Immediately Invoked Function Expression) is formed and what it looks like. Nevertheless, I would state a simple example to get started.

(function () {
var message = "Hello there !!!";
})();

The above code is called an IIFE, and is immediately invoked as soon as it is defined. Note that it’s a Function Expression which is why the function that is wrapped inside the parentheses is anonymous. You might ask, why the parentheses. Try removing the parentheses and execute the function in browser’s console. It throws an error as the parser identifies it as an function declaration and function declarations cannot be anonymous.

Why do we need an IIFE? The most use case of an IIFE is to restrict the scope of variables to local so that they don’t pollute the global context. For example, compare the below two scenarios:

var loc = "global";
//Function declaration
function logger() {
console.log(loc); // logs global
console.log(window.loc); // logs global
}
logger();---------------//Function Expression
(function () {
var loc = "global";
function logger() {
console.log(loc); // logs global
console.log(window.loc); // logs undefined
}
logger();
}) ()

In the first example, the variable is declared outside the function, which makes it available globally and can be accessed and changed through the global object ( in browser, the global object is window & in Node, the global object is global).

To prevent it from happening where one might get access to all globally declared variables and can change them in browser’s console, the whole piece of code including variables, functions, objects , if present are wrapped inside an IIFE, which gets invoked immediately in a different execution context as shown in the second example. You might ask, if the variables are created in different execution context, won’t they be discarded as soon as the function gets invoked. Yes, they do. But that’s where closures come into picture and there are many ways to harness combined power of closures and IIFEs to design a modular application.

One typical use case of an IIFE and closure combination is to create a private state for any variable.

let reference = (function() {   
let secret = "I cannot be changed by simple assignment";
return {
//ES5 new method syntax
change(value) {
secret = value;
},
get secret() {
return secret;
}
};
})();
console.log(reference.secret); // "I cannot be changed by simple assignment"
reference.change("I am changed");
console.log(reference.secret); // "I am changed"

In the above example, the secret value can only be changed by using the method as the variable is not available globally and is discarded off as soon the IIFE gets executed. Due to the power of closures in JS, the secret value is still preserved and is passed along with the object to the reference variable, making it available to the change method, when required.

NOTE: None of the above will make sense, if one does not understand what are closures and what is an execution context. If you wish, you can refer to MDN documentation or refer to concepts in You don’t know JS book series or any other source you may wish to refer.

Thank you for reading !! If there is anything in the article that needs tuning or clarifications or elaboration or correction, please mention it in the comments.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Koteswar Rao

Written by

Full stack developer, autodidact, tech savvy. Interested in problem solving, reading tech stuff, sharing, and peer learning.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +785K followers.

Koteswar Rao

Written by

Full stack developer, autodidact, tech savvy. Interested in problem solving, reading tech stuff, sharing, and peer learning.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +785K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store