【JavaScript】繰り返し処理をする時の便利メソッド(reduce編)

はじめに

JavaScriptで繰り返し処理をする時に便利なメソッドを紹介致します。

対象読者

・ES2015をこれから使っていきたい
・for文を使わず繰り返し処理をスッキリ書きたい

注意点

これから紹介する記法は主にES2015以降の記法です。
レガシーブラウザに対応させる場合は、トランスパイラ（Babel等）を使用し、ES5記法にトランスパイルをおこなってください。
（参考記事）
https://qiita.com/mizchi/items/3bbb3f466a3b5011b509#%E3%81%84%E3%81%BE%E3%81%99%E3%81%90es2015%E3%82%92%E4%BD%BF%E3%81%86
https://qiita.com/hietahappousai/items/9570da4b9275425489b2

reduce

【出来ること】
・配列から値を取り出し一つの値に集約する

例として、配列の中身を取り出し、合計値を求めるプログラムを書きます。

forの場合

const evenNumbers = [2,4,6];
let sum = 0;

for (let i = 0; i < evenNumbers.length; i++) {
    sum += evenNumbers[i];
}
console.log(sum); //12

reduceの場合

const evenNumbers = [2,4,6];
const sum = evenNumbers.reduce(function(accumulation,evenNumber) {
    return accumulation + evenNumber;
})
console.log(sum); //12


// アロー関数で記述した場合
const sum02 = evenNumbers.reduce((accumulation,evenNumber) => accumulation + evenNumber)
console.log(sum02); //12

書き方

配列.reduce(function(累積値, 現在処理されている配列の値) {
})

ポイント

・コールバック関数の第一引数に値を集約する為の変数を用意する
・returnで返却した値が、コールバック関数の第一引数に代入される
・計算結果（合計値、平均値、etc..）を求める際によく使われる

第二引数を設定する事で初期値も設定する事ができます。

const evenNumbers = [2,4,6];
const sum = evenNumbers.reduce(function(accumulation,evenNumber) {
    return accumulation + evenNumber;
},10)

console.log(sum); //22

まとめ

・reduceは配列から値を取り出し一つの値に集約する
・計算結果（合計値、平均値、etc..）を求める際によく使われる

以下の記事でreduceの色々な使い方が紹介されていましたので、
よろしければ参考にどうぞ

「JavaScriptの1行小ネタ集」
https://qiita.com/Tksi/items/130bcf82bbfb0379b58b

過去記事はこちら

・(forEach,map,filter編)
https://qiita.com/KORPLUS/items/6739209e9bc716e6a8b5
・(find,every,some編)
https://qiita.com/KORPLUS/items/2f85ddeb82e2306f3822