Цикл for in

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

`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: перебирає значення

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

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

Premium

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