immediately invoked function expression

Immediately invoked function expressions may be written in a number of different ways.{{cite book |last=Lindley |first=Cody |title=JavaScript Enlightenment |year=2013 |publisher=O'Reilly |isbn=978-1-4493-4288-3 |page=61}} A common convention is to enclose the function expression{{spnd}}and optionally its invocation operator{{spnd}}with the grouping operator,{{cite web |url=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Grouping |title=Grouping operator |date=2 October 2023 |publisher=Mozilla Developer Network}} 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.{{cite book |last=Zakas |first=Nicholas |title=Maintainable JavaScript |year=2012 |publisher=O'Reilly |isbn=978-1-4493-2768-2 |page=44}}{{cite web |url=http://exploringjs.com/es6/ch_arrow-functions.html#iiaf |title=ExploringJS |author=Axel Rauschmayer}}

(function () { /* ... */ })();

(function () { /* ... */ }());

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

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");

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

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.{{cite web |url=http://inimino.org/~inimino/blog/javascript_semicolons |title=JavaScript Semicolon Insertion: Everything you need to know |date=28 May 2010 |archive-url=https://web.archive.org/web/20171002224530/http://inimino.org/~inimino/blog/javascript_semicolons |archive-date=2 October 2017 |url-status=live}}{{cite web |url=https://mislav.net/2010/05/semicolons/ |title=Semicolons in JavaScript are optional |first=Mislav |last=Marohnić |date=7 May 2010 |archive-url=https://web.archive.org/web/20170808231150/https://mislav.net/2010/05/semicolons/ |archive-date=8 August 2017 |url-status=live}} For example:

a = b + c

;(function () {

// code

})();

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

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.{{cite book |last=Haverbeke |first=Marijn |title=Eloquent JavaScript |year=2011 |publisher=No Starch Press |isbn=978-1-59327-282-1 |pages=29–30}} This is no longer the case, as the ES6 version of JavaScript implements block scoping using the new let and const keywords.{{cite web |last1=Orendorff |first1=Jason |title=ES6 In Depth: let and const |url=https://hacks.mozilla.org/2015/07/es6-in-depth-let-and-const/ |website=Mozilla Hacks – the Web developer blog |publisher=Mozilla |access-date=16 October 2024 |date=31 Jul 2015}}

// Before ES6: Creating a scope using an IIFE

var foo = 1;

var bar = 2;

(function(){

var foo = 3; // shadows the outer `foo`

bar = 4; // overwrites the outer `bar`

})();

console.log(foo, bar); // 1 4

// Since ES6: Creating a scope using curly brackets in combination with let and const

const foo = 1;

let bar = 2;

{

const foo = 3; // shadows the outer `foo`

bar = 4; // overwrites the outer `bar`

}

console.log(foo, bar); // 1 4

A lack of block scope means that variables defined inside (for example) a for loop will have their definition "hoisted" to the top of the enclosing function. Evaluating a function that depends on variables modified by the outer function (including by iteration) can be difficult. We can see this without a loop if we update a value between defining and invoking the function.{{cite web |last=Alman |first=Ben |title=simple-iife-example.js |url=https://gist.github.com/cowboy/4710214 |work=Github |accessdate=5 February 2013}}

let v, getValue;

v = 1;

getValue = function () { return v; };

v = 2;

getValue(); // 2

While the result may seem obvious when updating v manually, it can produce unintended results when getValue() is defined inside a loop.

Hereafter the function passes v as an argument and is invoked immediately, preserving the inner function's execution context.{{cite book |last1=Otero |first1=Cesar |last2=Larsen |first2=Rob |title=Professional jQuery |year=2012 |publisher=John Wiley & Sons |isbn=978-1-118-22211-9 |page=31}}

let v, getValue;

v = 1;

getValue = (function (x) {

return function () { return x; };

})(v);

v = 2;

getValue(); // 1

This is equivalent to the following code:

let v, getValue;

v = 1;

function f(x) {

return function () { return x; };

};

getValue = f(v);

v = 2;

getValue(); // 1

IIFEs are also useful for establishing private methods for accessible functions while still exposing some properties for later use.{{cite book |last=Rettig |first=Pascal |title=Professional HTML5 Mobile Game Development |year=2012 |publisher=John Wiley & Sons |isbn=978-1-118-30133-3 |page=145}} The following example comes from Alman's post on IIFEs.

// "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

If we attempt to access counter.i from the global environment, it will be undefined, as it is enclosed within the invoked function and is not a property of counter. Likewise, if we attempt to access i, it will result in an error, as we have not declared i in the global environment.

Originally known as a "self-executing anonymous function",{{cite book |last=Resig |first=John |title=Pro JavaScript Techniques |year=2006 |publisher=Apress |isbn=978-1-4302-0283-7 |page=29}} 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.{{cite book |last=Osmani |first=Addy |title=Learning JavaScript Design Patterns |year=2012 |publisher=O'Reilly |isbn=978-1-4493-3487-1 |page=206}}{{cite news |last=Baagoe |first=Johannes |title=Closing parenthesis in function's definition followed by its call |url=https://groups.google.com/forum/#!topic/comp.lang.javascript/tjVn1NjGDN8%5B1-25%5D |accessdate=19 April 2010}}

Notably, immediately invoked functions need not be anonymous inherently, and ECMAScript{{nbsp}}5's strict mode forbids arguments.callee,{{cite web |title=Strict mode |url=https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode#Making_eval_and_arguments_simpler |work=Mozilla JavaScript Reference |publisher=Mozilla Developer Network |accessdate=4 February 2013}} rendering the original term a misnomer.

• Evaluation strategy

{{reflist|30em}}

• {{cite web |title=Functions and function scope |url=https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope |work=Mozilla JavaScript Reference |publisher=Mozilla Developer Network |accessdate=4 February 2013}}

Category:JavaScript

Category:Programming language concepts