Как передать текущее значение переменной в асинхронный колбэк?

Проблема захвата переменной в цикле

В JavaScript классическая задача возникает при использовании var в цикле for вместе с асинхронными колбэками, например, setTimeout. Поскольку var имеет функциональную, а не блочную область видимости, все колбэки ссылаются на одну и ту же переменную, которая после завершения цикла равна последнему значению.

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

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

Решение с let

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

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

Решение с замыканием (IIFE)

Если нужно поддерживать старые браузеры или использовать var, можно обернуть колбэк в немедленно вызываемую функцию, передавая текущее значение как аргумент.

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

Вывод

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