Разъясните пожалуйста как работают эти циклы?

Question

[Сергей К]

for(var i=0; i<10; i++) {
    setTimeout(function() {
        alert(i);
    }, 100);
}

получается
10 раз число 10.

for(let i=0; i<10; i++) {
    setTimeout(function() {
        alert(i);
    }, 100);
}

Получается
Числа от 0 до 9. Но кааак?

Comments

[Сергей К]

shmatuan, это понятно но как тут это сказывается?

[Роман]

Дополню. Так как цикл в обоих случаях успевает полностью прокрутиться еще до вызова функции первого таймаута то в варианте где переменная обьявлена через var в ней(переменной) уже лежит число 10. В случае где переменная обьявленна через let для каждой итерации цикла была создан собственный экземпляр переменной видимый только внутри цикла И!!! только в собственной иттерации цикла, поэтому каждый вызов таймаута запомнил собственную переменную i.

Answer 1

[shmatuan]

переменная, объявленная через var, видна везде в функции.
Переменная, объявленная через let, видна только в рамках блока

https://learn.javascript.ru/let-const

Поэтому через таймаут в 1 случае будет число в переменной на данный момент прошедшего времени, а во втором - соответствующее значение в данной итерации цикла

Answer 2

[Ihor Bratukh]

Если var, то используйте замыкание

for (var i = 0; i < 10; i++) {
    (function (index) {
        setTimeout(function () {
            alert(index);
        }, 100);
    }(i));
}

Comments

[Дмитрий Беляев]

а Вы, батенька, знаете толк в извращениях сжирании лишней памяти

for(var i = 0; i < 10; i++) {
  setTimeout(function(index) {
    alert(index);
  }, 100, i);
}