Immediately invoked function expression: Difference between revisions

Revision as of 21:37, 11 March 2024

Latest revision as of 15:14, 25 February 2025

(16 intermediate revisions by 8 users not shown)

Line 1:

{{Short description|Javascript design pattern}}

An '''immediately invoked function expression''' (or '''IIFE''', pronounced "iffy", [[International Phonetic Alphabet|IPA]] /ˈɪf.i/) is a [[Programming idiom|programming language idiom]] which produces a [[scope (computer science)|lexical scope]] using [[function scoping]]. It was popular in [[JavaScript]]<ref name="Alman">{{cite web|url=http://benalman.com/news/2010/11/immediately-invoked-function-expression/|title=Immediately Invoked Function Expressions|last=Alman|first=Ben|date=15 November 2010|website=|url-status=live|archive-url=https://web.archive.org/web/20171201033208/http://benalman.com/news/2010/11/immediately-invoked-function-expression/|archive-date=1 December 2017|accessdate=18 January 2019}}</ref> as a method toof supportsupporting [[modular programming]] before the introduction of more standardized solutions such as [[CommonJS]] and [[ECMAScript#6th Edition – ECMAScript 2015|ES modules]].<ref>{{cite web |last1=McGinnis |first1=Tyler |title=JavaScript Modules: From IIFEs to CommonJS to ES6 Modules |url=https://ui.dev/javascript-modules-iifes-commonjs-esmodules/ |website=ui.dev |access-date=18 August 2021 |language=en |date=15 January 2019}}</ref>

Immediately invoked function expressions can be used to avoid [[JavaScript syntax#Scoping and hoisting|variable hoisting]] from within blocks, protectprotecting against polluting the [[Global variable|global environment]] and simultaneously allowallowing public access to methods while retaining privacy for variables defined within the function. In other words, it wraps functions and variables, keeping them out of the global scope and giving them a local scope.

== 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 |date=2 October 2023 |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:{{cn|date=September 2022}}

<syntaxhighlight lang="JavaScript">

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

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

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

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

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

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

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

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

</syntaxhighlight>

Line 33 ⟶ 21:

Passing variables into the scope is done as follows:

<syntaxhighlight lang="JavaScriptjavascript">

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

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

</syntaxhighlight>

Line 47 ⟶ 36:

==Examples==

The key to understanding design patterns such as IIFE is to realize that prior to ES6, JavaScript only featured [[Scope (computer science)#Function scope|function scope]] (thus lacking [[Scope (computer science)#Block scope|block scope]]), passing [[Call_by_reference|values by reference]] inside [[Closure (computer science)|closure]]s.<ref>{{cite book |last=Haverbeke |first=Marijn |title=Eloquent JavaScript |year=2011 |publisher=No Starch Press |isbn=978-1-59327-282-1 |pages=29–30}}</ref> This is no longer the case, as the ES6 version of JavaScript implements block scoping using the new <code>let</code> and <code>const</code> keywords.<ref>ECMAScript{{cite 6:web New|last1=Orendorff Features|first1=Jason |title=ES6 In Depth: Overviewlet &and Comparison,const [http|url=https://es6-featureshacks.mozilla.org/#BlockScopedVariables Block2015/07/es6-Scopedin-depth-let-and-const/ Variables|website=Mozilla Hacks – the Web developer blog |publisher=[[Mozilla]] |access-date=16 October 2024 |date=31 Jul 2015}}</ref><syntaxhighlight lang="javascript">

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

</syntaxhighlight>

=== Evaluation context ===

Line 62 ⟶ 70:

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

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

<syntaxhighlight lang="javascript">

Line 72 ⟶ 80:

v = 2;

getValue(); // 1

</syntaxhighlight>