Как сохранить корректное значение счётчика в setTimeout внутри цикла?

Классическая ловушка JavaScript: если объявить счётчик через var и запустить setTimeout внутри цикла, все колбэки выведут одно и то же финальное значение. Причина — var имеет функциональную область видимости, а колбэк выполняется позже, когда цикл уже завершён.

Почему так происходит

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

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0); // 3, 3, 3
}

Способы решения

• let — создаёт новую привязку на каждой итерации, колбэк замыкается на свою копию.
• IIFE — оборачиваем вызов в функцию, передавая текущее значение как аргумент.
• Дополнительный аргумент setTimeout — третий параметр передаётся в колбэк.

// 1. let
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0); // 0, 1, 2
}

// 2. IIFE
for (var j = 0; j < 3; j++) {
  (function (k) {
    setTimeout(() => console.log(k), 0);
  })(j);
}

// 3. Аргумент setTimeout
for (var n = 0; n < 3; n++) {
  setTimeout((x) => console.log(x), 0, n);
}

Где применяется

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

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