The Immediately Invoked Function Expression


The Immediately Invoked Function Expression (IIFE, pronounced iffy) is a named/anonymous function expression that is 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:

(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 is what makes it possible to use libraries like jQuery and Prototype which both override the $ variable side by side.

2. IIFEs create closures  which can be used in turn 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

Advertisements

7 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

  2. […] There! That’s a trick for modifying the live production code during debugging – you can overwrite variables, change functions or even throw Exceptions. Just make sure your expression is falsy (or truthy if you want to break at that point). Want to turn declarations into expressions? Read about the IIFE. […]

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s