こんにちは!今日はJavaScriptのメソッドの一つであるreduceについて書こうと思います!全3回予定。

reduceは複雑ながらも使いこなせればとてつもなく強力、個人的に最も大好きなメソッドの一つです:)

reduce

ざっくり言うと複数個(配列やオブジェクト)を一個にする関数です。

reduceの分かりやすい例としては**数列の合計(sum)**がよく使われますね!こんな感じに...

const arr = [0, 1, 2, 3, 4, 5]
const sum = arr.reduce( function(pre, cur){
  return pre + cur
})
console.log(sum) // 15

もう少し短く書くとこう。やってることは同じです。

const n = [0, 1, 2, 3, 4, 5]
const sum = n.reduce((pre, cur) => pre + cur)
console.log(sum) // 15

そういえばJavaScriptにはSUM関数無いですね。.reduceの使い方を勉強する時に「SUM関数を作ってみよう！」っての、わりとメジャーじゃないでしょうか...😛 #javascript #SUM関数

— Mizutani@フロントエンドエンジニア (@sirycity) June 2, 2020

引数の種類と注意点

reduceは4つの引数をとり、それぞれ「直前の結果」「今回の値」「連番」「自身の配列」を示します。

数も多いしJSのメソッドの中でもかなり覚えにくいですねー、適切な命名を心がけましょう。自分は順番に「pre」「cur」「i」「arr」と付けています。他にも「accu」「val」「ind」「self」とか見たことあります。

引数は省略可能です。上の例も前2つしか使ってないわね。後の引数だけを使うこともできますが、やや冗長的な記述になります。下は配列をそのまま返すだけの例です。

const n = [0, 1, 2, 3, 4, 5]
const sum = n.reduce((_, __, ___, arr) => arr)
console.dir(sum) // [0, 1, 2, 3, 4, 5]

2番目の「cur」は、配列の0番目の値に対しては作用しないため注意が必要です。 3以上の数のみをfilterする例で見てみると...

const n = [0, 1, 2, 3, 4, 5]
const sum = n.reduce((pre, cur) => 
  [... pre , cur > 3 ? cur : []]
)

console.dir(sum) // [0, 3, 4, 5] あれ?

これは、初回に0番目の値がpre、1番目の値がcurに入るためです。これを避けるため初期値を定義しておくと良いでしょう。 こんな感じに...

const n = [0, 1, 2, 3, 4, 5]
const sum = n.reduce((pre, cur) => 
  [... pre , cur > 3 ? cur : []]
, 0)// 最初の値は0

console.dir(sum) // [3, 4, 5]

こうすれば初回に初期値である0がpre、0番目の値がcurに入るため適切な結果がreturnされます。初期値は書いておいて困ることもないので、常に0かnullを入れておくといいと思います:)私はnull派

reduceは引数が4つもあるので、単純な計算ならスプレッド演算子でバラしちゃっても良いかもしれません。 冒頭の数列合計の例だと...

const n = [0, 1, 2, 3, 4, 5]
const sum = n.reduce((... v) => v[0] + v[1])
console.log(sum) // 15

んーどうだろう、数学っぽい書き方なので人によっては見やすいかも?しれないわね。

reduceは始まったばかり

個人的にreduce大好きすぎるので(2回目)、reduceを綺麗に使ったコードを見るのがとても嬉しいです。 次回はreduceとmap、filterの違いとかスプレッド演算子との組み合わせとかを書きたいと思います:)じゃあね

ここまで書いて気づいたけどスプレッド演算子も結構な難易度ですね:( 当たり前のように記事内でreduceと組み合わせてたけど...

【追記】(2019/04/08)続き書いた