JavaScript

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

HTML, CSS, JavaScript

まずは、結論。

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

  • 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
Wata
Wata
30歳で営業職からエンジニアに転職した者のブログです。 大手海運業→総合商社→ソフトウエアエンジン。現在は、オーストラリアにてエンジニアとして働いています。 未経験からのエンジニアへの転職、フロントエンド周りの技術、エンジニアの仕事環境、趣味の旅行、JAL修行、オーストラリアの情報などを発信しています!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です