Почему возникает проблема с использованием переменной цикла внутри функций?

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

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

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

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

Здесь все три функции выполняются после завершения цикла, когда i уже равно 3.

Решение с let

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

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

Решение с замыканием

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

Немедленно вызываемая функция создает новую область видимости, копируя текущее значение i в параметр j.

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