Everything You Didn’t Know about IIFE

Immediately Invoked Function Expression or IFFE (pronounced as ‘iffy’), as the name suggests, is a function expression which is ‘immediately invoked’. i.e. it is a function that gets executed as soon as it is defined.

However, before diving deep into the ‘what’ and ‘why’ of IIFE, let’s step back a little and look into some of the concepts of ‘functions’ in JavaScript, which will help us understand IIFE more in-depth.

In JavaScript, a ‘function’ is a block of code. It is designed to perform a particular task. To execute a function, we have to call the function, which is also known as invoking a function.

There are two ways we can define a ‘function’ in JavaScript.

1. Function Declaration: Function Declarations begin with the ‘function’ keyword, followed by the function name. To execute the function, we have to call or invoke it. We can do that by adding ‘()’ at the end of the function name. Here’s an example to make things clear.

Example:

2. Function Expression: Function Expressions are first created and then stored in a variable. These, unlike Function Declarations, do not start with the ‘function’ keyword. Function expressions can be anonymous,  named or an IIFE.

Examples:

Now, that we are finally in the IIFE zone, let’s explore it further.

Creating an IIFE

To create an IIFE we have to wrap the function definition within parenthesis:

The opening parenthesis ‘(’ at the beginning of the function tells the JavaScript compiler that it is a function expression and not a function declaration as the function is not starting with a ‘function’ keyword.

To invoke the function immediately (well, that is the whole point of creating an IIFE) we just have to add ‘()’ at the end of the closing outer parenthesis.

There we have it, a working IIFE.

Note: We can store an IIFE in a variable too, just like the named and anonymous function expressions. When we do so with an IIFE, the return value from the IIFE gets stored in the variable and not the function itself. As IIFE’s can be invoked only once, we cannot use the variable name to invoke the IIFE again.

Example:

IIFE Variations

There are two different ways to create an IIFE and both the variations are equally popular and generate the same result. We can use either of the variations as per our liking.

The difference between the two variations is rather minimal as you might have already noticed. In variation 1, the parenthesis for invoking the function is outside the closing wrapping parenthesis, whereas in variation 2,  the parenthesis for invoking the function is inside the closing wrapping parenthesis as shown in the above example.

But Why Do We Need an IIFE?

Now that we know the ‘what’ of IIFE, let’s understand the ‘why’.

Data privacy is the main reason behind creation of IIFEs. Lets try to understand this concept using the example below:

Example:

In JavaScript, variables declared within a function have function scope. As a result they become inaccessible to the outside world. In the above example, the variable ‘greeting’ and function ‘welcome’ are contained within the IIFE, therefore we can only access them inside the function. When we try to access them outside the function we get a reference error.

Wait, but we could achieve the same result by creating a named function declaration and invoking it immediately, isn’t it? Yes we could, but there are couple of other advantages to IIFE which are not available to a named function declaration.

IIFE can either be a named function or an anonymous one, as we saw in our last example (which is a named IIFE called ‘hello’). Either way, it has the advantage of eliminating the possibility of a global name collision as the names defined within an IIFE do not ‘leak’ to the global namespace. Secondly, it prevents the function from getting invoked accidentally as IIFE’s can be invoked only once.

So, that’s all about IIFE. Now it’s time to start using it in code and experience the magic that happens with it.

Thanks for reading!

Related Posts