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

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

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

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

Контент

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

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

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

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

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

## Що робить `for...of`

Цикл `for...of` використовується для **ітерації (перебору) елементів колекцій**, таких як:

- масиви (`Array`)
- рядки (`String`)
- об'єкти типу `Map`, `Set`
- інші **ітеровані об'єкти**

Він **перебирає значення** колекції (а не індекси, як `for`).

---

### Приклад з масивом

```javascript
const fruits = ['apple', 'banana', 'cherry'];

for (const fruit of fruits) {
  console.log(fruit);
}
```

**Результат:**

```javascript
apple
banana
cherry
```

Тут `fruit` на кожній ітерації - **сам елемент масиву**, а не його індекс.

---

### Приклад з рядком

```javascript
for (const char of "Hi!") {
  console.log(char);
}
```

**Результат:**

```javascript
H
i
!
```

---

## Чим відрізняється від звичайного `for`

| Порівняння | `for` | `for...of` |
|---|---|---|
| **Що перебирає** | Індекси (числа) | Значення елементів |
| **Підходить для** | масивів з індексами, коли потрібен лічильник | масивів, рядків, Set, Map, будь-яких ітерованих структур |
| **Доступ до індексу** | Є через лічильник (`i`) | Немає напряму (але можна рахувати окремо, якщо потрібно) |
| **Простота запису** | Більш "галасливий" | Більш читабельний і короткий |
| **Працює з об'єктами** | Ні (тільки з масивоподібними структурами) | Ні (потрібно використовувати `for...in` або `Object.keys`) |

---

### Приклад порівняння

#### Звичайний `for`:

```javascript
const numbers = [10, 20, 30];

for (let i = 0; i < numbers.length; i++) {
  console.log(i, numbers[i]); // i - індекс, numbers[i] - значення
}
```

#### `for...of`:

```javascript
for (const num of numbers) {
  console.log(num); // тільки значення
}
```

---

### Важливо не плутати:

- `for...of` перебирає **значення**
- `for...in` перебирає **ключі (імена властивостей)** об'єкта

Приклад різниці:

```javascript
const user = { name: 'Oleh', age: 25 };

for (const key in user) {
  console.log(key); // name, age
}

// for (const value of user) { } Помилка: об'єкт не ітерований!
```

---

### Коли використовувати

- Використовуй `for...of`, коли тобі потрібно просто пройтися по значеннях масиву, рядка, Set або Map.
- Використовуй звичайний `for`, якщо тобі потрібні **індекси**, **контроль кроку** або **умова виходу**.
- Використовуй `for...in`, якщо перебираєш **ключі об'єкта**.

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

Для рев’юера

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

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