JavaScriptに関するお知らせ

SINCE2019
>
【JS】reduceの使い方と破壊力-1.基礎編

【JS】reduceの使い方と破壊力-1.基礎編


こんにちは!今日は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

引数の種類と注意点

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)続き書いた



PREV
2019-04-03
【CSS】vhは一画面でない...ならばwindow.outerHeightを試してみよう+実用例

NEXT
2019-04-09
【JS】reduceの使い方と破壊力-2.reduce=filter+map