備忘録 Javascript reduceの使い方

for文を多く書くとコードの見通しが悪いという事もありreduceを使ってみました。
処理速度については下記に諸先輩方が投稿されている記事があったので、下記をご参照ください。

for文での処理

var array = [0, 1, 2, 3, 4];
var sum = 0;

for(var i = 0; i < array.length; i++){
  sum += array[i];
}

console.log(sum); // 10

reduceでの処理①

var array = [0, 1, 2, 3, 4];

var result = array.reduce(function(accumlator, currentValue, currentIndex, array){
  return accumlator + currentValue;
})

console.log(result); // 10

reduceでの処理②

var array = [0, 1, 2, 3, 4];

var result = array.reduce(function(accumlator, currentValue){
  return accumlator + currentValue;
},10);

console.log(result); //20

※第二引数に初期値を設定する事ができる。（今回の場合は、10を設定）

reduceでの処理③

APIのレスポンスとかで良くありそうな、配列の中にjsonオブジェクトが入った形を処理してみる。
ポイントは第二引数に0を渡すことで初期値を設定している事！

var items = [
  {
    name: 'pen',
    price: 100,
    quantity: 2
  },
  {
    name: 'note',
    price: 200,
    quantity: 3
  },
  {
    name: 'eraser',
    price: 50,
    quantity: 1,
  }
]

var result = items.reduce(function(accumlator, currentValue){
  console.log(accumlator);
  console.log(currentValue);
  return accumlator + (currentValue.price * currentValue.quantity);
},0);

console.log(result); //850

↑のconsole.log(accumlator)とconsole.log(currentValue)とconsole.log(result)の結果

0
{ name: 'pen', price: 100, quantity: 2 }
200
{ name: 'note', price: 200, quantity: 3 }
800
{ name: 'eraser', price: 50, quantity: 1 }
850

参考
https://qiita.com/Hibikine_Kage/items/660392270c466b3f9805
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce