【JavaScript】reduce関数｜ある場合とない場合の違いを比較した。

これまでJavaScriptのreduce関数がよくわかりませんでした。

そこでreduce関数を使った場合と使わない場合をまとめてみると少しだけ理解できた気がしたのでメモです！

reduce関数とは

reduce関数は、「配列」に対して処理を行う関数。

配列のそれぞれの要素に対して、ユーザーが提供した「縮小」コールバック関数を呼び出します。その際、直前の要素の計算結果の返値を渡します。配列のすべての要素に対して「縮小」コールバック関数を実行した最終結果は、単一の値となります。

コールバックの初回実行時には「直前の計算の返値」は存在しません。 初期値が与えらえた場合は、代わりに使用されることがあります。 そうでない場合は、配列の要素 0 が初期値として使用され、次の要素（0 の位置ではなく 1 の位置）から反復処理が開始されます。

Array.prototype.reduce() - JavaScript | MDN

基本的な構文

array.reduce((accumulator, currentValue, currentIndex, array) => {
    ... // コールバック関数の処理を書く
}, initialValue);

• accumulator: 前回のコールバック関数の戻り値を保持する変数。初回はinitialValueから始まる
• currentValue: 現在処理している配列の要素
• currentIndex: 現在の要素のインデックス（※省略可能）
• array: reduceを呼び出している配列（※省略可能）
• initialValue: accumulatorの初期値

【例1】配列の合計を計算する

reduceを使う方法

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

const sum = numbers.reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
}, 0);

console.log(sum); // 15

reduceを使わない方法

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

let sum = 0;
for (let number of numbers) {
    sum += number;
}

console.log(sum); // 15

【例2】配列の要素をオブジェクトに変換する

reduceを使う方法

const fruits = ['apple', 'banana', 'cherry'];

const fruitCounts = fruits.reduce((accumulator, fruit) => {
    accumulator[fruit] = (accumulator[fruit] || 0) + 1;
    return accumulator;
}, {});

console.log(fruitCounts); // { apple: 1, banana: 1, cherry: 1 }

reduceを使わない方法

const fruits = ['apple', 'banana', 'cherry'];

let fruitCounts = {};
for (let fruit of fruits) {
    if (!fruitCounts[fruit]) {
        fruitCounts[fruit] = 0;
    }
    fruitCounts[fruit] += 1;
}

console.log(fruitCounts); // { apple: 1, banana: 1, cherry: 1 }

【例3】ネストされたオブジェクトのプロパティを集約する

reduceを使う方法

const orders = [
    { customer: 'Alice', amount: 250 },
    { customer: 'Bob', amount: 400 },
    { customer: 'Alice', amount: 150 }
];

const totalAmount = orders.reduce((accumulator, order) => {
    return accumulator + order.amount;
}, 0);

console.log(totalAmount); // 800

reduceを使わない方法

const orders = [
    { customer: 'Alice', amount: 250 },
    { customer: 'Bob', amount: 400 },
    { customer: 'Alice', amount: 150 }
];

let totalAmount = 0;
for (let order of orders) {
    totalAmount += order.amount;
}

console.log(totalAmount); // 800

参考記事

https://qiita.com/orange7354/items/2c0af969802379cd6548