# javascript reduce 連想配列の合計計算覚えよう
忘れぽい人は苦痛で仕方ない javascript あるある reduce 編。
javascript の sum 計算で今まで reduce で配列の合計を求めて来ましたが、連想配列になるとあっれどうだったっけの自分に、さようならしたいので、今更 reduce を書きまとめました。
# Reduce（リデュース）とは
Reduce（リデュース）とは、製品をつくる時に使う資源の量を少なくすることや廃棄物の発生を少なくすること
↑ リユース検定試験に必ず出題される項目です。ここの javascript とは無関係
英語は一緒で自己流の理解からすると、javascript の reduce とは配列の資源を再利用するための関数です。配列分解して処理するなら foreach も map も filter もできますが、reduce は引数にアキュムレータ（容器）を用意していて、配列の合計などでよく使われます。
reduce 関数の構文
arr.reduce(callback[, initialValue])
reduce 関数 コールバックの 4 つの引数
callback(アキュムレータ, 現在値, 現在のインデックス, ソース配列)
現在のインデックスとソース配列はオプション
# 一般配列 合計計算
const array = [1, 2, 3, 4];
const sum = array.reduce((accumulator, current) => accumulator + current);
console.log(sum);
// output: 10
# 連想配列 合計計算
const items = [
{ id: 1, name: "apple", price: 100 },
{ id: 2, name: "orange", price: 200 },
{ id: 3, name: "tomato", price: 300 },
{ id: 4, name: "banana", price: 400 },
{ id: 5, name: "grape", price: 500 }
];
const total = items.reduce((sum, i) => sum + i.price, 0);
console.log(total);
// output: 1500
構文： arr.reduce(callback[, initialValue])ですが、連想配列で reduce 使う場合はinitialValue必須です。
なぜなら、initialValue 設定しなかった場合、配列の最初の要素が使用されます。
因みに、空の配列を initialValue なしで reduce() を実行すると TypeError を throw します。
連想配列だと 1 つ目のオブジェクトが代入されるので、"[object Object]200300400500"みたいの出力されてしまいます。
なので、const total = items.reduce((sum, i) => sum + i.price, 0); initialValue 初期値ここではゼロにしていますがちゃんと設定するような習慣にしましょう！
# vuejs おまけ
data() {
return {
items: [
{ id: 1, name: "apple", price: 100 },
{ id: 2, name: "orange", price: 200 },
{ id: 3, name: "tomato", price: 300 },
{ id: 4, name: "banana", price: 400 },
{ id: 5, name: "grape", price: 500 }
],
postage: 500
};
},
computed: {
total() {
return this.items.reduce(
(sum, i) => sum + (i.price || 0),
Number(this.postage)
);
}
},
結果 total は 2000 になります。
reduce は自前の容器持ちの sum 合計計算に強い関数です。やってみて楽しい関数です。