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
