IIFE – Immediately-Invoked Function Expression in Javascript (Simplified)

Functions are a core component of Javascript language. We do a lot of function declaration in our daily programming life. After reading this article, you might use a power of IIFE to encapsulate your business logic and expose minimum methods to a global scope. IIFE is acronym for “Immediately Invoked Function Expression”. It is pronounced as “iify”. The Very simple syntax of IIFE is as below.

(function() {
    /* Code here */
})();

Content

• Function Declaration vs Function Expression
• Immediately Invoked Function Expression – IIFE
• Usage : Encapsulation in JS using IIFE

Function Declaration vs Function Expression

In javascript, function keyword can be used as a function declaration or as a function expression.

Function Declaration

Function declaration defines the function. Function declaration start with function keyword in the global scope or inside a function.

// ==== NAMED FUNCTION DECLARATION ====
function square(a) {
    var result = a * a;
    console.log("Result: "+ result);
    return result;
}
// You can call named function by its name.
square(2);
//Output: Result: 4

Function Expression

Function expression can be defined using a function keyword. Function expression must not start with function keyword. Function expression can be created by wrapping function declaration inside parenthesis (). Function Expression can also start with Unary Operator (~, +, -, &) .

// ==== ANONYMOUS FUNCTION EXPRESSION ====
var printMessage = function() {
    console.log("Anonymous Function Expression can be called by function identifier.");
}
printMessage();
// Output: Anonymous Function Expression can be called by function's identifier.


// ==== NAMED FUNCTION EXPRESSION ====
var getSquare = function square(a) {
    var result = a * a;
    console.log("Result: "+ result);
    return result;
}
// You can call named function by its name.
getSquare(2);
// Result: 4

square(2);
// prints syntax error : square is not defined.

// ==== WRAP PARENTHESIS TO CREATE FUNCTION EXPRESSION ====
(function square(a) {
    var result = a * a;
    console.log("Result: "+ result);
    return result;
});

// ==== PREFIX UNARY OPERATOR TO CREATE FUNCTION EXPRESSION ====
+function square(a) {
    var result = a * a;
    console.log("Result: "+ result);
    return result;
};

IIFE – Immediately-Invoked Function Expression

We can not immediately invoke function declaration. Trying to do so will raise an syntaxt error as shown in below example.

// ==== CAN NOT IMMEDIATELY INVOKE FUNCTION DECLARATION =====
function printMessage() {
    console.log("Can not Immediately invoke function declaration.");
}();
// Syntaxt Error.

Add parenthesis () in the end of function expression to immediately invoke it.

// ==== Anonymous IIFE ====
(function() {
    console.log("Immediately invoked anonymous function.");
})();
// Output : Immediately invoked anonymous function.

// ==== Passing Parameter to Named IIFE =====
(function square(a) {
    var result = a * a;
    console.log("Result: "+ result);
    return result;
})(2);
// Output : Result: 4

Usage : Encapsulation in JS using IIFE

We can achieve encapsulation in javascript using IIFE. Well known Javascript libraries like Backbone.js, jQuery.js etc… uses IIFE.

We are using IIFE to create a simple calculator in the following example. Using IIFE, we are hiding num1 and num2 variable from being global and exposing only necessary methods of calculator functionality.

(function(calculator){
    var num1 = 0;
    var num2 = 0;

    calculator.setNum1 = function(n1) {
        num1 = n1;
    };
    calculator.setNum2 = function(n2) {
        num2 = n2;
    },
    calculator.add = function() {
        return (num1 + num2);
    };
    calculator.subtract = function() {
        return (num1 - num2);
    };
    calculator.multiply = function() {
        return (num1 * num2);
    };
    calculator.divide = function() {
        return (num1 / num2);
    };
})(window.calculator = window.calculator || {});

calculator.setNum1(10); // Set num1 to 10
calculator.setNum2(5); // Set num1 to 5
console.log("Add : "+ calculator.add());
console.log("Subtract : "+ calculator.subtract());
console.log("Multiply : "+ calculator.multiply());
console.log("Divide : "+ calculator.divide());

// Output :
// Add : 15
// Subtract : 5
// Multiply : 50
// Divide : 2

References

Ben Alman’s blog post