Nested functions (or inner functions) in JavaScript are a useful feature. They are functions inside another function. Learn how to create a nested function. How variable scopes, closures & lexical scopes work. Also learn to create multi-level nested function, passing parameters to them etc
(function() {
// statements
})()
To create an IIFE, first, create a function. Note that we have not given any name to the function (i.e. functional declaration syntax), not assigned it to some variable (like in function expression)
function(a,b) {
console.log(a+b)
}
Wrap it inside the bracket.
(
function(a,b) {
console.log(a+b)
}
)
Finally, we need to execute it. To do that add parentheses at the end with a value for each parameter inside the parentheses
(
function(a,b) {
console.log(a+b)
}
)(1,2);
**** Result ***
//3
Adding the parentheses will invoke the IIFE immediately.
We need to add the trailing semicolon if we use two IIFE one after another. Otherwise code won’t work.
(function () {
...
}()) // no semicolon
(function () {
...
}());
You can also give a name to IIFE.
(function addNum(a,b) {
console.log(a+b)
})(1,2);
But you cannot use that name call the function
addNum(); //Uncaught ReferenceError: addNum is not defined
IIFE was used to create new JavaScript Scope before the arrival of the let & const keyword in ES6 and the block scope
Take a look at the following code. The someVar variable is declared inside the if condition. But you can access it outside the if condition also.
function someFunc() {
cond = true;
if (cond) {
var someVar = "some Variable";
//More Statements
}
//someVar can be accessed here
console.log(someVar); "some Variable";
}
someFunc();
Now moving the if condition inside an IIFE creates a new function scope. We now cannot access the variables declared inside the IIFE. Accessing the someVar results in an error.
function someFunc() {
cond = true;
( function () {
if (cond) {
var someVar = "some Variable";
//More Statements
}
})();
//Uncaught ReferenceError: someVar is not defined
console.log(someVar);
}
someFunc();
But since the ES6, we can use the let (or const) instead of var.
function someFunc() {
cond = true;
if (cond) {
let someVar = "some Variable";
//More Statements
}
console.log(someVar);
//Uncaught ReferenceError: someVar is not defined
}
someFunc();
Similarly, the following code creates a block scope around curly braces Hence the variable i is invisible outside the curly braces. Without the let statement only way to achieve this is using the IIFE.
{
let i=10;
//Some Statements
}
console.log(i); //Uncaught ReferenceError: i is not defined
