Javascript - Immediately invoked function expression (IIFE)


An IIFE (pronounced “iffy”) is a function expression that is immediately invoked in order to create a local scope for the variables

They therefore won’t affect the surrounding code outside of it - the global scope particularly

They are used as the basic construct of global library to create a private scope.


(function() {
    var localVariable = globalVariable
    ... = function() { return localVariable; };

// Equivalent to
(function(localVariable) {
       result[globalVariable] = function() { return localVariable; };


Basic with parameters

  • A basic function expression
funcExp = function (x, y) { return x + y; } ;
     /* Parentheses means execute: here the function expression */
     funcExp(2,3) /* Pass the variables 2 and 3 */ 
  • The same function expression but as an IIFE
     /* Parentheses means execute: here the function expression */
     ( function (x, y) { return x + y; } )(2,3) /* Pass the variables 2 and 3 */ 

Scope creation

An IIFE is often used to create a scope in order to declare variables that won’t affect the surrounding code outside of it.

var foo = "foo from Global";

(function IIFE(){
    var foo = "foo from IIFE";
    console.log( foo ); 
})(); // "Hello!"

// The foo global variable was not affected by the foo variable in the IIFE

Discover More
How to create a javascript global library (namespace pattern)

This article show you how Javascript global library are created with the namespace pattern
Javascript - eval

eval evaluates a javascript expression (ie a javascript string) and therefore can eval a script Most functions have access to the scope where they are defined, and nothing else. But eval has access...
How to manipulate a Binary large object (BLOB) with Javascript?

The blob object is a data container for blob content This is the API to work with binary data in the browser and is widely supported Because any type of data is...
Javascript Lexical Environment Scope Chaine
Javascript - (Variable) Scope (Namespace)

Variable scope in Javascript. variable scope is delimited by the function definition, not a the block level A block has the scope of its inner function. As a function is also an object, by generalization,...
Javascript - Await and Async Syntax

await and async is the second promise syntax that permits to manipulate promise. The async/await syntax is part of ECMAScript 2017 and reduces the callback nesting find in the chaining syntax. The...
Javascript - Function Expression (Anonymous function)

A Reference/Operators/functionFunction Expression is just an function in the form of an expression stored generally in a variable that you execute by adding its signature ([param,[, param,[..., param]]])...
Javascript Function Method
Javascript - Functions

Functions functionalities in Javascript. A function in Javascript is a variable that’s given a reference to the function being declared. The function itself is a value (as an integer or an array) that...
Javascript - Module Pattern

This article shows classic design pattern with ECMAScript on how to organize javascript code with a structure that make possible to: get input return output and hide the implementation from the...

Share this page:
Follow us:
Task Runner