Javascript forEach()とmap()は何がどう違うの？

実務でmap()を使っていたのですが、forEach()と何が違うの？ ということでまとめてみました。

結論

• forEach()
  ・与えられた関数を配列の各要素み対して実行する。

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

「map()は新しい配列を返す」というところがポイントです

次はソースコードを参考に説明します。

forEach()の使い方

const array = [2, 4, 6, 8];
const loop = array1.forEach(x => console.log(x * 2));

// 4
// 8
// 12
// 16

console.log("loop", loop); // undefined forEach()メソッドは返さない。
console.log('array', array) // [2, 4, 6, 8] // 元のarrayはそのまま。

map()の使い方

const array = [2, 4, 6, 8];
const loop = array.map(x => console(x * 2));

// [4, 8, 12, 16]


console.log("loop:", loop);　//[4, 8, 12, 16] // 処理の結果を反映した新しい配列が生成される。
console.log("array:", array); // [1, 2, 3, 4] // 元のarrayはそのまま。

まとめ

map()を使うときは処理を実行した後に新しい配列が作成される。
配列が必要なときは、map()を使い、そうではないときは、forEach()を使い分けるといいです。