Почему в JavaScript при использовании setTimeout может выводиться одно и то же значение переменной на каждой итерации?

Почему setTimeout выводит одно и то же значение?

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

Пример проблемы

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

Здесь все три колбэка выводят 3, потому что к моменту их вызова цикл уже завершился, и i равна 3.

Как это исправить?

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

Пример с let

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

Пример с замыканием

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

Вывод

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