Immediately invoked function expression: Difference between revisions

Revision as of 09:54, 23 December 2018

Revision as of 09:54, 23 December 2018

Line 2:

An '''immediately invoked function expression''' (or '''IIFE''', pronounced "iffy")<ref name=Alman>{{cite web |last=Alman |first=Ben |title=Immediately Invoked Function Expressions |url=http://benalman.com/news/2010/11/immediately invoked-function-expression |date=15 November 2010 |accessdate=4 February 2013 |archive-url=https://web.archive.org/web/20171201033208/http://benalman.com/news/2010/11/immediately invoked-function-expression/ |archive-date=1 December 2017 |dead-url=no}}</ref> is a [[JavaScript]] [[Programming idiom|programming language idiom]] which produces a [[scope (computer science)|lexical scope]] using JavaScript's [[function scoping]]. Immediately invoked function expressions can be used to avoid [[JavaScript syntax#Scoping and hoisting|variable hoisting]] from within blocks, protect against polluting the [[Global variable|global environment]] and simultaneously allow public access to methods while retaining privacy for variables defined within the function. This concept has been referred to as a '''self-executing anonymous function''',<ref>{{cite book |last=Resig |first=John |title=Pro JavaScript Techniques |year=2006 |publisher=Apress |isbn=978-1-4302-0283-7 |page=29}}</ref> but Ben Alman introduced the term IIFE as a more semantically accurate term for the idiom, shortly after its discussion arose on comp.lang.javascript.<ref name=Alman/><ref name=Osmani>{{cite book |last=Osmani |first=Addy |title=Learning JavaScript Design Patterns |year=2012 |publisher=O'Reilly |isbn=978-1-4493-3487-1 |page=206}}</ref><ref>{{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}}</ref>

== Usage ==

An immediately invoked function expression (or IIFE, pronounced "iffy")[1] is a JavaScript programming language idiom which produces a lexical scope using JavaScript's function scoping. 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. This concept has been referred to as a self-executing anonymous function,[2] but Ben Alman introduced the term IIFE as a more semantically accurate term for the idiom, shortly after its discussion arose on comp.lang.javascript.

Immediately invoked function expressions may be written in a number of different ways.<ref name=Enlighten>{{cite book |last=Lindley |first=Cody |title=JavaScript Enlightenment |year=2013 |publisher=O'Reilly |isbn=978-1-4493-4288-3 |page=61}}</ref> A [[Coding conventions|common convention]] is to enclose the function expression{{spnd}}and optionally its invocation operator{{spnd}}with the grouping operator,<ref>{{cite web |url=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Grouping |title=Grouping operator |publisher=Mozilla Developer Network}}</ref> in parentheses, to tell the parser explicitly to expect an expression. Otherwise, in most situations, when the parser encounters the <code>function</code> keyword, it treats it as a function declaration (statement), and not as a function expression.<ref>{{cite book |last=Zakas |first=Nicholas |title=Maintainable JavaScript |year=2012 |publisher=O'Reilly |isbn=978-1-4493-2768-2 |page=44}}</ref><ref>{{cite web |url=http://exploringjs.com/es6/ch_arrow-functions.html#iiaf |title=ExploringJS |author=Axel Rauschmayer}}</ref>

<syntaxhighlight lang="JavaScript">

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

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

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

</syntaxhighlight>

There are other ways to enforce a function expression:

<syntaxhighlight lang="JavaScript">

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

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

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

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

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

</syntaxhighlight>

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

<syntaxhighlight lang="JavaScript">

var f = function () { /* ... */ }();

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

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

</syntaxhighlight>

Passing variables into the scope is done as follows:

<syntaxhighlight lang="JavaScript">

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

</syntaxhighlight>

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]].<ref name=inimino>{{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 |dead-url=no}}</ref><ref>{{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 |dead-url=no}}</ref> For example:

<syntaxhighlight lang="JavaScript">

a = b + c

;(function () {

// code

})();

</syntaxhighlight>

...to avoid being parsed as <code>c()</code>.

== Examples ==