reduce() を使うと、ある配列から各要素ごとに処理を実行、一つの結果にまとめることができます。
filter() はある配列から条件にマッチした要素だけを抽出できます。
簡単な例として「Number配列の中から偶数だけを取り出してその合計を求めたい」場合を想定します。
先に forEach() を使った場合を書いてみましょう。
forEach() を使う場合
const myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9]
let result = 0
myArray.forEach(value => {
if (value%2 === 0) {
result = result + value
}
})
console.log(result)
結果:
=> 20
このようにかけますね。
reduce() , filter() を使う場合
filter() はわかりやすいですが reduce() の使い方は、
myArray.reduce(reducer, initialValue)
のように使います。
reducerはcallbackを渡して、initialValueはaccumulatorの初期値になります。
reduce() にはreducer関数（純粋関数）と言われるものを渡します。
そして reducer関数の中は第一引数にaccumulatorが渡ってきます。
これは蓄積された値、つまり要素の数だけreducer関数を実行した時に、前の関数でreturnされた値が入ります(下の例だと 2 → 6 → 12 → 20 の順)。
第二引数は実行される現在の値(下の例だと 2 → 4 → 6 ...の順)になります。
const myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9]
const isEvenNumber = value => value%2 === 0
const reducer = (accumulator, currentValue) => accumulator + currentValue
const result = myArray.filter(isEvenNumber).reduce(reducer, 0)
console.log(result)
結果:
=> 20
結果は同じですね。
まとめ
forEach() の例と比べるとわかりますが、 reduce() や filter() 、 map() を使うとループ処理部分を別関数として切り出しやすくなります。
これによってロジックを共通化できたり、テストが書きやすくなるというメリットがあるので、reduce() や filter() 、 map() を積極的に使っていきたいですね。