【JavaScript】reduce()の使い方

データの合計を求めるのにreduce()を使用したので使い方をメモしておく。

reduce()の使い方

reduce()は、配列に含まれる要素を順番に取り出していき、コールバック関数を呼び出すようになっている。
配列の要素の合計を求める時などに使用される。reduce()の基本的な書き方は以下となる。

<対象の配列名>.reduce(<コールバック関数>,<初期値>)

ここで、初期値に関しては省略可能である。また、コールバックは順番に以下の4つの引数を取る。
■ １つ前のコールバック関数の結果の値。最初は、初期値か対象配列array[0]の要素。
■ 現在の要素。最初は、初期値が指定されている場合は対象配列array[0]の要素、指定なしの場合は対象配列array[1]の要素。
■ 現在の要素のインデックス。最初は、初期値が指定されている場合は0、指定なしの場合は1。
■ 対象となっている配列

サンプル

配列の合計を求めるサンプルを書いてみた。

const array = [1,2,3,4,5];

const total = array.reduce((sum, value) => {
    return sum + value;
}, 0);

console.log(total);     // 15

次に配列の中身がオブジェクトの場合も基本な書き方は変わらない。

const array = [
    { name: "ryota", number: 6 },
    { name: "taro", number: 8 },
    { name: "ken", number: 4 },
];

const total = array.reduce((sum, value) => {
    return sum + value.number;
}, 0);

console.log(total);     // 18