Immediately-invoked Function Expression

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.[1][3][4]

Usage

Immediately-invoked function expressions may be written in a number of different ways.[5] A common convention is to enclose the function expression (and optionally its invocation operator) with the grouping operator,[6] i.e. in parentheses, to explicitly tell the parser 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.[7][8]

(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  { /* ... */ };

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

var 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.[9][10] For example:

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

...to avoid being parsed as c.

Examples

The key to understanding design patterns such as immediately-invoked function expressions is to realize that until recently JavaScript had only function scope (but not block scope) and passes values by reference inside a closure.[11] (This is no longer entirely true, in the latest version of JavaScript block scoping is available and becomes evident when using the new let and const keywords[12].)

Evaluation context

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.[13]

var 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.[14]

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

getValue;  // 1

This is equivalent to the following code:

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

getValue;  // 1

David Herman's Effective JavaScript contains an example illustrating the problems of evaluation context inside loops.[15] While Herman's example is deliberately convoluted, it arises directly from the same lack of block scope.[16]

Establishing private variables and accessors

IIFEs are also useful for establishing private methods for accessible functions while still exposing some properties for later use.[17] The following example comes from Alman's post on IIFEs.[1]

// "counter" is a function that returns an object with properties, which in this case are functions.
var counter = (function  {
    var 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.

Terminology

"Immediately-invoked function expression" as a term describes a design pattern that has also been referred to as a "self-executing anonymous function".[1][5] However, immediately-invoked functions do not need to be anonymous, and ECMAScript 5's strict mode forbids arguments.callee,[18] making the latter term less accurate.[3][14]

In lambda calculus, this construct was referred to as "redex", for reducible expression, see Reduction strategy (code optimization).

References

  1. ^ a b c d Alman, Ben (2010). "Immediately Invoked Function Expressions". Retrieved 2013. 
  2. ^ Resig, John (2006). Pro JavaScript Techniques. Apress. p. 29. ISBN 9781430202837. 
  3. ^ a b Osmani, Addy (2012). Learning JavaScript Design Patterns. O'Reilly. p. 206. ISBN 9781449334871. 
  4. ^ Baagoe, Johannes. "Closing parenthesis in function's definition followed by its call". Retrieved 2010. 
  5. ^ a b Lindley, Cody (2013). JavaScript Enlightenment. O'Reilly. p. 61. ISBN 9781449342883. 
  6. ^ "Grouping operator". Mozilla Developer Network. 
  7. ^ Zakas, Nicholas (2012). Maintainable JavaScript. O'Reilly. p. 44. ISBN 9781449327682. 
  8. ^ Axel Rauschmayer. "ExploringJS". 
  9. ^ "JavaScript Semicolon Insertion: Everything you need to know", Friday, May 28, 2010
  10. ^ "Semicolons in JavaScript are optional", by Mislav Marohni?, 07 May 2010
  11. ^ Haverbeke, Marijn (2011). Eloquent JavaScript. No Starch Press. pp. 29-30. ISBN 9781593272821. 
  12. ^ ECMAScript 6 -- New Features: Overview & Comparison, Block-Scoped Variables
  13. ^ Alman, Ben. "simple-iife-example.js". Github. Retrieved 2013. 
  14. ^ a b Otero, Cesar; Larsen, Rob (2012). Professional jQuery. John Wiley & Sons. p. 31. ISBN 9781118222119. 
  15. ^ Herman, David (2012). Effective Javascript. Addison-Wesley. pp. 44-45. ISBN 9780321812186. 
  16. ^ Zakas, Nicholas C. (2011). "Mimicking Block Scope". Professional JavaScript for Web Developers. John Wiley & Sons. ISBN 9781118233092. 
  17. ^ Rettig, Pascal (2012). Professional HTML5 Mobile Game Development. John Wiley & Sons. p. 145. ISBN 9781118301333. 
  18. ^ "Strict mode". Mozilla JavaScript Reference. Mozilla Developer Network. Retrieved 2013. 

External links


  This article uses material from the Wikipedia page available here. It is released under the Creative Commons Attribution-Share-Alike License 3.0.


Immediately-invoked_function_expression
 



 
Connect with defaultLogic
What We've Done
Led Digital Marketing Efforts of Top 500 e-Retailers.
Worked with Top Brands at Leading Agencies.
Successfully Managed Over $50 million in Digital Ad Spend.
Developed Strategies and Processes that Enabled Brands to Grow During an Economic Downturn.
Taught Advanced Internet Marketing Strategies at the graduate level.



Manage research, learning and skills at defaultLogic. Create an account using LinkedIn or facebook to manage and organize your IT knowledge. defaultLogic works like a shopping cart for information -- helping you to save, discuss and share.


  Contact Us