What is an IIFE in Javascript?

A quick guide to IIFE or “self invoking” functions in Javascript

5 min readMay 21, 2019

What is an IIFE?

IIFE stands for “Immediately Invoked Function Expression”.

In simple terms an IIFE (Immediately Invoked Function Expression) is a Javascript function that is invoked when it is defined.

TL;DR
— Any function expression in Javascript can be immediately invoked by enclosing the entire function in brackets, and following it by ().

//An IIFE function(function() {
  console.log("Hello World");
})();

In this example the function itself is an anonymous “function expression”, and since any function in Javascript can be executed by adding a () at the end, we add () at the end of the function expression to run the code within the function.

Since the function expression is executed “immediately” upon its definition i.e. the function body is not saved within a variable for later invocation, such functions are called “Immediately Invoked Function Expression” (IIFE).

Since IIFEs are invoked when defined and do not need to be invoked using a functionname, they are also sometimes also called “self invoking” functions.

NOTE:
The purpose of the IIFE functions was to prevent the pollution of the global name space, since IIFE functions are anonymous, and also since Javascript keyword “var” is “functionally scope” and not “block scoped”.

With the introduction of the keyword “let” in ES6, IIFE functions are now a thing of the past. The keyword “let” allows a variable declared within curly brackets to be block scoped, and does away with the need to enclose the variables within a function in order to be shielded from the global name space.

What is the purpose of an IIFE?

To explain this we must first realize that Javascript keyword “var” uses “functional scoping” and not “block scoping”.

This means that if you want to preserve the global variable name space you cannot simply enclose it within curly braces.i.e.

//Attempted Block Scope using curly brackets in Javascript and "var" keyword
//block A
{
var a=1;
console.log(a); // will show 1
}//block B
{
a++;
console.log(a) // will show 2
}/* note that since Javascript is functional scoped and NOT block scoped, Javascript does not recognize the existence of the curly brackets and variable "a" is declared in the GLOBAL variable name space */

Declaring a variable in the global variable namespace is bad practice as the variable is now open to unintended modifications from any where within the Javascript code.

To preserve the global variable name space, we must enclose the variable in a function. Thus, let us redefine the blocks above as follows.

//Functional Scopefunction blockA() {
  var a=1;
  console.log(a); 
}function blockB() {
   a++;
   console.log(a);
}blockA(); //invoke the code in blockA, will show 1blockB(); //invoke the code in blockB, will show that value of "a" is undefined thus we know that variable "a" is not a global variable, which is a good practice since we want to prevent declaring variables in the global namespace.

While this has prevented the variable a from being a global variable, it has now introduced blockA and blockB in the global name space. Thus we have not eliminated the problem of preventing the pollution of the global namespace. Instead we have only moved it one level higher and now introduced two new variables in the global name space.

From this example it becomes evident that no matter how many levels of functions we “enclose” variables in to prevent them from being in the global name space, we will inadvertently introduce new variables in the global name space.

So how do we prevent this? How do we ensure that the variables we declare are not in the global namespace.

The answer is by using the IIFE.

We know that the IIFE uses anonymous function expressions, and so we do not need to introduce new function names to enclose the “scope”.

Let’s re-write the function above as IIFE.

To do this we can remove the function names i.e. blockA, blockB; and instead declare them as anonymous function expressions.
However since we now have removed the function names, how do we actually execute the code that this within the functions?We do this by enclosing the entire function expression within brackets and follow it by ().

//IIFE(function() {
  var a=1;
  console.log(a); // will show 1
})();(function() {
   a++;
   console.log(a);
})();  // will show that value of "a" is undefined thus we know that variable "a" is not a global variable, which is a good practice since we want to prevent declaring variables in the global namespace.

Note that now we have prevented variable a from being a global variable, at the same time we have not polluted the global name space by introducing any new variable or function names.

NOTE:
The new ES6 format of Javascript now has a new keyword called let. the keyword let actually allows block scoping in Javascript, so it does away with the need of IIFE functions since we can now limit the variable namespace within curly brackets, without enclosing them within an IIFE function.

A side note on the difference between function declarations and function expressions

In Javascript functions can be defined in 2 ways, by a “function declaration” or by a “function expression”.

Function Declaration

function helloWorld() {
   console.log ("Hello World");
}

Function Expression

var x = function() {
  console.log("Hello World");
}

Note that in the case of a “function declaration” the function is actually given a name. In the case of “function expression”, the function itself is anonymous and the body of this anonymous function is assigned to a variable.

Now if one wants to execute i.e. invoke the functions,

in the case of the function declaration one can invoke the function by the functionname followed by (). i.e.

function helloWorld() {
   console.log ("Hello World");
}helloWorld(); //invoking the function

However in case of the function expression, since the function has no name i.e. it is anonymous, how do we execute it?
The answer of course is simple enough. Since we assigned the function to a variable x, the typeof(x) is now a function, which means that we can invoke the second function simply by putting a () after x. i.e.

var x = function() {
  console.log("Hello World");
}x(); // invoking the function

Note that any function in Javascript can be immediately invoked by enclosing the entire function definition within brackets and following that with ().

Found this useful? Hit the 👏 button to show how much you liked it! 🙂

Follow me on Medium for the latest updates and posts!

Other Articles: