Объясните поведение кода с setTimeout внутри цикла — в каком порядке выведутся значения и почему?

Проблема с var в цикле

Когда вы используете var в цикле for, переменная i имеет функциональную область видимости, а не блочную. Это означает, что все итерации цикла используют одну и ту же переменную i. Функции, переданные в setTimeout, создают замыкание на эту переменную, но выполняются они только после завершения цикла. К этому моменту i уже равна конечному значению (например, 5 после цикла от 0 до 4).

for (var i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 0);
}
// Вывод: 5, 5, 5, 5, 5

Решение с let

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

for (let i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 0);
}
// Вывод: 0, 1, 2, 3, 4

Альтернативное решение с замыканием

Если вы не можете использовать let, можно создать новую область видимости с помощью немедленно вызываемой функции (IIFE), передавая текущее значение i как аргумент.

for (var i = 0; i < 5; i++) {
  (function(j) {
    setTimeout(() => console.log(j), 0);
  })(i);
}
// Вывод: 0, 1, 2, 3, 4

Этот пример демонстрирует, как работает асинхронность в JavaScript и как область видимости влияет на замыкания. Понимание этого механизма критично для избежания багов в коде, работающем с таймерами, обработчиками событий или асинхронными запросами.

Вывод: Используйте let или IIFE для корректной работы с асинхронными колбэками в циклах, чтобы каждый колбэк имел доступ к правильному значению переменной на момент его создания.