Computer and Business Skills training

Sign Up
Home / JavaScript / JavaScript IIFE

Understanding Immediately-Invoked Function Expressions - Part 1

You may have heard the term "immediately-invoked function expression" but may be unfamiliar with what they actually are or how they're used.


An immediately-invoked function expression (or IIFE, pronounced 'iffy' for short) is a Javascript pattern to create a private scope within the current scope. This new scope may or may not be persistent (a closure). The technique uses an anonymous function inside parentheses to convert it from a declaration to an expression, which is executed immediately.


The pattern has also been referred to as a "self-invoked (or executed) anonymous function", but the term IIFE was coined by Ben Altman as a more accurate name for the pattern.


The basic concept


Suppose we had the following code in our program:


See the Pen Invoked Functions Example 1 by Jeff Wiatt (@jwiatt) on CodePen.


When we call x, we see that 100 is dumped to the console. Because of the way Javascript's scope chain works, x's scope object is linked to the scope in which it was defined; Therefore x has access to a's value. The value of y is not accessible outside of x, as the scope chain allows access from inner to outer scopes only, thus x's scope is private.


Of course, this is simply a function declaration, not an IIFE, which is why we need to call our function separately after declaring it. Function declarations can't be executed using the invocation operator () after it. The following code produces a syntax error:


See the Pen Invoked Functions Example 2 by Jeff Wiatt (@jwiatt) on CodePen.


However, if we were to put the function declaration inside of parentheses, we turn the declaration into an expression, which can then be immediately invoked:


See the Pen Invoked Functions Example 3 by Jeff Wiatt (@jwiatt) on CodePen.


Enclosing both the declaration as well as the invocation operator inside parentheses also works, and is the style Douglas Crockford recommends:


See the Pen Invoked Functions Example 4 by Jeff Wiatt (@jwiatt) on CodePen.


Also, since we're immediately running this function as a one-off deal, there's no need to name it, therefore an anonymous function works nicely:


See the Pen Invoked Functions Example 5 by Jeff Wiatt (@jwiatt) on CodePen.


Although the scope chain allows us to access the outer scope implicitly to get access to a, a clearer and better approach would be to use dependency injection practices and explicitly pass the required values into the IIFE:


See the Pen Invoked Functions Example 5 by Jeff Wiatt (@jwiatt) on CodePen.


Great, but so what?


So what's the benefit to doing this? This pattern is useful when you want to do some processing but don't want to clutter up the current scope (especially the global scope) with a bunch of objects. The IIFE scope is private since it can't be accessed from the outside, private data can be made persistent using closures, and any non-persistent objects get cleaned up when the IIFE finishes execution.


A simple example


Suppose we want to implement a counter, but we don't want our counter variable to be exposed. We can use an IIFE to privatize the data:


See the Pen Invoked Functions Example 6 by Jeff Wiatt (@jwiatt) on CodePen.


Each time the button is clicked, the counter is incremented. Meanwhile, the counter variable is not accessible from outside the IIFE, so its value stays private. Also, because we have created a reference to counter outside the IIFE scope (inside the function attached to the button handler), we have created a closure, and so the IIFE's scope object is not destroyed once it finishes executing, and so counter is now persistent.


This also works with multiple items:


See the Pen Invoked Functions Example 7 by Jeff Wiatt (@jwiatt) on CodePen.


Note that if we want to make this reusable we can simply use a named function instead of an IIFE:


See the Pen Invoked Functions Example 8 by Jeff Wiatt (@jwiatt) on CodePen.


Note that in the last example, we used an assignment rather than a function declaration. Assignment operators already expect an expression, so enclosing the function in parentheses is optional. Some people recommend you do so for consistency, but most of the time I see the parentheses omitted.


we'll look at some other common ways to use IIFEs in your applications.


You can learn more about this and other advanced techniques in our Advanced JavaScript training course. To view a sample of our past students testimonials, please click on the following link: JavaScript Class testimonials.


Why train with us?Need Group training quotation?Fresh Starbucks brewed every dayFREE Class Repeat with each course