Zenn
🔢

【JavaScript】配列内の要素を集約して新たな値を生成するreduceメソッドの詳解

2024/04/07に公開
JavaScript
tech

reduceメソッドについて

reduceメソッドは、配列内の各要素に対して指定されたリデューサー関数を実行し、その結果を単一の値に集約します。このメソッドは、数値の合計計算、オブジェクトのマージ、配列のフラット化など、多目的に使用されます。reduceの第二引数には、集約処理の初期値を設定できます。

reduceのサンプルコード

以下のreduceメソッドの使用例では、配列内のスコアを合計します。

処理の流れ(知りたい方はクリックしてください)

①配列の準備: オブジェクトの配列dataを用意します。各オブジェクトにはidとscoreのプロパティがあります。
②reduceの初期化: reduceメソッドの第二引数に0を設定して、累積値totalの初期値を0にします。
③最初の要素の処理: 配列の最初の要素（score: 10）を取り出し、total（0）に加算します。この段階でのtotalは10になります。
④次の要素の処理: 続けて、次の要素（score: 50）をtotalに加えます。前のステップでtotalは10になっているので、この時点でのtotalは60になります。
⑤続く要素の処理: 同様に、次の要素（score: 100）を加えると、totalは最終的に160になります。
⑥結果の出力: 最終的なtotalが集約された結果として得られ、コンソールに出力されます。

const data = [
  {id: 1, score: 10},
  {id: 1, score: 50},
  {id: 1, score: 100},
]

const totalScore = data.reduce((total, data) => total + data.score, 0)
console.log(totalScore); // 160

実践的な応用例

平均スコアの計算

配列内のスコアの平均を計算します。まず、reduceを使用して合計スコアを算出し、その後要素の数で割って平均値を得ます。

const data = [
  {id: 1, score: 10},
  {id: 2, score: 50},
  {id: 3, score: 100},
];
const totalScore = data.reduce((total, item) => total + item.score, 0);
const averageScore = totalScore / data.length;
console.log(averageScore); // 53.333333333333336

カテゴリごとの合計値計算

オブジェクト配列が異なるカテゴリのアイテムを含んでいる場合、reduceを使用して各カテゴリのアイテム合計を計算します。この方法では、結果をオブジェクトとして格納し、各カテゴリに対する合計価格をキーとして持たせます。

type Totals = {
  [category: string]: number;
};

const items = [
  { category: "食品", price: 100 },
  { category: "食品", price: 150 },
  { category: "雑貨", price: 200 },
];

const totalByCategory = items.reduce<Totals>((totals, item) => {
  const { category, price } = item;
  if (!totals[category]) {
    totals[category] = 0;
  }
  
  totals[category] += price;
  return totals;
}, {});

console.log(totalByCategory); // { 食品: 250, 雑貨: 200 }

まとめ

似たようなメソッドや処理

  • mapメソッド: 配列の各要素に関数を適用し、その結果を新しい配列として返します。
  • filterメソッド: 特定の条件を満たす配列の要素だけを抽出して新しい配列を作ります。

Discussion