Immediately-invoked Function Expressions (IIFE)

IIFE or Immediately-invoked Function Expressions are functions that we execute immediately after we define them. IIFE was used to isolate the variables and stop polluting the global object. But with the introduction of block scope, modules, let & const statements IIFE is rarely needed.

Immediately invoked Function Expressions

The following is the pattern of the IIFE.

To create an IIFE, first, create a function. Note that we have not given any name to the function (i.e. functional declaration syntax), not assigned it to some variable (like in function expression)

Wrap it inside the bracket.

Finally, we need to execute it. To do that add parentheses at the end with a value for each parameter inside the parentheses

Adding the parentheses will invoke the IIFE immediately.

We need to add the trailing semicolon if we use two IIFE one after another. Otherwise code won’t work.

Named IIFE

You can also give a name to IIFE.

But you cannot use that name call the function

Need for IIFE

IIFE was used to create new JavaScript Scope before the arrival of the let & const keyword in ES6 and the block scope

Take a look at the following code. The someVar variable is declared inside the if condition. But you can access it outside the if condition also.

Now moving the if condition inside an IIFE creates a new function scope. We now cannot access the variables declared inside the IIFE. Accessing the someVar results in an error.

But since the ES6, we can use the let (or const) instead of var.

Similarly, the following code creates a block scope around curly braces Hence the variable i is invisible outside the curly braces. Without the let statement only way to achieve this is using the IIFE.

References

IIFE

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top