JavaScriptのforEachを完全マスター！配列処理の基礎から実践応用まで

こんにちは、ラーメン好きなフリーランスエンジニアの”ぽんねぐ”です。

本記事ではJavaScriptの配列を処理するためのforEachメソッドについて使い方を実例を用いて説明しております。

本記事を最後まで読んで頂くことで以下のようなお悩みを解決できます。

以下の関連記事についても一緒にご確認頂けるとJavaScriptのことがもっと理解できます。

まずは簡単に私のことを紹介します。

それでは始めていきましょう。

「forEach」とは？基本の使い方を解説

forEachの概要

JavaScriptで配列を処理するために便利なメソッドがforEachです。

これは、配列の各要素に対して一度ずつ特定の処理を実行するためのメソッドで、ループの代わりとして利用されます。

配列の反復処理を簡潔に書けるため、forループよりも見通しが良く、コードがすっきりします。

基本的な構文

以下はforEachの基本的な構文です。

array.forEach((element, index, array) => {
  // 処理内容
});

forEachにはコールバック関数を渡し、配列の各要素に対して一度ずつこの関数が呼び出されます。

最もシンプルな例を見てみましょう。

const fruits = ["apple", "banana", "cherry"];
fruits.forEach(fruit => console.log(fruit));

出力結果は以下のようになります。

apple
banana
cherry

このコードは、配列fruitsの各要素をforEachでループして、順番にコンソールに出力しています。

「forEach」のコールバック関数：要素、インデックス、配列の使い方

forEachのコールバック関数は、実は3つの引数を受け取れます：

1. element - 配列の現在の要素
2. index - 現在の要素のインデックス（位置）
3. array - 元の配列全体

これらを活用すると、処理の幅がさらに広がります。

以下に、3つの引数を使った例を示します。

const fruits = ["apple", "banana", "cherry"];
fruits.forEach((fruit, index, arr) => {
  console.log(`${index}: ${fruit} (${arr})`);
});

出力結果は以下のようになります。

0: apple (apple,banana,cherry)
1: banana (apple,banana,cherry)
2: cherry (apple,banana,cherry)

このように、インデックスを活用することで要素が配列のどこに位置するかを把握でき、arrayを使うことで元の配列全体にもアクセス可能です。

「forEach」と他の配列メソッドとの違い

JavaScriptには、配列を反復処理するためのメソッドが他にも多数あります。

その中でもforEachと混同しやすいのがmap、filter、reduceです。

それぞれの違いを理解し、用途に応じて使い分けましょう。

forEachとmapの比較例：

const numbers = [1, 2, 3];
numbers.forEach(num => num * 2); // 返り値なし

const doubled = numbers.map(num => num * 2); // [2, 4, 6]

forEachは処理を実行するだけで、配列を変換して返しませんが、mapは変換された新しい配列を返します。

実践編：「forEach」の応用テクニック

複数の処理を行う場合

forEachは柔軟なメソッドなので、条件付きの処理や複雑な操作も可能です。

const numbers = [10, 20, 30, 40];
numbers.forEach((num, index) => {
  if (num > 15) {
    console.log(`Index ${index}: ${num}`);
  }
});

出力結果は以下のようになります。

Index 1: 20
Index 2: 30
Index 3: 40

ネストされた配列を処理する場合

forEachを使うと、ネストされた配列（配列の中に配列がある場合）の要素を簡単に取り出すことができます。

const nestedArray = [[1, 2], [3, 4], [5, 6]];
nestedArray.forEach(subArray => subArray.forEach(num => console.log(num)));

出力結果は以下のようになります。

1
2
3
4
5
6

「forEach」のパフォーマンスと注意点

パフォーマンス面での注意

forEachは非常に便利ですが、大規模な配列に対しては注意が必要です。

例えば、1万件以上の要素を含む配列を反復処理する場合、forEachよりも従来のforループやfor...ofが効率的になることがあります。

これは、forEachが純粋なループではないため、JavaScriptエンジンにとって処理が少し重いからです。

非同期処理との相性

forEach内でawaitは使えないため、非同期処理を行う場合には別のアプローチが必要です。

for...ofループやPromise.all()を使うと良いでしょう。