Цикл for of

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

Що робить `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, якщо перебираєш ключі об'єкта.

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

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

Premium

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