Из-за чего элементы массива возвращают 3?

Question

[Dudder]

Задача состоит в том чтобы использовать механизм замыкания и выводились числа 0 и 2.

var arr = [];

for (var i = 0; i <= 2; i++) {
   arr[i] = function () {
      console.log(i);
   };
}

arr[0](); // 0
arr[arr.length - 1](); // 2

Answer 1

[Сергей Соколов]

Объявленная через устаревший var переменная i всплывает наверх, видна отовсюду и поёт похабные частушки сохраняет видимое для всех созданных функций единое значение 3 по окончании цикла. Это не то, что задумано.

Использование спортивных, современных const и let чудесным образом исправляет досадное недоразумение:

const arr = []; // ведь сам массив не планируется заменять

for (let i = 0; i <= 2; i++) { // главное: i теперь видна только внутри цикла
   arr[i] = function () {
      console.log(i);
   };
}

arr[0](); // 0
arr[arr.length - 1](); // 2

в исходном коде только лишь заменили var на const (не так важно) и let (вот это изменило всё!).

Можно использовать и стрелочную функцию:

const arr = [];
for (let i = 0; i <= 2; i++) {
   arr[i] = () => console.log(i);
}

Answer 2

[Yagher]

for (var i = 0; i <= 2; i++) {
	 let j = i;
   arr[j] = function() {
      console.log(j);
   };
}

Comments

[Yagher]

Или так:

for (var i = 0; i <= 2; i++) {
  arr[i] = (j => function() {
    console.log(j);
  })(i);
}