Immediately-Invoked Function Expression (IIFE)

I have been tinkering with JS module bundling at Netflix and found IIFEs are a recurring pattern in JS Modules. IIFEs, pronounced as iffy, stands for Immediately-Invoked Function Expression.

I also realized that a lot many javascript developers are uncomfortable working with IIFEs. This post is an attempt to help javascript engineers understand the potentially complex concept behind IIFE.


Table of Content

  • What exactly is an IIFE
  • Why do we need IIFE

What exactly is an IIFE

An Immediately-invoked Function Expression (IIFE) is a way to execute functions immediately, as soon as they are created. Let’s see how they are created.

(
/* code */
);
/* code */
/* code */
/* code */

We use empty parenthesis.

A Function is defined inside the parenthesis.

And then we append () to invoke that function.

The wrapping parentheses around the function definition is needed.

It tells the parser to treat the function definition as an expression.

When the javascript parser encounters the function keyword, it knows to parse it as a function expression and not a function declaration.

The final () just invokes this expression.

🎉 Congratulations 🎉!

You just created an IIFE!

Why do we need IIFE

In Javascript, whenever we invoke a function, we create a new execution context. Any variable (or even new functions) defined within an invoked function can only be accessed inside (and never from outside) that context. This means, invoking a function gives us a way to create something that resembles private variables.

In simple words:

IIFE allows us to define an isolated scope and execute code in this scope

Can IIFEs return something?

The answer is - Yes, IIFEs can return objects, functions… anything.

var counter = (function() {
})();
var counter = (function() {
var counter = (function() {
var counter = (function() {
var counter = (function() {

Let’s take a look at this code.

We can create an anonymous function expression that gets invoked immediately, and assign its return value to a variable counter.

Let us try and return an object from this function.

This code returns an object with properties, these properties are methods - get, set and increment

This counter object can then be used to get, set, or increment the value of i.

What is interesting is that you cannot access counter.i!

It will be undefined

i is not a property of the returned object.

Also, if you try accessing i you will get a ReferenceError: i is not defined because i exists inside the closure of the anonymous function.

I hope with this simple example it is easy to see how IIFE can be used to

  • return an object and expose just the public methods
  • create private variables (like i in this case)

The Module Pattern

A Module is a re-usable, self contained collection of code that

  • exposes distinct functionalities, that its consumers can use
  • never exposes private information

The counter created in the code example above is a perfect example of a Module

The counter IIFE above

  • returns an object with public methods (get, set and increment),
  • and, is capable of hiding the implementation detail (in this case, the variable i).

This mechanism to build Modules where we namespace related methods to minimized global-scope variable name pollution and also create private variables is called

The Module Pattern.

Conclusion

This is how IIFE’s can be used to create Modules.

This pattern is commonly used by module bundlers like webpack, browserify, etc when they generate the final bundle.

Thank you for reading this post and I hope this was helpful.