IIFEs in JavaScript — Use cases

Published in

The Startup

3 min readApr 4, 2019

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…