Что будет при использовании forEach для объекта

forEach есть у массивов и некоторых других объектов со своим API. У обычного объекта вида { a: 1, b: 2 } такого метода нет. Поэтому прямой вызов ломается в рантайме.

const user = { name: "Anna", role: "admin" };

// Плохо: у обычного объекта нет forEach
user.forEach((value) => {
  console.log(value);
});
// TypeError: user.forEach is not a function

В приложении такой код может сорвать рендер компонента или обработчик ответа API. Поэтому безопаснее сразу выбрать Object.keys, Object.values или Object.entries, а затем работать с полученным массивом.

На интервью не останавливайтесь на фразе "не работает". Добавьте причину. Метод лежит в Array.prototype, а обычный объект наследуется от Object.prototype. Значит, объект нужно сначала привести к массиву ключей, значений или пар.

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

const prices = {
  basic: 10,
  pro: 25,
  enterprise: 100,
};

Object.entries(prices).forEach(([plan, price]) => {
  console.log(`${plan}: ${price}`);
});

Здесь Object.entries(prices) возвращает массив пар. У этого массива уже есть forEach. Код не падает, а вы явно показываете, что перебираете ключи и значения.

Эта ошибка часто появляется не в учебном примере, а в обработке данных для UI. Например, API вернул объект с настройками, и вы хотите быстро отрисовать список.

const flags = {
  darkMode: true,
  betaBanner: false,
};

function FlagsList() {
  return (
    <ul>
      {Object.entries(flags).map(([name, enabled]) => (
        <li key={name}>
          {name}: {enabled ? "on" : "off"}
        </li>
      ))}
    </ul>
  );
}

Для рендера в React чаще нужен map, а не forEach. JSX должен получить массив элементов. Если написать Object.entries(flags).forEach(...) внутри JSX, результатом будет undefined. Список не отрисуется, хотя данные есть. Безопасная замена: Object.entries(flags).map(...) со стабильным key.

forEach нужен для побочных действий: лог, вызов функции, накопление во внешней переменной. Он всегда возвращает undefined. Поэтому ваш ответ будет сильнее, если вы добавите: для преобразования данных лучше выбрать другой метод.

const raw = { page: 1, limit: 20 };

// Хорошо: явно получаем новый объект
const query = Object.fromEntries(
  Object.entries(raw).map(([key, value]) => [key, String(value)])
);

console.log(query); // { page: "1", limit: "20" }

Такой код проще проверить и безопаснее менять. В нем нет скрытой мутации внешнего объекта. Значит, меньше риск получить старые данные в состоянии компонента или случайно испортить объект, который используется еще где-то.

for...in можно использовать для объектов, но это не полный аналог Object.entries. Он перебирает enumerable-свойства, включая свойства из цепочки прототипов.

const base = { inherited: "do not render" };
const settings = Object.create(base);
settings.theme = "dark";

for (const key in settings) {
  if (Object.hasOwn(settings, key)) {
    console.log(key, settings[key]);
  }
}

Если забыть проверку, в UI может попасть поле, которого не было в данных пользователя. Например, таблица покажет служебную настройку или форма отправит лишнее поле на сервер. В обычном коде с plain object чаще проще и безопаснее использовать Object.entries(settings).