Difference between closures and IIFE's in javascript - Stack Overflow

admin管理员组

文章数量:1320837

According to the Closures concept it will store the variables of the outer lexical environment for future execution of its inner function. For example:

function makeYounger(age) {
    function b() { 
        console.log("Original age is :" + age); 
    }
    b();
    return(function() { 
        return age / 2;
    }); 
}
var displayAge = makeYounger(20); 
console.log(displayAge());

In the above scenario, age is preserved by the Javascript engine to execute the inner function present in the return method.

Here es the IIFE:

 (function(window) { 
     var greeting = "Hello"; 
     var fNameSpace1 = { 
         name : "Appu", 
         callName : function() { 
             console.log(greeting + fNameSpace1.name);
         } 
     };
     window.doer = fNameSpace1; 
 }) (window);

 fNameSpace1.callName(); //To execute the inner function

In the above scenario according to the closures concept the variables greeting and fNameSpace1.name will be stored for future execution of the callname() function. Instead we are making use of the window object. I am confused why we are going with window if we have closures?

According to the Closures concept it will store the variables of the outer lexical environment for future execution of its inner function. For example:

function makeYounger(age) {
    function b() { 
        console.log("Original age is :" + age); 
    }
    b();
    return(function() { 
        return age / 2;
    }); 
}
var displayAge = makeYounger(20); 
console.log(displayAge());

In the above scenario, age is preserved by the Javascript engine to execute the inner function present in the return method.

Here es the IIFE:

 (function(window) { 
     var greeting = "Hello"; 
     var fNameSpace1 = { 
         name : "Appu", 
         callName : function() { 
             console.log(greeting + fNameSpace1.name);
         } 
     };
     window.doer = fNameSpace1; 
 }) (window);

 fNameSpace1.callName(); //To execute the inner function

In the above scenario according to the closures concept the variables greeting and fNameSpace1.name will be stored for future execution of the callname() function. Instead we are making use of the window object. I am confused why we are going with window if we have closures?

• javascript
• closures
• iife

Share Improve this question Follow edited Jan 22, 2020 at 0:42 Clonkex 3,63788 gold badges4141 silver badges6363 bronze badges asked Dec 19, 2016 at 18:31 CodeForHappinessCodeForHappiness 3711 silver badge33 bronze badges 3

• That fNameSpace1.callName(); at the end will fail. The global is called doer, not fNameSpace1. – T.J. Crowder Commented Dec 19, 2016 at 18:33
• It's not clear what you're asking. If the question is "what's the difference between closures and IIFEs" the answer is "an IIFE is one specific way to create a closure." If the question is "Why are we going with window if we have closures?" the answer is: Because the author wanted to have a global variable. – T.J. Crowder Commented Dec 19, 2016 at 18:34
• My question is what is the exact use of window object in this scenario if the javascript engine already stores fNameSpace1 object.Why are we creating a reference using window? – CodeForHappiness Commented Dec 19, 2016 at 18:38

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Difference between closures and IIFE's in javascript

An IIFE is just one specific way to A) Create a closure over the context in which it's defined, and B) Create a context in which to create other closures.

My question is what is the exact use of window object in this scenario if the javascript engine already stores fNameSpace1 object.Why are we creating a reference using window?

So it can be used outside the IIFE, by referring to it via the doer global that window.doer = ... creates.

There are dozens of different ways to do this. One of them does it by assigning to window like that. Another does it by returning the value and using a var statement:

var doer = (function() {
   // ...
   return fNamespace1;
})();

but again, there are dozens of different formations. The author of that particular one just preferred to write to a property on window as the way to create the global.

IIFE is useful to avoid global variable pollution when multiple functions are accessing a global variable

Closure functions are helpful when working with a local variable.

本文标签： Difference between closures and IIFE39s in javascriptStack Overflow