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

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

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

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

Контент

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

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

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

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

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

## `for...in`: перебирає **ключі (імена властивостей)** об'єкта або індекси масиву

Цей цикл проходить **по перелічуваних властивостях** об'єкта (або індексах масиву, якщо це масив).

### Приклад з об'єктом:

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

for (const key in user) {
  console.log(key, user[key]);
}
```

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

```javascript
name Oleh
age 25
city Kyiv
```

Тут `key` - це рядок (`"name"`, `"age"`, `"city"`): **ім'я властивості**.

---

### З масивами: `for...in` дає **індекси**, а не значення:

```javascript
const arr = ['a', 'b', 'c'];

for (const i in arr) {
  console.log(i); // 0, 1, 2
  console.log(arr[i]); // 'a', 'b', 'c'
}
```

Але `for...in` **не рекомендується** використовувати для масивів,
оскільки може захоплювати **додаткові властивості** масиву, якщо вони додані вручну.

---

## `for...of`: перебирає **значення** ітерованих структур

Працює з **ітерованими об'єктами**:
`Array`, `String`, `Map`, `Set`, `NodeList`, `arguments` тощо.

### Приклад:

```javascript
const arr = ['a', 'b', 'c'];

for (const value of arr) {
  console.log(value);
}
```

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

```javascript
a
b
c
```

Тут `value` - **значення**, а не індекс.

---

## Порівняння `for...in` і `for...of`

| Характеристика | `for...in` | `for...of` |
|---|---|---|
| **Що перебирає** | Ключі (імена властивостей або індекси) | Значення |
| **Працює з об'єктами (**`{}`**)** | Так | Ні (помилка) |
| **Працює з масивами (**`[]`**)** | Так, але не рекомендується | Так |
| **Працює з рядками (**`"abc"`**)** | Так (індекси) | Так (символи) |
| **Працює з Map, Set** | Ні | Так |
| **Значення, що повертається** | Ключ (рядок) | Сам елемент |
| **Тип даних, що використовуються** | Перелічувані властивості | Ітеровані значення |

---

### Приклади відмінностей

#### Об'єкт:

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

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

// for (const value of user) Помилка
```

#### Масив:

```javascript
const arr = ['a', 'b', 'c'];

// for...in -> індекси
for (const i in arr) {
  console.log(i); // 0, 1, 2
}

// for...of -> значення
for (const val of arr) {
  console.log(val); // a, b, c
}
```

#### Рядок:

```javascript
for (const i in "Hi") {
  console.log(i); // 0, 1
}

for (const ch of "Hi") {
  console.log(ch); // H, i
}
```

---

## Коротко запам'ятати:

> `for...in`: перебирає **ключі**
> `for...of`: перебирає **значення**

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

Для рев’юера

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

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