JS
reduce
中級読み方：リデュース｜英語：Reduce
配列の全要素を1つの値にまとめるメソッドで、合計値の計算などに使うよ。
やさしい説明
reduceは、配列の全要素を1つの値にまとめるメソッドです。「畳み込み」とも呼ばれます。
合計値の計算が最もわかりやすい例です。[1, 2, 3] を reduce すると 6（合計）になります。数値の合計だけでなく、配列をオブジェクトに変換するなど、様々な集計に使えます。
map/filter より少し難しいですが、使いこなすと強力です。初心者のうちは「合計を出すときに使う」と覚えればOKです。
具体例・使い方
// 合計を計算（最もよく使う）
[1, 2, 3, 4].reduce((sum, x) => sum + x, 0); // 10
// 最大値を求める
[5, 2, 8, 1].reduce((max, x) => x > max ? x : max, 0); // 8
// 配列をオブジェクトに変換（IDをキーにする）
const items = [{ id: 1, name: "A" }, { id: 2, name: "B" }];
items.reduce((obj, item) => {
obj[item.id] = item.name;
return obj;
}, {}); // { 1: "A", 2: "B" }reduceの仕組みを理解する
// reduce(コールバック, 初期値)
// コールバックの引数: (累積値, 現在の要素, インデックス, 配列)
const nums = [1, 2, 3, 4];
const total = nums.reduce((acc, cur) => {
console.log(`acc=${acc}, cur=${cur}`);
return acc + cur;
}, 0);
// acc=0, cur=1 → 1
// acc=1, cur=2 → 3
// acc=3, cur=3 → 6
// acc=6, cur=4 → 10
console.log(total); // 10第1引数（慣例で acc や sum）が「前の計算結果（累積値）」、第2引数（cur）が「今処理中の要素」です。コールバックの戻り値が次の累積値になります。
いつ使う？
- 配列の合計・平均・最大値・最小値を求めるとき
- 配列をオブジェクトに変換するとき（IDをキーにしてデータを引きやすくするなど）
- 条件ごとにグループ分けするとき
- ネストした配列を1段階フラット化するとき（
flatMapが使えない場合）
間違いやすいポイント
❌ 初期値（第2引数）を忘れる
初期値を省略すると空配列のときに TypeError が発生します。また、初期値がないと配列の最初の要素が累積値の初期値になるため、意図しない動作になることもあります。必ず初期値を指定しましょう。
// ❌ 初期値なし → 空配列でエラーになる
[].reduce((sum, x) => sum + x); // TypeError!
// ✅ 初期値を指定する
[].reduce((sum, x) => sum + x, 0); // 0（安全）よくある疑問
Q: reduceの書き方は？
A: const sum = [1,2,3].reduce((acc, n) => acc + n, 0); // 6。accは累積値、nは現在の要素、0は初期値です。
Q: reduceは難しい？
A: 最初は難しく感じますが、「前の結果 + 今の要素 → 次の結果」の繰り返しと考えましょう。合計計算から始めるとわかりやすいです。
Q: reduceの代わりになるものは？
A: 合計ならfor文でも書けます。単純な合計・最大値ならfor文の方が読みやすいこともあります。複雑な変換にはreduceが便利です。
関連用語
📖 関連レッスン
レッスンを見る →