Как замыкание влияет на значения, захваченные внутри setTimeout?

Как замыкание работает с setTimeout

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

Пример с var

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

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

Решение с let

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

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

Альтернативное решение с IIFE

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

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

Вывод

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