Как правильно перебрать (итерировать) свойства объекта в JavaScript?

Основные способы перебора свойств объекта

В JavaScript объекты не являются итерируемыми по умолчанию (как массивы), поэтому стандартные циклы for с индексом и метод forEach не работают. Однако есть несколько проверенных способов перебрать свойства объекта.

1. Цикл for...in (самый простой)

Этот цикл перебирает все перечисляемые (enumerable) свойства объекта, включая унаследованные через прототип. Чтобы избежать проблем с прототипом, используйте метод hasOwnProperty:

const user = {
  name: 'Анна',
  age: 25,
  city: 'Москва',
  isAdmin: false
};

for (let key in user) {
  if (user.hasOwnProperty(key)) { // проверяем, что свойство собственное
    console.log(`${key}: ${user[key]}`);
  }
}
// Вывод:
// name: Анна
// age: 25
// city: Москва
// isAdmin: false

2. Object.keys() + forEach (рекомендуемый способ)

Метод Object.keys() возвращает массив собственных перечисляемых свойств объекта. Затем вы можете использовать forEach для перебора этого массива:

Object.keys(user).forEach(key => {
  console.log(`${key}: ${user[key]}`);
});
// Результат тот же

Преимущество: вы получаете только собственные свойства объекта, без унаследованных. Это более безопасно и читаемо.

3. Object.values() — если нужны только значения

Если вас интересуют только значения свойств, используйте Object.values():

Object.values(user).forEach(value => {
  console.log(value);
});
// Вывод: Анна, 25, Москва, false

4. Object.entries() — для одновременного получения ключей и значений

Этот метод возвращает массив массивов [key, value]. Идеально подходит для ситуаций, когда нужны и ключи, и значения:

Object.entries(user).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});
// Результат тот же

5. Современный способ: for...of с деструктуризацией

Вы можете использовать for...of вместе с Object.entries():

for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}

Важные замечания

• Собственные vs унаследованные свойства: for...in перебирает и унаследованные свойства. Чтобы получить только собственные, используйте hasOwnProperty или методы Object.keys(), Object.values(), Object.entries().
• Порядок перебора: В современных браузерах строковые ключи перебираются в порядке их создания, числовые — по возрастанию. Но полагаться на это не стоит.
• Производительность: Для больших объектов for...in может быть быстрее, но Object.keys() с forEach более читаем и безопасен.

Что выбрать новичку?

Начните с Object.keys() + forEach — это самый понятный и безопасный вариант. По мере освоения переходите к Object.entries() и for...of.

const obj = Object.create({}, {
  inheritedProp: { value: 'унаследовано', enumerable: true },
  ownProp: { value: 'собственное', enumerable: true },
  hiddenProp: { value: 'скрытое', enumerable: false }
});

// Object.keys() не увидит hiddenProp
console.log(Object.keys(obj)); // ['ownProp']

// Object.getOwnPropertyNames() увидит всё
Object.getOwnPropertyNames(obj).forEach(key => {
  console.log(`${key}: ${obj[key]}`);
});
// Вывод:
// ownProp: собственное
// hiddenProp: скрытое