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

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

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

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

Контент

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

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

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

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

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

Різниця між `for...in` і `for...of` у JavaScript - одна з тих речей, які потрібно **чітко розуміти**, особливо під час роботи з масивами.

---

## Стисло:

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

---

## Приклад 1 - масив

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

### `for...in` - перебирає *індекси* (ключі):

```javascript
for (const index in arr) {
  console.log(index); // "0", "1", "2"
}
```

- Повертає **рядкові індекси** (не числа!).
- Підходить для **об'єктів**, а не масивів.
- Може захопити **додаткові властивості**, якщо їх додати вручну.

---

### `for...of` - перебирає *значення*:

```javascript
for (const value of arr) {
  console.log(value); // "a", "b", "c"
}
```

- Працює з **ітерованими об'єктами** (Array, String, Set, Map...).
- Повертає **значення елементів**.
- Ідеальний для масивів.

---

## Приклад 2 - відмінність на практиці:

```javascript
const arr = ["x", "y", "z"];
arr.custom = "hello"; // додамо властивість вручну

for (const key in arr) {
  console.log(key); // "0", "1", "2", "custom"
}

for (const value of arr) {
  console.log(value); // "x", "y", "z"
}
```

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

---

## Приклад 3 - робота з рядком (ітерований об'єкт)

```javascript
for (const char of "JS") {
  console.log(char); // "J", "S"
}
```

`for...of` чудово працює з рядками.
`for...in` для рядка поверне індекси `"0"`, `"1"`.

---

## Коротко:

| Особливість | `for...in` | `for...of` |
|---|---|---|
| Перебирає | ключі (індекси, властивості) | значення |
| Працює з | об'єктами, масивами | ітерованими об'єктами (масив, рядок, Set, Map) |
| Повертає | рядки - імена властивостей | реальні значення |
| Порядок | може бути непередбачуваним | зберігає порядок |
| Підходить для масивів | Ні | Так |
| Підходить для об'єктів | Так | Ні |

---

## Запам'ятай просто:

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

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

Для рев’юера

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

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