JavaScript forEach vs map - どちらをいつ使うか
Array.forEach()とmap()の詳細比較。それぞれの使い分け、パフォーマンスの違い、副作用にmapを使うべきでない理由を学びます。無料リファレンス。
Comparison
詳細な説明
forEach() vs map()
どちらもすべての要素を反復しますが、根本的に異なる目的に使います。
Array.forEach()
各要素に関数を実行。undefinedを返す。副作用に使用。
const nums = [1, 2, 3];
nums.forEach(n => console.log(n));
// 出力: 1, 2, 3
// 戻り値: undefined
Array.map()
各要素に関数を実行。結果の新しい配列を返す。変換に使用。
const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2);
// doubled: [2, 4, 6]
アンチパターン
副作用にmapを使う（悪い例）：
// 悪い — 配列を作成して破棄
items.map(item => { saveToDatabase(item); });
// 良い — 副作用にはforEachを使用
items.forEach(item => { saveToDatabase(item); });
どちらも使わない場合
breakやcontinueが必要なシンプルな反復にはfor...ofを使用。
ユースケース
map()は既存の配列から新しい配列を生成する必要がある場合（データ変換、Reactレンダリング）に使用します。forEach()は各要素でアクションを実行するが結果配列が不要な場合（ログ記録、データベース保存、DOM更新）に使用します。