Digging Concept of 'Closure' in Js

A closure is created when a function keeps a link to its parent's scope even after the parent has returned.

function f(arg) {
var n = function(){
return arg;
};
arg++;
return n;
}

We can use the function like this in firefox consol:
>>> var m = f(123);
>>> m();
124

Another shot:

function f() {
var a = [];
var i;
for(i = 0; i < 3; i++) {
a[i] = function(){
return i;
}
}
return a;
}

Let's run the function, assigning the result to the array a.
>>> var a = f();
>>> a[0]()
3
>>> a[1]()
3
>>> a[2]()
3

So how do we implement the correct behavior? we need three different variables. An elegant solution is to use another closure:

function f() {
var a = [];
var i;
for(i = 0; i < 3; i++) {
a[i] = (function(x){
return function(){
return x;
}
})(i);
}
return a;
}

This gives the expected result:
>>> var a = f();
>>> a[0]();
0
>>> a[1]();
1
>>> a[2]();
2

Alternative Approach:

Alternatively, we can use a "normal" (as opposed to self-invoking) inner function to achieve the same result. The key is to use the middle function to "localize" the value of i at every iteration.

function f() {
function makeClosure(x) {
return function(){
return x;
}
}
var a = [];
var i;
for(i = 0; i < 3; i++) {
a[i] = makeClosure(i);
}
return a;
}

Another shot:

var getValue, setValue;
(function() {
var secret = 0;
getValue = function(){
return secret;
};
setValue = function(v){
secret = v;
};
})()

In this case, the function that contains everything is a self-invoking anonymous function. It defines setValue() and getValue() as global functions, while the secret variable remains local and inaccessible directly.
>>> getValue()
0
>>> setValue(123)
>>> getValue()
123