【JavaScript】forEach()とmap()の違いを整理しておく

まずは、結論。

どちらのメソッドも、配列の要素をループして何かしらの処理を実行するが、決定的な違いがある。

forEach(): 与えられた関数を、配列の各要素に対して実行する。
map(): 与えられた関数を、配列の各要素に対して実行し、その結果からなる新しい配列を返す。

「map()メソッドは、新しい配列を返す」ここがポイント。

ここからは、例を交えて詳しく見ていこう。

まずは、forEach()とmap()の使い方を簡単なコードと共に解説しよう。

Contents

【JavaScript】forEach()の使い方
【JavaScript】map()の使い方
【JavaScript】forEach()とmap()の使いわけ

【JavaScript】forEach()の使い方

以下の例は、要素を二倍しているだけのシンプルな処理。

コード内のコメントで解説していく。

const array1 = [1, 2, 3, 4];
const forEach1 = array1.forEach(x => console.log(x * 2)); 
// forEach1へのアサインは無駄。forEach() メソッドは何も返さない。
// 2
// 4
// 6
// 8

console.log("forEach1:", forEach1);　// undefined。上記の通り、forEach() メソッドは何も返さない。
console.log("array1:", array1); // [1, 2, 3, 4] ここもポイント。元のarray1はそのまま。

【JavaScript】map()の使い方

こちらも要素を二倍しているだけのシンプルな処理。

コード内のコメントで解説していく。

const array1 = [1, 2, 3, 4];
const map1 = array1.map(x => x * 2);
console.log("map1:", map1);　//[2, 4, 6, 8] 処理の結果を反映した新しい配列が生成される。
console.log("array1:", array1); // [1, 2, 3, 4] ここもポイント。元のarray1はそのまま。