【JavaScript reduceメソッド】配列の値を再利用して計算する方法(reduceの使い方)

どうもフロントエンドエンジニアのまさぴょんです！

今回は、JavaScriptの配列メソッド連載シリーズ reduceメソッド編に入ります。

前回、配列の中身に対して、指定条件にすべて一致するか判定できるeveryメソッドを紹介しました。興味がある人は、ぜひCheckしてみてください。

【JavaScript everyメソッド】配列からすべて条件に一致するか確認する方法(everyの使い方)

【JavaScriptの配列メソッド解説: every編】

1 配列メソッド reduce()とは？
2 Array.prototype.reduce() の構文
3 reduceメソッドを使ってみよう！ Sample-Code①
4 reduceメソッドを使ってみよう！ Sample-Code②
5 まとめ
6 JavaScript書籍 Ver. 中級-上級者向け
7 JavaScript書籍 Ver. 初級者向け
8 参考・引用
9 最近の投稿

配列メソッド reduce()とは？

reduce() メソッドは、配列のそれぞれの要素に対して、順番通りに、ユーザーが提供した「縮小」コールバック関数を呼び出します。
その際、直前の要素における計算結果の返値を渡します。
配列のすべての要素に対して縮小関数を実行した結果が単一の値が最終結果になります。
コールバックの初回実行時には「直前の計算の返値」は存在しません。
初期値が与えらえた場合は、代わりに使用されることがあります。
そうでない場合は、配列の要素 0 が初期値として使用され、次の要素（0 の位置ではなく 1 の位置）から反復処理が開始されます。
引用元： MDN: Array.prototype.reduce()

と天下のMDN-Docが言っておりますが、これだけだとわかりづらいですね、、、

reduceは、「減らす」という意味を持つ英単語です。

その英語の原義からも、メソッド機能の意味を理解することができます。

このreduceメソッドの1番の特徴は、直前の処理結果を引数(prev-value)として保持できることです。

reduce, reuse, recycle と言う3Rがありますが、まさにreduceメソッドはまさに再利用性を備えたエコ・メソッドです。

直前の処理の結果を保持する特性があるので、値の計算などに役立ちます。

Array.prototype.reduce() の構文

メソッドの基本の形を確認しましょう！

メソッドを理解する時に意識すべきなのは、「引数」(Parameter)と「実行結果」(返り値)です。

reduce()・基本の形

array.reduce( (previousValue, currentValue, currentIndex, array) => { 処理記述 }, initialValue );

// previousValue には、直前の処理結果の値が入る！ => 初回は、initialValue or Array[0]の値
// currentIndex（現在のindex）, array(配列・本体), initialValue（初期値）は、省略可・設定してもしなくてもOK！

reduceメソッドは、設定できる「引数」(Parameter)が多いので注意が必要です。

1番、注意すべきポイントは第一引数のpreviousValueです。

reduceメソッドの第一引数には、previousValue(直前の処理結果の値)が入ります。

ただし、初回のpreviousValueの値は、initialValue（初期値）が設定されていればそれが入ります。

initialValue（初期値）が設定されていなければ、array[0]の値が初期値として入り計算がStartします。

MDNに記載されている通り、array[0]が初期値としてStartした場合は、array[1]の位置から反復処理が開始されます。

必須なのは、第一・第二引数で第三・第四引数のcurrentIndexとarrayやinitialValueは、省略できます。

reduceメソッドの「引数」(Parameter)をまとめると、それぞれ次のようになります。

previousValue: 直前までの累積値 (初回は、initialValue or array[0]の値)
currentValue: 配列から取り出した現在(current)のvalue
currentIndex: 取り出している現在のindex番号
array: reduceメソッドを呼び出している配列そのもの
initialValue: 初期値, 設定しない場合は、array[0]のvalueが初期値となる。

この上記の特徴を把握すれば、reduceメソッドの概要は理解できたと思います。

reduceメソッドを使ってみよう！ Sample-Code①

それでは次にreduceメソッドを使ってみましょう！

以下のCodeをコピーして、ブラウザのコンソールなどで実行してみましょう！

// 1. reduceメソッド: 直前の処理結果をpreviousValue(第一引数)が受け取ってくれる。
let sife = 20000;

const itemPrice = [1000, 2000, 3000, 4000, 5000];

let sumItemPrice = itemPrice.reduce( (previousValue, currentValue) => previousValue + currentValue);
console.log(sumItemPrice); // 出力結果: 15000

sife >= sumItemPrice ? console.log("所持金の方が多い！") : console.log("所持金の方が少ない！");
// 出力結果: 所持金の方が多い！

上記のコードでは、itemPriceの合計金額(sumItemPrice)を算出して、sifeがその合計金額より多いか判定していますね。

reduceメソッドを使ってみよう！ Sample-Code②

次のコードもコピーして、コンソールなどで実行してみてください。

// 1. reduceメソッド: 直前の処理結果をpreviousValue(第一引数)が受け取ってくれる。
let sife = 20000;

const izakayaPrice = [
    { price: 1000, name: "ハイボール" },
    { price: 2000, name: "焼きそば" },
    { price: 3000, name: "お茶漬け" },
    { price: 4000, name: "イカの塩辛" },
    { price: 5000, name: "梅酒" },
];

const otoosi = 6000;

let sumIzakayaPrice = izakayaPrice.reduce( (previousValue, currentValue, currentIndex, array) => previousValue + array[currentIndex].price, otoosi );
console.log(sumIzakayaPrice); // 出力結果: 21000

sife >= sumIzakayaPrice ? console.log("所持金の方が多い！") : console.log("所持金の方が少ない！");
// 出力結果: 所持金の方が少ない！

まとめ

基本構文 & 引数： Array.reduce( (previousValue, currentValue, currentIndex, array) => { 処理記述 }, initialValue );
ポイント： previousValueが1回ごとの実行結果を格納する。
実行結果 : 処理内容の結果

次回は、sliceメソッドについて解説します。