|
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.
== Usage ==
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 |url-status=live}}</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 |url-status=live}}</ref> For example:
<syntaxhighlight lang="JavaScript">
a = b + c
;(function () {
// code
})();
</syntaxhighlight>
...to avoid being parsed as <code>c()</code>.
==Examples==
| 