The Immediately Invoked Function Expression


The Immediately Invoked Function Expression (IIFE, pronounced iffy) is a named/anonymous function expression executed immediately after its declaration.

It typically involves appending the function invocation operator ‘()’ to the end of a function expression; this triggers its immediate invocation.

(function () {
    console.log("IIFE!");
})();

// Another style
(function () {
    console.log("IIFE!");
}());

// passing in variables
(function ($) {
    console.log('jQuery:', $);
})(jQuery);

Some background

The IIFE used to be wrongly regarded as a Self-Invoked Anonymous Function (SIAF) until Ben “Cowboy” Alman (of GruntJS and tinypubsub fame) suggested the more appropriate IIFE term. An IIFE does not have to be self-executing or anonymous all the time.

// Named function expression
!function name() {
    console.log("IIFE!");
}();

Self-Invoked Anonymous Functions (SIAF)

A self-executing function is a function that executes itself, a self-executing function would usually have this pattern:

function selfExecFn() {
    selfExecFn();
}

Anonymous functions are function expressions with no identifiers/names.

(function () {
    //...code here
})()

A SIAF has to be both self-executing and anonymous right? Anonymous functions have no identifier, thus the callee property of the arguments object is used to achieve self-invocation – arguments.callee always refers to the currently executing function.

Combining all these, a self-invoked anonymous function will look like the code snippet below:

// Never-ending recursive calls
(function () {
    arguments.callee();
})()

Note: arguments.callee is going to be deprecated and does not work in EcmaScript 5’s strict mode. So technically, it’ll be impossible to create a SIAF!

Aside, I wonder why they are not called recursive anonymous functions – RAF, which sounds much more apt.

What are the uses of the IIFE?

1. Data encapsulation is probably the biggest benefit. IIFEs help to prevent properties in the global object from getting overwritten and/or polluted while protecting the local variables from external parties. This makes it possible to use libraries like jQuery and Prototype, which both override the $ variable side by side.

2. IIFEs create closures that can be used to simulate ‘private’ variables in JavaScript.

3. Comes in handy for the module pattern.

Want to achieve a deeper understanding of JavaScript? Here are a couple more posts:

1. The JavaScript Function

2. Three Important JavaScript Concepts

3. Defining JavaScript Functions

10 thoughts on “The Immediately Invoked Function Expression

  1. You’ve become my go-to guy for all things JS;) I’ve always wondered about this pattern and only recently fully graped it and used it in my code.

    I agree that the name RAF is more suitable for SIAF. They are just recursive functions.

    Good content as always.

    Barkallah feeh brother.

    With your help, I should become a true JS Ninjia like yourself!:P

    Like

Leave a comment

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