Чем отличаются циклы for...in и for...of в JavaScript

for...in
Цикл for...in используется для перебора свойств объекта (ключей), а также всех индексов массива, если он используется с массивом. Это важно: for...in перебирает ключи (индексы массива), а не значения.

Пример с объектом:

const car = {
  make: 'Toyota',
  model: 'Corolla',
  year: 2020
};

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

// make Toyota
// model Corolla
// year 2020

Пример с массивом:

const fruits = ['apple', 'banana', 'cherry'];

for (const index in fruits) {
  console.log(index, fruits[index]);
}

// 0 apple
// 1 banana
// 2 cherry

for...of
Цикл for...of используется для перебора значений итерируемых объектов, таких как массивы, строки, Map, Set и т.д. Он перебирает значения.

Пример с массивом:

const fruits = ['apple', 'banana', 'cherry'];

for (const fruit of fruits) {
  console.log(fruit);
}
// apple
// banana
// cherry

Пример со строкой:

const name = 'Alice';

for (const char of name) {
  console.log(char);
}
// A
// l
// i
// c
// e

❓ Как запомнить
for...in – для индексов и свойств объекта.
for...of – для объектов итерируемых, значений.

Используйте for...in для обхода ключей объектов или индексов массива. Используйте for...of для обхода значений массивов, строк или других итерируемых объектов.

#frontend #javascript