Почему замыкание на javascript ведет себя таким образом?

Question

[taki154]

В одном из скринкастов по js увидел пример, работоспособность которого не укладывается в голове:

Пока я формулировал вопрос, то уже сам дошел до ответа, но все же мне хочется понять, к правильному ли результату я пришел. :)

function foo(){ 
	var a = []; 

	for(var i=0; i<3; i++) {
		a.push(function(){console.log(i)})
	}

	return a; 

} 

var x = foo(); 

x[0](); 
x[1](); 
x[2]();

На каждую итерацию в функции foo, мы складываем в массив "a" тело анонимной функции. На момент ее вызова мы обращаемся к текущему значению переменной i, которое, после итераций цикла становится равным 3.

Возникает вопрос с вызовом функции. Получается, мы присвоили x вызов функции foo(), так, вызывая ее через x[0](), мы работаем сразу со значением массива a[0] функции foo().

Подскажите, пожалуйста, правильно ли все понял? Заранее спасибо

Comments

[Decadal]

Вам нужно услышать 'да'?)

Answer 1

[alex maslakoff]

Все правильно.

Answer 2

[gleendo]

Правильно так:

function func() {
  var arr = [];

  for (var i = 0; i < 3; i++) {
    var tmp = (function(i) {
      return function() {
        console.log(i);
      };
    })(i);

    arr.push(tmp);
  }

  return arr;
}

var arr = func();

arr[0]();
arr[1]();
arr[2]();

Еще лучше так:

let letFunc = () => {
	let arr = [];
  
  for (let i = 0; i < 3; i++) {
  	arr.push(() => console.log(i));
  }
  
  return arr;
}

let letArr = letFunc();

letArr[0]();
letArr[1]();
letArr[2]();