ひとつにまとめる

01 / 05

全部をまとめて1つにしたい

配列の要素を全部たして合計を出すとき、これまではループの外に let total = 0; を用意して、1つずつ足してきたよね。

「全部を足しあげる」「1つの結果にまとめる」という操作はとてもよく出てくる。それを1行で書くための道具が reduce（畳み込む）だよ。

02 / 05

ためる値と今の値を受け取る

reduce に渡す関数は、引数を2つ受け取る。

1つめがこれまでの合計（ためてきた値）で、2つめがいま見ている要素だ。関数の中で「新しい合計」を返すと、それが次の周の1つめの引数に引き継がれていくよ。

const nums = [1, 2, 3];const add = (total, n) => {  return total + n;};console.log(nums.reduce(add, 0));

実行結果

03 / 05

計算が進むようす

nums.reduce(add, 0) が中でどう動いているか見てみよう。

最初: total は 0、n は 1 → 0 + 1 = 1 を返す
2周目: total は 1、n は 2 → 1 + 2 = 3 を返す
3周目: total は 3、n は 3 → 3 + 3 = 6 を返す

最後の計算結果が、reduce 全体の戻り値になるんだ。

04 / 05

オブジェクトから合計を出す

商品一覧の合計金額を出すときにも大活躍する。

初期値を 0 にしておいて、total + item.price を返していけば、何十件の商品があっても1行で合計金額が求まるよ。

const items = [  { name: "ペン", price: 100 },  { name: "ノート", price: 200 },];const sumPrice = (total, item) => {  return total + item.price;};console.log(items.reduce(sumPrice, 0));

実行結果

05 / 05

まとめて確かめよう

ここまでを整理しておこう。

配列.reduce(関数, 初期値) で1つの値にまとめる
渡す関数は (これまでの値, いまの要素) => 次の値 の形
戻り値が次の周へとバトンタッチされていく

それじゃあ、実際にまとめてみよう。