JavaScript reduceメソッド

reduceメソッドの使い方をメモ。

forループの場合

var numbers = [1, 2, 3, 4, 5];
var sum = 5;

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

console.log(sum);

結果は[20]

reduceの場合

var numbers = [1, 2, 3, 4, 5];

var result = numbers.reduce(function(sum, number){
    return sum + number;
}, 5);

console.log(result);

結果は同じく[20]
reduceは引数を2つ取る。
1つ目はコールバック関数（function(sum, value)）。
2つ目はsumの初期値（今回は5）。
コールバック関数にもsumとvalueの引数が2つある。
上記の処理は、①まず、初期値5がsumに、配列の1つ目の要素がvalueに渡され、sumとvalueを足し算した結果がreturnされる。
②次に、①でreturnされた値がsumに、配列の2つ目の要素がvalueに渡され、sumとvalueを足し算した結果がreturnされる。③これを配列要素分、繰り返して、配列の全要素と初期値を足し算した結果が、reduceの結果となる。

上記のように、合計を求めるパターンは一般的なパターン。

少し応用

オブジェクト配列から、必要な値の配列を得る。

var fruits = [
    {name: 'apple' , price: 100},
    {name: 'orange', price: 200},
    {name: 'lemon' , price: 300}
];

// mapで表現する場合
var mapped = fruits.map(function(value){
    return value.name;
});
console.log(mapped);

// reduceで表現する場合
var reduced = fruits.reduce(function(acc, value){
    acc.push(value.name);
    return acc;
}, []);
console.log(reduced);

mappedもreducedも結果は同じ。
mapの機能をreduceで表現することもできる。
上記では、reduceの第2引数の初期値は空配列[]。

まとめ
・reduceは、配列の要素全てを集約するメソッドである。
　足し合わせたり、新しい配列を作成することができる。
・mapと同じ処理をreduceで表現することができる。
・コールバック関数内でのreturn文を忘れないこと。