Что использовать for ... of или for ... in

Разница между циклами for ... of и for ... in в JavaScript. И ответ на вопрос, что и когда лучше использовать.

Цикл for...of

The MDN Definition:

Оператор for...of выполняет цикл обхода итерируемых объектов (включая Array, Map, Set, объект аргументов и подобных), вызывая на каждом шаге итерации операторы для каждого значения из различных свойств объекта

for ... of цикл работает только с повторяемыми объектами. В JavaScript итерируемые объекты - это объекты, которые можно перебирать.

String, Array, TypedArray, Map и Set - все это встроенные итерируемые объекты, поскольку каждый из их объектов-прототипов реализует метод @@iterator. Итак, цикл for ... of работает с указанными типами объектов.

Например:

cosnt str = "Hello World";

for(element of str) {
  console.log(element);
}
// H e l l o " " W o r l d

for...in Loop

The MDN Definition:

Цикл for...in проходит через перечисляемые свойства объекта. Он пройдёт по каждому отдельному элементу.

for ... in работает с теми свойствами, у которых enumerable flag установлен в true:

• Перечислимый флаг для свойств, созданных с помощью простого присваивания или инициализатора свойств, по умолчанию равен true.
• Перечислимый флаг для свойств, созданных с помощью Object.defineProperty, по умолчанию равен false.
• Также работает со строками и массивами, поскольку перечислимый флаг для свойств строки и массива также по умолчанию имеет значение true.

Например:

const student = {
    name: "Ivan",
    age: 35,
}

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

// result:
// name: "ivan", age: 33

Что использовать for...of или for...in

В заключение, что же использовать:

• for...of - Используется для перебора строк и массивов.
• for...in - Используйте для перебора объектов.

От себя добавлю, что for...of поставляется с ES2015 и в настоящее время является лучшей практикой (по моему опыту) потому что:

• Более читаемый,
• Без обратных вызовов,
• Быстрее (если верить тестам),
• Вы также можете использовать .entries() и деструктурирование.

Если есть, что добавить - пишите в комментариях!