JavaScript Array.reduce()の使い方

概要

Array.prototype.reduceは引数で与えられたreducer関数を配列要素一つ一つに実行し、単一の出力値を作る。

hogeArray.reduce(reducer, initialValue)

reducer関数

reducer関数は4つの引数を取る。そのうちアキュムレーターと現在値は必須。

1. アキュムレーター(accumulator) reducer関数の返り値を溜めていく変数のようなもの
2. 現在値(currentValue) 今回ってきている配列の要素
3. 現在の添字(index) 今回ってきている配列のインデックス
4. 元の配列(array) reduceが呼び出された配列(上記例で言うとhogeArray)

function reducer(accumlator, currentValue, index, array) {
    return ???
}

InitialValue

InitialValueはreducer関数の最初の呼び出しの最初の引数として使用する値。
例えばInitialValueに0を指定した場合、アキュムレーターの最初の値は0になる。

使い方の例と処理の内容

配列内の値の合計値を出すような処理を作る際にはスマートに記述する事ができる。

const array = [1, 3, 5];
return array.reduce(function (acc, cur) {
    return acc + cur;
}, 0)
// 出力結果：9

reduceは配列の内容を一つずつ網羅し、それについての計算をしていく。
0番地の配列に入っているのは1なので、最初の計算は下記のようになる。

0(アキュムレーター) + 1(現在値) = 1

次の1番地に回ると、0番地の計算で返された1がアキュムレーターに入っており、それに1番地の3が足されている事が見て取れる。

1(アキュムレーター) + 3(現在値) = 4

最後の2番地も同様の動作になる。配列の最後に到達したら、現在アキュムレーターに格納されている内容がreduceの返り値となる。

4(アキュムレーター) + 5(現在値) = 9

他の引数による動作の変化はMDNのリファレンスを見てみてください。

まとめ

余計な変数を用意しなくても計算結果をアキュムレーターに突っ込んでいく事ができるメソッド、reduce。配列操作する際は使っていきましょう。