An immediately invoked function expression (or IIFE, pronounced "iffy", IPA /ˈɪf.i/) is a programming language idiom which produces a lexical scope using function scoping. It was popular in JavaScript^[1] as a method to support modular programming before the introduction of more standardized solutions such as CommonJS and ES modules.^[2]

Immediately invoked function expressions can be used to avoid variable hoisting from within blocks, protect against polluting the global environment and simultaneously allow public access to methods while retaining privacy for variables defined within the function.

Usage

Immediately invoked function expressions may be written in a number of different ways.^[3] A common convention is to enclose the function expression – and optionally its invocation operator – with the grouping operator,^[4] in parentheses, to tell the parser explicitly to expect an expression. Otherwise, in most situations, when the parser encounters the function keyword, it treats it as a function declaration (statement), and not as a function expression.^[5][6]

(function () { /* ... */ })();
(function () { /* ... */ }());
(() => { /* ... */ })(); // With ES6 arrow functions (though parentheses only allowed on outside)

There are other ways to enforce a function expression:

!function () { /* ... */ }();
~function () { /* ... */ }();
-function () { /* ... */ }();
+function () { /* ... */ }();
void function () { /* ... */ }();
delete function () { /* ... */ }();
typeof function () { /* ... */ }();
await function () { /* ... */ }();

In contexts where an expression is expected, wrapping in parentheses is not necessary:

let f = function () { /* ... */ }();
true && function () { /* ... */ }();
0, function () { /* ... */ }();

Passing variables into the scope is done as follows:

(function(a, b) { /* ... */ })("hello", "world");

An initial parenthesis is one case where the automatic semicolon insertion (ASI) in JavaScript can cause problems; the expression is instead interpreted as a call to the last term on the preceding line. In some styles that omit optional semicolons, the semicolon is placed in front of the parenthesis, and is known as a defensive semicolon.^[7][8] For example:

a = b + c
;(function () {
  // code
})();

...to avoid being parsed as c().

Examples

The key to understanding design patterns such as IIFE is to realize that prior to ES6, JavaScript only featured function scope (thus lacking block scope), passing values by reference inside closures.^[9] This is no longer the case, as the ES6 version of JavaScript implements block scoping using the new let and const keywords.^[10]

let v, getValue;
v = 1;
getValue = function () { return v; };
v = 2;

getValue(); // 2

let v, getValue;
v = 1;
getValue = (function (x) {
    return function () { return x; };
})(v);
v = 2;

getValue;  // 1

let v, getValue;
v = 1;
function f(x) {
    return function () { return x; };
};
getValue = f(v);
v = 2;

getValue;  // 1

// "counter" is a function that returns an object with properties, which in this case are functions.
let counter = (function () {
    let i = 0;

    return {
        get: function () {
            return i;
        },
        set: function (val) {
            i = val;
        },
        increment: function () {
            return ++i;
        }
    };
})();

// These calls access the function properties returned by "counter".
counter.get();       // 0
counter.set(3);
counter.increment(); // 4
counter.increment(); // 5

Terminology

Originally known as a "self-executing anonymous function",^[14] Ben Alman later introduced the current term IIFE as a more semantically accurate name for the idiom, shortly after its discussion arose on comp.lang.javascript.^[1][15][16]

Notably, immediately invoked functions need not be anonymous inherently, and ECMAScript 5's strict mode forbids arguments.callee,^[17] rendering the original term a misnomer.

See also

• Evaluation strategy

References

External links

• "Functions and function scope". Mozilla JavaScript Reference. Mozilla Developer Network. Retrieved 4 February 2013.