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

Проблема: замыкания и общая область видимости

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

Чтобы каждая функция «запомнила» значение i на момент своего создания, нужно создать новую область видимости для каждой итерации. Есть три основных способа это сделать:

Способ 1: IIFE (Immediately Invoked Function Expression) — классический

Создаём функцию, которая сразу выполняется и принимает текущее значение i как аргумент. Внутри этой функции создаётся новое замыкание с правильным значением.

for (var i = 0; i < 5; i++) {
    (function(index) {
        var btn = document.createElement('button');
        btn.textContent = 'Кнопка ' + index;
        btn.addEventListener('click', function() {
            alert('Вы нажали кнопку номер ' + index);
        });
        document.body.appendChild(btn);
    })(i);
}

Как это работает: На каждой итерации создаётся новая функция (function(index) { ... }), которая тут же вызывается с аргументом i. Параметр index получает копию значения i на этой итерации. Обработчик клика теперь замыкается на index, который не меняется в следующих итерациях.

Способ 2: Использование let (современный и предпочтительный)

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

for (let i = 0; i < 5; i++) {
    var btn = document.createElement('button');
    btn.textContent = 'Кнопка ' + i;
    btn.addEventListener('click', function() {
        alert('Вы нажали кнопку номер ' + i);
    });
    document.body.appendChild(btn);
}

Как это работает: Каждая итерация цикла получает собственную копию i. Когда обработчик клика замыкается на i, он «захватывает» именно ту копию, которая была создана на данной итерации. Это самый простой и элегантный способ в современном JavaScript.

Способ 3: Использование bind

Метод bind создаёт новую функцию с привязанным контекстом и аргументами. Можно передать текущее значение i как фиксированный аргумент.

for (var i = 0; i < 5; i++) {
    var btn = document.createElement('button');
    btn.textContent = 'Кнопка ' + i;
    btn.addEventListener('click', function(index) {
        alert('Вы нажали кнопку номер ' + index);
    }.bind(null, i));
    document.body.appendChild(btn);
}

Как это работает: .bind(null, i) создаёт новую функцию, в которой первый аргумент (index) всегда будет равен текущему значению i. Обработчик принимает этот аргумент и использует его.

Что выбрать?

• Если вы пишете современный код (ES6+) — используйте let. Это просто, читаемо и понятно.
• Если нужно поддерживать старые браузеры (IE11 и ниже) — используйте IIFE.
• bind — хороший вариант, когда нужно передать не только значение, но и изменить контекст this.

Главное — запомните: замыкания «запоминают» не значение переменной, а ссылку на неё. Чтобы каждая функция «помнила» своё значение, нужно, чтобы у каждой итерации была своя независимая переменная.

for (var i = 0; i < 5; i++) {
    var btn = document.createElement('button');
    btn.textContent = 'Кнопка ' + i;
    btn.dataset.index = i;  // Сохраняем значение в data-атрибут
    btn.addEventListener('click', function() {
        var index = this.dataset.index;  // Читаем значение при клике
        alert('Вы нажали кнопку номер ' + index);
    });
    document.body.appendChild(btn);
}