forEach()

forEach()メソッドは、配列の各要素に対して指定された関数を一度ずつ実行します。ログ出力や要素の直接変更などの操作に適しています。

構文

array.forEach(callback(currentValue, index, array), thisArg);

例

const numbers = [1, 2, 3, 4];

numbers.forEach((number) => {
  console.log(number * 2);
});

// 出力:
// 2
// 4
// 6
// 8

map()

map()メソッドは、配列の各要素に指定された関数を適用し、その結果から新しい配列を作成します。データの変換や加工によく使用されます。

構文

map((currentElement, indexOfElement, array) => { ... });

例

const numbers = [1, 2, 3, 4];

const doubledNumbers = numbers.map((number) => {
  return number * 2;
});

console.log(doubledNumbers);
// [2, 4, 6, 8]

主な違い

項目	forEach()	map()
戻り値	`undefined`	新しい配列
用途	副作用を伴う処理	データの変換
メソッドチェーン	不可	可能（`reduce()`, `sort()`など）

どちらを使うべきか

forEach()を使う場合: 配列を単に繰り返し処理したい場合や、変換を必要としない処理（コンソール出力、DOM操作など）
map()を使う場合: 配列の各要素を変換して新しい配列を作成したい場合や、後続のメソッドをチェーンしたい場合

参考