Return to Answer

After reading through various solutions, I'd like to add that the reason those solutions work is to rely on the concept of scope chain. It's the way JavaScript resolve a variable during execution.

• Each function definition forms a scope consisting of all the local variables declared by var and its arguments.
• If we have inner function defined inside another (outer) function, this forms a chain, and will be used during execution
• When a function gets executed, the runtime evaluates variables by searching the scope chain. If a variable can be found in a certain point of the chain it will stop searching and use it, otherwise it continues until the global scope reached which belongs to window.

In the initial code:

funcs = {};
for (var i = 0; i < 3; i++) { 
 funcs[i] = function inner() { // function inner's scope contains nothing
 console.log("My value: " + i); 
 };
}
console.log(window.i) // test value 'i', print 3

When funcs gets executed, the scope chain will be function inner -> global. Since the variable i cannot be found in function inner (neither declared using var nor passed as arguments), it continues to search, until the value of i is eventually found in the global scope which is window.i.

By wrapping it in an outer function either explicitly define a helper function like harto did or use an anonymous function like Bjorn did:

funcs = {};
function outer(i) { // function outer's scope contains 'i'
 return function inner() { // function inner, closure created
 console.log("My value: " + i);
 };
}
for (var i = 0; i < 3; i++) {
 funcs[i] = outer(i);
}
console.log(window.i) // print 3 still

When funcs gets executed, now the scope chain will be function inner -> function outer. This time i can be found in the outer function's scope which is executed 3 times in the for loop, each time has value i bound correctly. It won't use the value of window.i when inner executed.

More detail can be found [here][1]
[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

It includes the common mistake in creating closure in the loop as what we have here, as well as why we need closure and the performance consideration.

After reading through various solutions, I'd like to add that the reason those solutions work is to rely on the concept of scope chain. It's the way JavaScript resolve a variable during execution.

• Each function definition forms a scope consisting of all the local variables declared by var and its arguments.
• If we have inner function defined inside another (outer) function, this forms a chain, and will be used during execution
• When a function gets executed, the runtime evaluates variables by searching the scope chain. If a variable can be found in a certain point of the chain it will stop searching and use it, otherwise it continues until the global scope reached which belongs to window.

In the initial code:

funcs = {};
for (var i = 0; i < 3; i++) { 
 funcs[i] = function inner() { // function inner's scope contains nothing
 console.log("My value: " + i); 
 };
}
console.log(window.i) // test value 'i', print 3

When funcs gets executed, the scope chain will be function inner -> global. Since the variable i cannot be found in function inner (neither declared using var nor passed as arguments), it continues to search, until the value of i is eventually found in the global scope which is window.i.

By wrapping it in an outer function either explicitly define a helper function like harto did or use an anonymous function like Bjorn did:

funcs = {};
function outer(i) { // function outer's scope contains 'i'
 return function inner() { // function inner, closure created
 console.log("My value: " + i);
 };
}
for (var i = 0; i < 3; i++) {
 funcs[i] = outer(i);
}
console.log(window.i) // print 3 still

When funcs gets executed, now the scope chain will be function inner -> function outer. This time i can be found in the outer function's scope which is executed 3 times in the for loop, each time has value i bound correctly. It won't use the value of window.i when inner executed.

More detail can be found [here][1]
[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

It includes the common mistake in creating closure in the loop as what we have here, as well as why we need closure and the performance consideration.

・Each function definition forms a scope consisting of all the local variables declared by var and its arguments.
・If we have inner function defined inside another (outer) function, this forms a chain, and will be used during execution
・When a function gets executed, the runtime evaluates variables by searching the scope chain. If a variable can be found in a certain point of the chain it will stop searching and use it, otherwise it continues until the global scope reached which belongs to window.

More detail can be found here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures.

• Each function definition forms a scope consisting of all the local variables declared by var and its arguments.
• If we have inner function defined inside another (outer) function, this forms a chain, and will be used during execution
• When a function gets executed, the runtime evaluates variables by searching the scope chain. If a variable can be found in a certain point of the chain it will stop searching and use it, otherwise it continues until the global scope reached which belongs to window.

More detail can be found [here][1]
[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

After reading through various solutions, I'd like to add that the reason those solutions work is to rely on the concept of scope chain. In short, each function definition forms a scope mainly consisting of all the local variables declared by var and its arguments. If we have inner function defined inside another function, this forms a chain. When a function gets executed, it evaluates variables by searching the scope chain. If a variable can be found in a certain point of the chain it will stop searching and use it, otherwise it continues until the global scope reached which belongs to window.

NOTE: Though we rarely write this code sample in real, but I think it serves good example to understand the fundamental. Once we have the scope in mind and how they chained together, it's more clear to see why other modern ways like Array.prototype.forEach(function callback(el) {}) naturally works. (the callback that's passed in naturally forms the wrapping scope with el correctly bound in each iteration of forEach. So everything defined in callback will be able to use the right el value)

OK, let's back to the initial code:

After reading through various solutions, I'd like to add that the reason those solutions work is to rely on the concept of scope chain. It's the way JavaScript resolve a variable during execution.

・Each function definition forms a scope consisting of all the local variables declared by var and its arguments.
・If we have inner function defined inside another (outer) function, this forms a chain, and will be used during execution
・When a function gets executed, the runtime evaluates variables by searching the scope chain. If a variable can be found in a certain point of the chain it will stop searching and use it, otherwise it continues until the global scope reached which belongs to window.

In the initial code: