IIFE in Javascript

What is IIFE?

Immediately Invoked Function Expression (IIFE) is a javascript function that is invoked just after its declaration. It is a simple function with just one strict condition, i.e., anything inside the function block must be executed immediately. This design pattern is also known as Self Executing Anonymous Function.

Example:

(function () {
    alert("I will be executed immediately!!!");
})();

Don't worry about syntax right now. Just read the example once or twice to make yourself familiar with IIFE syntax.

How to create an IIFE

Creating an IIFE involves two steps:

• Creating a function expression.
• invoking the function expression immediately.

Creating a function Expression

In Javascript, an expression always returns a value and can be used in any place where a value is expected.

• 2*2
• AddFunc(a, b)

In most cases, when javascript parser encounters the function keyword, it interprets it as a function declaration and not as a function expression. So, a general way to create a function expression is to enclose the function declaration in the grouping operator (parenthesis). Enclosing inside "( )" tells the parser explicitly to expect an expression. In this case, the expression is the function.

Example:

(function () { /* function body */ });

Invoking the function expression immediately

To invoke the function expression created in the above example, we just need to add a couple of parentheses at the end.

(function () {
    /* function body */
}();

---

The above example is the same as the first example in this article.

---

Other Examples:

(function () { /* function body */ }());

//es6 syntax with arrow function
(() => { /* function body */ })();

Why IIFE

Now we know the code, the question remains, why should we use IIFE? What do we gain from using it? Is the simple javascript function not good enough?

The answer to the above questions is explained below in several points:

IIFE prevents global namespace pollution

The scope of the function name and the variables defined inside IIFE are local to the IIFE itself. Therefore, preventing function and variable names from taking space in the global namespace. It also helps in preventing namespace collision.

Variables defined inside IIFE remains inside IIFE

Variables defined inside IFFE are local to IFFE itself and does not exist outside of it.

Example:

(function () {
    var privateVar = "I am private to IIFE";

    // Output: "I am private to IFFE"
    console.log(privateVar);
})();

// ReferenceError: privateVar is not defined
console.log(privateVar);

IIFE helps keep the memory clean

The required functions and variables are created and used when the IIFE is invoked. As soon as IIFE finishes its execution, the functions and variables created are available for Garbage Collection, helping in keeping the memory clean.

Passing Parameters to IIFE

We can pass parameters to IIFE inside the last pair of parentheses separated by a comma.

(function(name, greeting){
    alert("Hello " + name);
    console.log(greeting);
})("John Doe", "How are you?");

Different ways of creating IIFE

We can create IIFE wherever a function expression can be created in javascript.

Following IIFE's are enforced from valid function expressions:

!function () { /* ... */ }();
~function () { /* ... */ }();
-function () { /* ... */ }();
+function () { /* ... */ }();
void function () { /* ... */ }();

In other words, in the context where a function expression is created, enclosing in parenthesis is not required.

var f = function () { /* ... */ }();
true && function () { /* ... */ }();

But do exercise caution is using these.

---

IIFE is a design pattern that offers a lot of benefits if used correctly. I hope this article helped you in understanding it better.

Originally published on hackinbits.com.
If you liked this article, don't forget to upvote and recommend it. Feel free to ask any questions in the comments below.