JavaScriptで配列を扱う際によく使われるメソッドに forEach() と map() があります。
これらのメソッドを使うことで、ループ処理を簡潔かつ可読性の高いコードで書けるようになります。
この記事では、for 文を使ったパターンと比較しながら、それぞれの違いや使い方を解説します。

この記事のポイント

• forEach と map の役割の違いがわかる
• forEach の使い方がわかる
• map の使い方がわかる
• 使い分け方がわかる

forEach() メソッド

forEach は、配列の各要素に対して順番に指定した処理を実行する反復メソッドです。
主な特徴として、配列の各要素を「処理」するためのメソッドであり、実行後に何も返しません。
forEach は、新しい配列を生成するのではなく、配列の要素ごとに特定の操作を行いたい場合に便利です。

基本構文

array.forEach(function(value, index, array) {
  // 各要素に対する処理
});

• value :
  配列1つの要素　(各ループごとに順番に渡ってくる)
• index（省略可）:
  現在の要素のインデックス
• array（省略可）:
  元の配列が渡ってくる

forEach の挙動

例えば、配列内の各数値をコンソールに出力する場合、forEach を使うと以下のように書けます。

使用例

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

numbers.forEach(function(number) {
 console.log(number)
});
// 出力: 1, 2, 3, 4, 5

このように、forEach は指定した関数（ここではコンソールに出力する関数）を、配列の各要素に対して実行するだけで、実行結果を新しい配列として返すことはありません。

実用例：配列の要素を2倍にする

ここで、各要素を2倍にして配列に戻す例を見てみましょう。
forEach() は配列を変換して新しい配列を返すものではないため、結果を保存する新しい配列を準備しておく必要があります。

forEach文を使う場合

const array = [1, 2, 3, 4, 5];
const doubledArray = [];

array.forEach(function(element) {
  doubledArray.push(element * 2);
});

console.log(doubledArray); // [2, 4, 6, 8, 10]

forEach() は戻り値を返さないため、配列を変換する際には新しい配列を用意し、push メソッドで結果を追加していく必要があります。

for文の場合

const array = [1, 2, 3, 4, 5];
const doubledArray = [];

for (let i = 0; i < array.length; i++) {
  doubledArray.push(array[i] * 2);
}

console.log(doubledArray); // [2, 4, 6, 8, 10]

map() メソッド

map は、配列の各要素を処理し、その変換結果を新しい配列として返す反復処理メソッドです。
map を使うと、元の配列を変えずに、各要素に対する変換結果を持つ新しい配列が作成されるのが特徴です。
このメソッドは、例えば配列内の数値を倍にしたり、文字列を大文字に変換したりといった、各要素を加工した結果をまとめて新しい配列として取得したい場合に最適です。

基本構文

const newArray = array.map(function(currentValue, index, array) {
  // 処理
  return // 新しい配列の要素
});

• value :
  配列1つの要素　(各ループごとに順番に渡ってくる)
• index（省略可）:
  現在の要素のインデックス
• array（省略可）:
  元の配列が渡ってくる

map の挙動

配列内の各数値を2倍にした新しい配列を作成するには、map を使って次のように書きます。

使用例

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

const doubled = numbers.map(function(number) {
return number * 2
});
console.log(doubled);
// 出力: [2, 4, 6, 8, 10]

この場合、map メソッドは元の配列 numbers を変更せず、各要素に対する処理（ここでは「数値を2倍にする」処理）の結果を新しい配列として返します。

実用例：配列の要素を2倍にする

具体的な使用例

const array = [1, 2, 3, 4, 5];
const doubledArray = array.map(function(element) {
  return element * 2;
});

console.log(doubledArray); // [2, 4, 6, 8, 10]

このように、map() は配列の各要素を変換し、変換結果を含む新しい配列を一度に作成できます。

for文の場合

const array = [1, 2, 3, 4, 5];
const doubledArray = [];

for (let i = 0; i < array.length; i++) {
  doubledArray.push(array[i] * 2);
}

console.log(doubledArray); // [2, 4, 6, 8, 10]

forEach() と map() の違いまとめ

まとめ

forEach() と map() はどちらも配列操作に便利ですが、それぞれ適した場面があります。

• forEach()：各要素を順に処理する場合や、副作用を発生させる処理（例えば、コンソール出力など）を行いたいときに便利。
• map()：配列の各要素を変換し、変換後の結果を新しい配列として返したい場合に最適。

場面に応じてこれらを使い分けることで、よりシンプルで可読性の高いコードを書くことができます。

これらは実務などでもよく使うため、使いこなせるよう慣れおきましょう。

CodeVilageでは無料カウンセリングを実施しております！

まずはお気軽に無料カウンセリングへご参加ください！
「興味はあるけど、自分にできるか不安...」
「どんなキャリアを描けばいいのか分からない...」
そんなあなたのために!!
何でも相談できる無料カウンセリングを実施しています。

無料カウンセリングに申し込む>>