Как работает setTimeout в цикле?

Question

[Дмитрий Качуринец]

Вроде бы до этого момента думал, что понимаю как работает js, но вот наткнулся на такое.

let array = [34, 3, 2, 1]

for (var i = 0; i < array.length; i++) { 
  setTimeout(function () { 
    console.log(i + ' key  ' + array[i]); 
  }, 3000); 
}

Такой код не работает, а если исправить вместо var на let, то все будет работать.
Объясните доступно почему это так работает?

Answer 1

[Александр]

Если коротко, то setTimeout срабатывает уже после того как цикл закончился. Даже если вы укажете setTimeout (func, 0 ) всё равно выполнится только после цикла, независимо от времени работы цикла.
К этому моменту i будет равно 4 т.к. используя var переменная будет объявлена только 1 раз. Тоже самое что :

var i;
for (i = 0; i < array.length; i++)

Используя let для каждой итерации будет создаваться отдельная переменная с разным значением.

Comments

[Дмитрий Качуринец]

Получается все просто, let не всплывают на вверх

Answer 2

[Алексей]

https://habr.com/company/ruvds/blog/420359/

Answer 3

[Ihor Bratukh]

Замыкание

var array = [34, 3, 2, 1]

for (var i = 0; i < array.length; i++) {
    (function (index) {
        setTimeout(function () {
            console.log(index + ' key  ' + array[index]);
        }, 3000);
    }(i));
}

Answer 4

[Павло Пономаренко]

Прочитайте, для начала, это. Особенно раздел "Функции". https://bonsaiden.github.io/JavaScript-Garden/ru/