JS

reduce

中級

読み方:リデュース|英語:Reduce

配列の全要素を1つの値にまとめるメソッドで、合計値の計算などに使うよ。いつ使う? 配列の合計、最大値、オブジェクトへの変換など、配列を1つの結果にまとめたいときに使うよ。間違いやすいポイント: 第2引数の初期値を忘れると、空配列でエラーになるよ。arr.reduce((sum, n) => sum + n, 0) のように初期値0を必ず書こう。

やさしい説明

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

// 配列をオブジェクトに変換
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" }

いつ使う?

配列の合計・平均・最大値を求めるとき、配列をオブジェクトに変換するとき、複雑な集計処理をするときに使います。

間違いやすいポイント

❌ 初期値(第2引数)を忘れる

// ❌ 初期値なし → 空配列でエラーになる
[].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が便利です。

関連用語

📖 関連レッスン

レッスンを見る →

関連ブログ記事

⚠️ 関連するエラー

❓ 関連するQ&A