では「配列メソッド4兄弟」＝ map / filter / forEach / reduce をまとめてみましょう。
4つのメソッドの役割
| メソッド | 返り値 | 主な用途 | 特徴 |
|---|---|---|---|
| map | 新しい配列 | 要素を「変換」する | 元の配列と同じ長さ |
| filter | 新しい配列 | 条件に合う要素を「選別」する | 元の配列より短くなることもある |
| forEach | なし | 要素ごとに「処理を実行」する | 配列は返さず、副作用に使う |
| reduce | 1つの値 | 配列全体を「集約」する | 合計・平均・オブジェクト化などに使える |
例題で比較
1. map（変換）
const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2);
console.log(doubled); // [2, 4, 6]
👉 「全要素を2倍にして新しい配列を作る」
2. filter（選別）
const nums = [1, 2, 3, 4, 5];
const even = nums.filter(n => n % 2 === 0);
console.log(even); // [2, 4]
👉 「偶数だけを取り出す」
3. forEach（実行）
const nums = [1, 2, 3];
nums.forEach(n => {
console.log(n * 2);
});
// 出力: 2, 4, 6
// 返り値は undefined
👉 「処理を実行するだけで、新しい配列は作らない」
4. reduce（集約）
const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, n) => acc + n, 0);
console.log(sum); // 10
👉 「配列全体を1つの値にまとめる（ここでは合計）」
応用例：組み合わせて使う
20歳以上のユーザーの名前を大文字にして、最後に「, 」でつなげる
const users = [
{ name: 'Sato', age: 20 },
{ name: 'Suzuki', age: 17 },
{ name: 'Tanaka', age: 30 },
];
const result = users
.filter(u => u.age >= 20) // 20歳以上を選別
.map(u => u.name.toUpperCase()) // 名前を大文字に変換
.reduce((acc, name) => acc ? acc + ', ' + name : name, '');
console.log(result); // "SATO, TANAKA"
✅ まとめのイメージ
- map → 変換
- filter → 選別
- forEach → 実行
- reduce → 集約
💡 これを「変換・選別・実行・集約」と覚えるとスッキリ整理できます。