Почему цикл обрабатывается не верно?

Question

[John Johnson]

Ребят подскажите логику работы в данном цикле

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

Код выводит 9 раз цифру 10.

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

Comments

[Владимир]

Это вопрос на понимание скоупа, всплытия переменных и ивент лупа.
Вам скорее всего объяснят как исправить эту ошибку, но не поленитесь и почитайте про эти три вещи.
На собеседовании мы обычно задаем два вопроса.
1) Что выведет этот код?
2) Как сделать чтобы он вывел то что нужно?

Answer 1

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

var i; // var в отличие от let и const «всплывает» наверх
       // поэтому можно записать и так.
       // Это важно, т.к. изменить i могут где-то ниже в коде.

for(i=0; i<10; i++) { 
  setTimeout(function() { // на каждой итерации создаётся новая функция,
                          // которая сохраняет ссылку на переменную  i 
    alert(i);             // чтобы когда, наконец, сработает, 
                          // вывести что там в i окажется в тот момент
  }, 100); // выполнение откладывается на потом через 1/10 сек
}

Цикл доиграл, создал-отложил 10 функций-анонимусов, каждая пристально смотрит на переменную i.
К этому времени i, спасибо циклу, уже выросла до значения 10.

Через 0.1 секунды посыпятся выполняться те 10 функций,
и каждая выведет текущее значение i на этот момент.

Занимательный факт.
Если после цикла дописать i = 2*2*5*0x65 ; то алёрты выведут наступающий год!