JavaScriptのreduce()メソッドは、配列の要素を累積的に処理し、1つの値にまとめるメソッドです。今回は、reduce()の基本的な使い方から使用時の注意点までをまとめていきたいと思います。
目次 非表示
reduce()メソッドは、配列の各要素に対して指定したコールバック関数を順番に適用し、1つの値を生成します。
JavaScript
array.reduce((累積値, 現在の要素, インデックス, 配列) => {
// 処理内容
}, 初期値);- 累積値（accumulator）：前回の処理結果を保持する変数
- 現在の要素（currentValue）：現在処理中の要素
- インデックス（index）（省略可能）：現在の要素のインデックス
- 配列（array）（省略可能）：処理中の元の配列
- 初期値（optional）：累積値の初期値（指定しない場合は配列の最初の要素）
JavaScript
let numbers = [10, 20, 30, 40];
let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 100accに各要素numを加算して、配列の合計を求めます。初期値0からスタートし、10 + 20 + 30 + 40 = 100となるのでconsole.logに100と表示されます。
JavaScript
let numbers = [5, 12, 8, 130, 44];
let max = numbers.reduce((acc, num) => (num > acc ? num : acc), numbers[0]);
console.log(max); // 130accには現在の最大値が保持され、numと比較して大きい方を次のaccとして引き継ぎます。初期値は配列の最初の要素は5です。5と12を比較して、大きい方の12がaccに引き継がれ、次に12と8を比較…を繰り返し結果console.logに130が表示されます。
JavaScript
let products = [
{ name: 'コーヒーサーバー', price: 500 },
{ name: 'ドリッパー', price: 800 },
{ name: 'ケトル', price: 1000 }
];
let totalPrice = products.reduce((acc, product) => acc + product.price, 0);
console.log(totalPrice); // 2300product.priceをaccに加算して、すべての商品の合計金額を求める例です。console.logには合計金額の2300が表示されます。
JavaScript
let drinks = ['coffee', 'cappuccino', 'espresso', 'coffee', 'espresso', 'coffee'];
let drinkCount = drinks.reduce((acc, drink) => {
acc[drink] = (acc[drink] || 0) + 1;
return acc;
}, {});
console.log(drinkCount);
// { coffee: 3, cappuccino: 1, espresso: 2 }accはオブジェクトで、各飲み物の出現回数をカウントします。acc[drink] || 0で初期値を0に設定し、カウントを増やします。
JavaScript
let numbers = [];
let sum = numbers.reduce((acc, num) => acc + num);
// TypeError: Reduce of empty array with no initial value解決策: 初期値を設定することでエラーを防ぐことができます。
JavaScript
let sum = numbers.reduce((acc, num) => acc + num, 0);reduce()は強力なメソッドですが、可読性が低くなる場合があります。複雑な処理を行う場合は、forループやmap()+ filter()との併用も検討しましょう。
