まずは、結論。
どちらのメソッドも、配列の要素をループして何かしらの処理を実行するが、決定的な違いがある。
- forEach(): 与えられた関数を、配列の各要素に対して実行する。
- map(): 与えられた関数を、配列の各要素に対して実行し、その結果からなる新しい配列を返す。
「map()メソッドは、新しい配列を返す」ここがポイント。
ここからは、例を交えて詳しく見ていこう。
まずは、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はそのまま。
【JavaScript】forEach()とmap()の使いわけ
上記の通り、map は処理を実行した後に新しい配列を作成するので、返された配列が必要な時にはmap()を、そうでないときにはfoEach()を使うのが良いだろう。
感想など、コメント頂けると嬉しいです。
ABOUT ME