IIFE in JavaScript

Hello World !!! 🌏

Before diving into the IIFE world 🗺️, first lets quickly re-visit few tiny tiny but fatty concepts in JavaScript.

1. Expressions in JavaScript.

Anything which returns a value is called an expression.

2. Function Expression and Function Declaration

a. When we simply create a function it is called a function declaration.

b. And when same function is assigned to a variable it becomes a function expression.

3. In JavaScript all .js files are combined into one, once syntax parsing and other stuffs are done.

4. All JavaScript files shares same global scope.

— — — — — — — 🚀 — — — — — — — — — —

As JavaScript shares same scope among files, we can get tangled in managing various situations. Let us understand this by taking an example.
Consider below code snippet.

In the below code, we have two JS files, first.js and second.js . Both are included in index.html . And in both JS file we have a variable pawanPutra . And in index.html there is a console statement which is logging pawanPutra into console window.

Think of a moment about what will be printed in the console? 🤔
.

.

.

.

So In the console Bajrangbali will be printed. Why? Because once compilation is done, both the files will be combined into one, and the second.js overrides the variable in first.js.

So if we change the order of import. then the console output will also be changed.

Now we have a problem, that my global variables are getting overwritten, and also getting shared among different files. Let us see how can we tackle this issue using an IIFE?

IIFE itself describes what it is. An Immediately-invoked Function Expression.
A function which is executed as soon as it is declared.

Syntax of an IIFE-

If above variants confuses you.
Simply create two moon brackets ()();
and put your function inside first moon bracket:
(function() { // code } )();

Benefits of using an IIFE:
1. We can prevent polluting global scope

2. We can prevent overwriting global variables.

3. We can reduce the scope look ups : JavaScript first search for property in local scope and then in parent scope. It stops checking for property when it reaches to global scope. By providing all global scope inside function we can have a little performance boost as search for property is faster in local scope rather than in global scope.

4. Saves Time and Disk space: we can use shorter name for all global objects.

Now when we have enough understanding then in the example shared above, if we wrap our pawantPutra variable inside an IIFE then at first we’ll get an error in index.html . Because now pawanPutra variable is no more available outside of first.js and second.js .

IIFE is the reason we can freely create separate component files in React, Vue and in Angular.

One last thing? Can we remove the first moon bracket from an IFFE? 🌼
.
.
.
.
.
Yes, let’s see below code snippet: 🤯

How, because of the concept of function expression which we have seen as a first thing in this article, if we assign a function to a variable, it becomes an function expression. And we are simply calling the expression using () .

The purpose of first moon bracket is to only make the function declaration, a function expression.

Cheers !!! Happy Coding !!!

🍻