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

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

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

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

Контент

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

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

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

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

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

## Що таке ітератор

**Ітератор (iterator)** - це об'єкт, який **по черзі повертає елементи** якоїсь послідовності при кожному виклику методу `.next()`.

Формальне визначення:

> Ітератор - це об'єкт, що реалізує метод `next()`, який повертає об'єкт вигляду `{ value: any, done: boolean }`

---

## Як виглядає ітератор вручну

```javascript
function createIterator(arr) {
  let i = 0;

return {
    next() {
      if (i < arr.length) {
        return { value: arr[i++], done: false };
      } else {
        return { value: undefined, done: true };
      }
    }
  };
}

const iterator = createIterator(['a', 'b', 'c']);

console.log(iterator.next()); // { value: 'a', done: false }
console.log(iterator.next()); // { value: 'b', done: false }
console.log(iterator.next()); // { value: 'c', done: false }
console.log(iterator.next()); // { value: undefined, done: true }
```

Коли `done: true`, ітерація завершується.

---

## Що робить ітератор усередині for...of

Коли ти пишеш:

```javascript
for (const item of ['a', 'b', 'c']) {
  console.log(item);
}
```

Під капотом JavaScript робить приблизно таке:

```javascript
const iterable = ['a', 'b', 'c'];
const iterator = iterable[Symbol.iterator](); // створює ітератор

while (true) {
  const { value, done } = iterator.next();
  if (done) break;
  console.log(value);
}
```

---

## Що таке ітерований об'єкт (iterable)

Об'єкт є **ітерованим**, якщо в нього є метод:

```javascript
obj[Symbol.iterator]()
```

який повертає **ітератор**.

Приклади вбудованих ітерованих структур:

- `Array`
- `String`
- `Map`
- `Set`
- `arguments`
- `NodeList` (у браузері)
- `TypedArray`

---

## Приклад: власний ітерований об'єкт

```javascript
const range = {
  from: 1,
  to: 4,

[Symbol.iterator]() {
    let current = this.from;
    let last = this.to;

return {
      next() {
        if (current <= last) {
          return { value: current++, done: false };
        } else {
          return { done: true };
        }
      }
    };
  }
};

for (const num of range) {
  console.log(num); // 1, 2, 3, 4
}
```

Коли JS зустрічає `for...of`, він викликає `range[Symbol.iterator]()` і використовує повернений ітератор.

---

## Приклад: рядок - теж ітерований

```javascript
const str = "Hi";

const iterator = str[Symbol.iterator]();

console.log(iterator.next()); // { value: 'H', done: false }
console.log(iterator.next()); // { value: 'i', done: false }
console.log(iterator.next()); // { value: undefined, done: true }
```

---

## Ітератори + Spread / Destructuring / Array.from

Усі ці конструкції **всередині використовують ітератор**:

```javascript
const set = new Set([1, 2, 3]);

console.log([...set]);          // [1, 2, 3]
console.log(Array.from(set));   // [1, 2, 3]

const [a, b] = set;
console.log(a, b);              // 1 2
```

---

## Що робить Symbol.iterator

`Symbol.iterator` - це **спеціальний символ**, що визначає "ітерованість" об'єкта. JS викликає цей метод автоматично, коли потрібно перебрати об'єкт (`for...of`, spread тощо).

---

## Генератори = автоматичні ітератори

Генератор (`function*`) - це **функція, яка сама створює ітератор**.

```javascript
function* numbers() {
  yield 1;
  yield 2;
  yield 3;
}

const iterator = numbers();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }
```

А також:

```javascript
for (const n of numbers()) {
  console.log(n); // 1, 2, 3
}
```

Генератори зручні, бо тобі не потрібно вручну писати `return { value, done }`.

---

## Ітерованість у сучасних структурах

| Структура | Ітерована? | Повертає |
|---|---|---|
| `Array` | Так | значення |
| `String` | Так | символи |
| `Map` | Так | пари `[key, value]` |
| `Set` | Так | значення |
| `Object` | Ні | - (можна зробити вручну через `Symbol.iterator`) |
| `arguments` | Так | значення аргументів |

---

## Підсумок

| Термін | Опис |
|---|---|
| **Ітератор** | Об'єкт з методом `next()`, що повертає `{ value, done }` |
| **Ітерований об'єкт** | Об'єкт, у якого є метод `[Symbol.iterator]()` |
| `Symbol.iterator` | Символ, що вказує на метод, який створює ітератор |
| **Використовується в** | `for...of`, `spread`, `Array.from`, деструктуризація |
| **Генератор (**`function*`**)** | Спрощений спосіб створити ітератор |

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

Для рев’юера

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

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