Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Помилка з var у замиканнях і циклі». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

Класика: у циклі з `var` усі колбеки "бачать" **одну й ту саму змінну** `i` (у `var` функціональна область видимості). Коли колбеки виконуються, `i` вже дорівнює кінцевому значенню циклу.

### Проблема

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

### Надійні способи виправити

1. **Використати** `let` **/** `const` **(ES6+)** - у циклу з'являється **нове лексичне зв'язування на кожну ітерацію**.

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

2. **IIFE (самовиклична функція)** - "заморожуємо" поточне значення `i`.

```javascript
for (var i = 0; i < 3; i++) {
  (function(iCopy) {
    setTimeout(() => console.log(iCopy), 0);
  })(i);
}
```

3. **Передача аргументів колбеку через обгортку/фабрику**

```javascript
function makeLogger(x) {
  return () => console.log(x);
}
for (var i = 0; i < 3; i++) {
  setTimeout(makeLogger(i), 0);
}
```

4. **Методи масиву** (`forEach`, `map`) - параметр колбеку вже "пов'язаний" зі значенням.

```javascript
[0,1,2].forEach(i => setTimeout(() => console.log(i), 0));
```

5. **Передача аргументу в** `setTimeout` (підтримується в браузерах/Node):

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

### Короткий чек-лист

- Типово **використовуй** `let`**/**`const` **у циклах** - це найпростіший і найбезпечніший шлях.
- Якщо з якихось причин потрібен `var`, **зафіксуй значення через IIFE/фабрику/передачу аргументу**.
- Пам'ятай: замикання **захоплюють змінну, а не її миттєве значення** - у `var` вона одна на весь цикл.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати241 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.