アジェンダ
mapメソッドとforEachメソッドの基本的な違いについて簡単にまとめます。
違い/共通点
違い
-
戻り値があるかないか。
mapは新しい配列を返すが、forEachは何も返さない。
共通点
- 各要素に対しての処理を行う。
- 元の配列を編集しない。(非破壊的メソッド)
詳細
map:
- 各要素に対して指定した関数を実行し、その結果を新しい配列として返します。
元の配列を変えずに、新しい配列を作成する場合に使用します。
const array = [1, 2, 3];
const newArray = array.map((element) => element * 2);
console.log(newArray); // [2, 4, 6] - 元の配列の各要素を2倍にした新しい配列
forEach:
- 各要素に対して指定した関数を実行しますが、戻り値はありません。
配列を変更せず、単に副作用を伴う処理（例えば、ログを出力したり、他の値を変更したりすること）を行う場合に使用します。
const array = [1, 2, 3];
array.forEach((element) => {
console.log(element * 2); // 各要素を2倍にしてコンソールに出力
});
// 出力: 2, 4, 6
まとめ
-
新しい配列が必要な場合は
mapを使用して、変換された値を新しい配列として返します。 -
戻り値が不要で、副作用を伴う処理を行う場合は
forEachを使用します。