【JavaScript】forEach is not a functionエラーの原因と解決方法

💡最終更新：2025年10月16日
2019年版の記述を最新仕様に合わせて更新しました。

症状

objs.forEach(obj => {
  /* 処理 */
} );

こう書いて実行したところ…

Error: Uncaught TypeError: objs.forEach is not a function

怒られました。

原因

forEachループさせようとしているオブジェクト(objs)が配列ではありませんでした。

コンソールログからオブジェクトを確認してみてください。わたしの場合は「配列風」オブジェクトになっているだけでした。よく見ると[]がありません。

{
  0: 'Apple',
  1: 'Banana',
  2: 'chocolate',
  length: 3,
};

ここでは、{ a: 1, b: 2 } のようなキー/値の集まりをプレーンオブジェクト（いわゆる連想配列）と呼びます。
（※Map は「辞書」専用の別データ構造で、今回は対象外。）
JavaScript には「連想配列」という型はありません、実体は Objectです。まともな配列にしてから扱いましょう。

解決方法

配列化してから forEach

Array.from(objs).forEach(x => { /* ... */ });
// あるいは
[...objs].forEach(x => { /* ... */ });

Array.from でイテラブル（Iterable）なオブジェクト、もしくはプレーンオブジェクトを確実に配列化することで、forEach が使えるようになります。

イテラブルとは繰り返し可能なオブジェクトのことです。配列、文字列、Map、Set、NodeList、Generatorなどがあります。

for...of を使う

for (const obj of objs) { /* ... */ } 

for...of はイテラブルにのみ使える構文です。

• 早期終了できる。（break/continue/return が使える）
• async/await と相性が良く、逐次処理が書きやすい。
• コールバック不要で try/catch 内でもネストが深くなりすぎず、わかりやすい。

というメリットがあります。

また、entries() との相性が良いので、添字や要素の同時取得がかんたんに実装できます。

for (const [i, v] of arr.entries()) {
  // i: 添字, v: 値
}

さきほど紹介したようなプレーンオブジェクトは対象外です。そのままでは使用できないので、 Array.from(...) で配列化してください。

参考記事