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が便利です。
関連用語
📖 関連レッスン
レッスンを見る →