mapとforEachの違いについて

ReactやNext.jsを使って個人開発をしてる際、配列メソッドのmapを何となく使ってたのですが、今回mapとforEachの違いって何だっけ？となり、使い分けについて学ぶ機会があったので備忘録として書くなどする🐹

Array.prototype.map()とArray.prototype.forEach()の違い

この2つのメソッドは配列のそれぞれの要素に対して処理するArrayインスタンスメソッドです。

💡Arrayインスタンスメソッドとは？
JavaScriptの配列(Array)に対して利用できる関数のことをメソッドのこと。
これらのメソッドを使うことで配列の要素を操作したり、情報を取得したりできます。
Arrayのようなクラスから生成された個別のデータ(オブジェクト 例:[1,2,3])をArrayインスタンスと呼び、メソッドは特定のオブジェクトに対して呼び出せる関数を指します。

Array.prototype.map()

各要素に対して関数を実行しますが、mapは基の配列を変更せず、戻り値を新しい配列として生成します。

const arr = [1, 2, 3];
const squared = arr.map(x => x * x);
console.log(squared); // [1, 4, 9]

---

Array.prototype.forEach()

forEach は配列の各要素に対して指定した関数を一度ずつ実行しますが、戻り値は常にundefinedなので、returnで返しても意味がありません。
基の配列の変更はされず新しい配列も生成されない。

以下のように変数に代入しても、その変数の値は undefined となります。

const  numbers = [1, 2, 3];
const doubled = numbers.forEach(num => {
  console.log(num + 2); //コンソールは3 4 5と1つづつ表示される
});
console.log(doubled); // undefined

forEach の用途： 主に副作用（例: コンソール出力や外部変数の更新）を伴う処理を各要素に対して行うために使用されます。

なので、forEachで新しい配列を作りたい場合は以下のように変数を外部で定義して値を操作する必要がある。

const  numbers = [1, 2, 3];
const doubled =[];
numbers.forEach(num => {
  doubled.push(num * 2);
});
console.log(doubled); // [2,4,6]

---

まとめ：基の配列から新しい配列を生成したり、戻り値を必要とする時はmapを使うのが推奨されており、基の配列の値や外部で定義した値を変更したい時、コンソール出力したい時はforEachを使うのがよい。

mapのコールバック関数内で非同期処理を行う時の注意点なども非常に勉強になったので次回書こうと思います‪🐹