Как работают циклы с таймаутом?

Question

[DMITRY Chernenkiy]

Заинтересовала задачка которую получил на собеседовании
есть первый цикл

let i = 0;
       for (i = 0; i < 5; i++) {
        setTimeout(() =>  console.log(i), 1000);
      }

выводит на экран 5 5 5 5 5
И другой цикл

for (let i = 0; i < 5; i++) {
        setTimeout(() =>  console.log(i), 1000);
      }

выводит 0 1 2 3 4
Можете объяснить, почему срабатывает по разному?

Comments

[Strannyk]

Во втором примере первое объявление let бессмысленное.
А так, почитайте про скоуп, создаваемые let и const - и все станет очевидным.

Answer 1

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

Первое что нужно понять, таймер работает асинхронно, а значит будет выполнен после цикла.
Второе - let имеет блочную область видимости (переменная видна в том блоке, где была объявлена, при этом первый операнд for считается тем же блоком, что и тело цикла)
Третье - циклы создают новый скоуп на каждую итерацию (на каждой итерации будет свой let i, при условии что этот оператор внутри цикла)

Ну и еще, в Ваших примерах 1000 относится не к таймауту, это просто бесполезная операция, а таймаут получит значение по умолчанию - 0, думаю это не совсем то, что Вы ожидаете.

Еще один важный момент, функциональное выражение (а стрелочная функция - это тоже функциональное выражение) внутри цикла будет создавать по функции на каждой итерации цикла. Это очень плохо и по памяти и по производительности (такие функции еще и компилироваться и оптимизироваться будут раздельно). И если в случае с let внутри цикла функции хотя бы будут отличаться замыканием (каждая замкнет свою i), то в первом случае будет 5 абсолютно идентичных функций.
Тут можно очень хорошо показать себя, если помимо объяснения принципов работы вспомнить, что setTimeout умеет передавать аргументы в свой колбэк:

const f = i => {
  console.log(i);
};
for (let i = 0; i < 5; i++) {
  setTimeout(f, 1000, i);
}

Answer 2

[Олег]

в первом случае у тебя одна глобальная переменная i.
повещенные 5 таймеров сработают через секунду и все выведут ее текущее значение.

во втором случае переменных i две. параметр цикла и глобальная.
но тут еще лямбда замыкание.
Я редко пишу на явоскрипт. В других языках проблему решают по разному.
например специальный модификатор final . А гдето как в вашем случае
создается неявная копия переменной, которая уже используется в отложенном событии

Comments

[Strannyk]

5 таймеров сработают через секунду

Принципиально, что они отработают после завершения цикла.

во втором случае переменных i две. параметр цикла и глобальная.
но тут еще лямбда замыкание.

Строго говоря, в обоих примерах замыкание.

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

Я редко пишу на явоскрипт

Олег, тогда зачем писать ответ ради ответа? Чтоб ввести людей в заблуждение?
Ценность такого ответа не просто нулевая, она отрицательная, ибо он вреден!

в первом случае у тебя одна глобальная переменная i.

здесь нет глобальных переменных

повещенные 5 таймеров сработают через секунду

ну во-первых, автор с аргументами накосячил, так что ни о какой секунде речи не идет, а во-вторых таймер заданный на 1 секунду никогда не сработает ровно через секунду, ибо через секунду он будет только запланирован на выполнение.

например специальный модификатор final

в js есть const, который работает 1 в 1 как final в java, но это абсолютно не решает данную проблему, ибо i должна меняться по ходу выполнения.