【初学者向け】JavaScriptのreduceとは？使い道は？

JavaScriptの学習初期段階では全く理解できなかったreduceメソッドについてざっくり解説していきます。

#reduce( )で出来る事

・配列の合計を算出できる（今回はこちらを解説）
・配列の最大値を出す
・map( )として (配列を使って新しい配列を生成)
・filter( )として (配列から条件を満たすもので新しく配列生成)
・flat( )として (二次元配列を一次元に)
・文字列を配列にする
...etc
本当に様々なことができるようになります！

#reduce( )を使って配列の合計を算出しよう

###①reduce( )を理解する上で一番大事なイメージ
初学者の方に最初に頭に入れて置いて欲しいpointがあります。

それは配列の合計を算出する際
☆配列の要素を一気に足して値を返すをいうイメージではなく、
reduce( )は配列を頭から順番に一つずつ足していくイメージです。

(具体的には)
[1, 3, 5, 7]という配列の合計を算出する際、「1 + 3 + 5 + 7」→ 「16」
といった計算を１回行うのではなく
まずは最初の２つの「1 + 3」→ 「4」。
その後に「4 (※1+3の合計) + 5」→「9」をする。
その後に「9 (※4+5の合計) + 7」→「16」といった計算( 合計で3回 )イメージです

この計算イメージを頭に入れて次に進んでください

###②構文について
今回は簡略化して引数２つだけで説明します。(引数は最大４つ取れます)
1つ目・・accu( accumulatorの略 )
①のイメージで説明した通りここには前回の計算の合計(蓄積された値)がきます

2つ目・・curr( currentValueの略 )
ここにはaccuと足し合わせる要素が順番にきます。
①のイメージの説明で言うと3,5,7が順番に入ります。

const arry = [1, 3, 5, 7]; //配列を用意 

const sum = arry.reduce((accu, curr) => {
    //accとcurrに入る数値を確認するために記述してます(本来必要ないです)
    console.log(acuu, curr);
    //1 3 (1回目の計算)
    //4 5 (2回目の計算)
    //9 7 (3回目の計算)

    return accu + curr ;
});//

console.log(sum) //16

よりシンプルに記述するなら(途中のconsole.logは省いて)

const arry = [1, 3, 5, 7];
const sum = arry.reduce((accu, curr) => accu + curr);
console.log(sum) //16

とも記述できます。

#まとめ
reduce( )の実行イメージと引数の役割が理解できれば意外と簡単に感じることができると思います