Javascript - Function expressions, statements and Immediately Invoked Function Expressions
In this article I want to discuss a design pattern that is widely used in every serious library. When used variable hoisting within blocks will be avoided and scope protection can be considered as another benefit. It is called Immediately Invoked Function Expression aka IIFE.
To understand IIFE, function statements and function expressions should be explained.
The basic parts of this article are the following
- Function Statements and Function Expressions
- Function Statements vs Function Expressions
- Immediately Invoked Function Expression (IIFE)
- Benefits of IIFE
Function Statements and Function Expressions
I assume you are familiar with function statements
function double(x){
console.log(2*x);
}double(2); // invoke the function
Also I assume that you are familiar with function expressions
var doubleFunction = function(x){
console.log(2*x);
}doubleFunction(2); // invoke the function
Function Statements vs Function Expressions
One important difference is at the point where the machine creates the function object. In the case of statements the function object is created before any statement is executed but after a statement body is invoked, while in the case of expressions the function object is created when the statement it is in gets executed.
Because of hoisting, when a function expression is called before it is declared it will result to an error. On the contrary a function statement can be called before or after that function is declared.
There are some benefits of function expressions over statements, for example they are anonymous functions, they can be used as closures, as arguments to other functions and as IIFEs.
Put simply a statement in the execution phase it does not return anything, an expression results to a value, an object is created.
Immediately Invoked Function Expression (IIFE)
Let’s see and example of an IIFE
// two ways of writing an IIFE(function(X){
console.log(2*X);
}(2)); // the parenthesis is inside// the same with(function(X){
console.log(2*X);
})(2); // the parenthesis is outside
As you can see an IIFE is written as a normal function inside parentheses with an input parameter at the end. It is an anonymous function that is created on the fly, in other words a no-name function that can be called immediately when the line of code is read.
But why inside parentheses? Parenthesis is an operator, a grouping operator. You never put a statement inside parentheses.
3 + 4 // this is an expression(3+4) // this is the same expression
Every expression inside an IIFE is scoped locally to the function expression itself, as a result the scope is protected from the environment in which it is placed.
Benefits of IIFE
- Scope Protection
- No conflict with jQuery, you can freely use $ without worrying about other library conficts, since the jQuery object is passed and scoped to $ as a local parameter
- Organize modules of code, with related methods and properties
- Does not pollute the global namespace
- Creation — Execution — Discarding of a function in one statement
https://en.wikipedia.org/wiki/Immediately-invoked_function_expression
