JavaScript reduce関数を使用して合計を求める

JavaScript reduce関数を使用して合計を求める

こんにちは。ふっくんです。

今回は、 javascriptreduce 関数をご紹介します。

reduce関数の使い方

reduce関数とはどのようなものかと言うと、配列の各要素に対して(左から右へ)関数を適用し、単一の値にします。

Array.prototype.reduce() - JavaScript | MDN

例えば、以下のような連想配列があるとしましょう。

const fruits = [
  {'id': 1, 'kind': 'apple', 'price': 100},
  {'id': 2, 'kind': 'orange', 'price': 80},
  {'id': 3, 'kind': 'grape', 'price': 200},
]

fruits の中から price の合計値を求めたい時に reduce を使用します。

const total = fruits.reduce((p, x) => p + x.price, 0)

出力結果

380

ソースコードの解説をしておきます。

  1. reduce関数内の p x は任意の文字で構いません。
  2. 一番後ろにある 0 は初期値です。ここで初期値を設定します。
  3. p + x.price の計算を行い、これを配列の要素の数だけ行います。
  4. p には前回のコールバックの戻り値が入ります。また、最初の要素のみ初期値が入ります。

つまり、上記の例だと以下のように計算が行われます。

0 + 100
100 + 80
180 + 200

// 出力 380

非常に便利な関数ですので、ぜひ使用してみてください。 他にもjavaScriptの便利な関数を紹介していますので、ぜひご覧ください!

hiroki-Fukumoto