JavaScriptのforEachの使い方と注意点

JavaScriptの forEach は、配列の各要素に対して一度ずつ処理を実行する便利なメソッドです。この記事では、基本的な使い方から注意点まで解説します。

forEach の基本的な使い方

forEach は、コールバック関数を引数に取り、配列の要素ごとにその関数を実行します。

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((num) => {
  console.log(num);
});

上記のコードでは、配列の各要素が console.log によって順番に出力されます。

出力結果

1
2
3
4
5

forEach のコールバック引数

forEach のコールバック関数には、次の3つの引数を取ることができます。

array.forEach((value, index, array) => {
  // value: 現在の要素
  // index: 現在のインデックス
  // array: 処理している元の配列
});

例えば、インデックスも一緒に出力する場合は次のように書けます。

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

fruits.forEach((fruit, index) => {
  console.log(`${index}: ${fruit}`);
});

出力結果

0: apple
1: banana
2: cherry

forEach の注意点

break や return でループを抜けられない

forEach は途中で処理を止めることができません。もし、途中でループを抜けたい場合は for...of や some を使う方が適しています。

const numbers = [1, 2, 3, 4, 5];

numbers.some((num) => {
  console.log(num);
  return num === 3; // 3を出力したらループ終了
});

async/await との相性が悪い

forEach のコールバック関数内で await を使っても、forEach 自体は非同期処理を待たずに進んでしまいます。

const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const test = async () => {
  [1, 2, 3].forEach(async (num) => {
    await delay(1000);
    console.log(num);
  });
};

test(); 
// すぐに関数が終了し、1秒後にすべてのログがほぼ同時に出力される

この問題を避けるには for...of を使いましょう。

const test = async () => {
  for (const num of [1, 2, 3]) {
    await delay(1000);
    console.log(num);
  }
};

test();
// 1秒ごとに 1, 2, 3 と順番に出力される

まとめ

• forEach は配列の各要素に対して処理を実行できる
• コールバックには (値, インデックス, 配列) を渡せる
• 途中でループを抜けられないため、for...of や some を代用するとよい
• 非同期処理 (async/await) との組み合わせには注意が必要

forEach はシンプルで便利なメソッドですが、用途によって for...of や map などを使い分ける