for...in VS for...of у масиві

JavaScriptJunior~1 хв читання

Різниця між 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 → перебирає значення (для масивів та ітерованих об'єктів)

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.