reduceメソッドについて #JavaScript

reduceメソッドとは

JavaScriptのArrayオブジェクトのメソッドの一つで、配列の各要素を累積的に処理して最終的な単一の値を生成するメソッドです。このメソッドは、反復処理を要素の合計や最大値、最小値などを計算するのに役立ちます。

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

accumulator: 前回のコールバックの戻り値または初期値。
currentValue: 現在の要素。
initialValue: 最初のコールバック呼び出しのときに使用される初期値（オプション）。

サンプルコード

以下は、reduceメソッドを使用した基本的なサンプルコードです。

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

// 配列の要素を合計する
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(`合計: ${sum}`);//表示される結果は"合計: 15"

numbers.reduce((accumulator, currentValue) => {...}, 0);

reduceメソッドが呼び出されています。引数として、累積の初期値となる 0 が入力されています。
accumulatorは累積される値を表し、currentValueは各要素の値を表します。
(accumulator, currentValue) => { return accumulator + currentValue; }

アロー関数内で、各要素の値 (currentValue) を累積値 (accumulator) に加算しています。
console.log(合計: ${sum});

最終的な合計値をコンソールに表示しています。

使用例

以下は、reduceメソッドを使った製品の価格に割引を適用して合計金額を計算する例です。

const products = [
  { name: 'ノートパソコン', price: 1200 },
  { name: 'スマートフォン', price: 800 },
  { name: 'ヘッドフォン', price: 100 },
  { name: 'マウス', price: 30 },
];

// 初期値を0として、商品価格に10%の割引を適用した合計金額を計算する
const totalPriceAfterDiscount = products.reduce((total, product) => {
// 各商品に10%の割引を適用した価格を計算
  const discountedPrice = product.price * 0.9;
  // 累積された合計金額に現在の商品の割引後の価格を加算
  return total + discountedPrice;
}, 0);

console.log(`割引後の合計金額: ￥${totalPriceAfterDiscount}`);
//表示される結果は"割引後の合計金額: ￥1917"

const totalPriceAfterDiscount = products.reduce((total, product) => { ... }, 0);:
reduceメソッドを使用して、商品の価格に10%の割引を適用した合計金額を計算しています。totalは累積される合計金額を、productは現在の商品の情報を表します。初期値は0に設定されています。
const discountedPrice = product.price * 0.9;
各商品に対して10%の割引を適用した価格を計算しています。
return total + discountedPrice;
各商品の割引後の価格を累積された合計金額に加算しています。

reduceメソッドについて

目次

reduceメソッドとは

サンプルコード

使用例