对函数关闭感到困惑

Question

Can someone please explain why does it console log out 10, 10, 10 instead of 9, 9, 9? When it goes through for loop shouldn't it stop at 9?

var foo = [];
for (var i = 0; i < 10; i++) {
  foo[i] = function() {
    return i;
  };
};

console.log(foo[0]());
console.log(foo[1]());
console.log(foo[2]());

Answer 1

Whenever any function which is using any variable from parent scope is executed, it gets that value of a variable which it is holding at the time of function execution. In your case i is already reached to 10 at the time of execution because of i++ .

For getting expected result, you can add IIFE to it, which will hold the value of i in its scope.

 var foo = []; for (var i = 0; i < 10; i++) { foo[i] = (function(i) { return function() { return i; }; })(i); }; console.log(foo[0]()); console.log(foo[1]()); console.log(foo[2]()); 

Answer 2

You can use this syntax which keeps the context

for (let i = 0; i < 10; i++) {
  foo[i] = () =>  i;
};

console.log(foo[0]());
console.log(foo[1]());
console.log(foo[2]());

https://jsfiddle.net/bandpay/8zat3bnn/