array.reduce()

アレイ・リデュース（組み込みオブジェクト）

意味要素を集約

array.reduce()とは？

`array.reduce()`メソッドは、配列の各要素に対して関数を適用し、単一の出力値を生成します。

array.reduce()の具体的な使い方

配列の要素の合計を計算する例

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum);

👇出力結果

この例では、数値の配列の合計を計算しています。reduce()メソッドは、配列の各要素に対して指定された関数を実行し、最終的に単一の値（この場合は合計）を返します。初期値として0を指定しています。

オブジェクト配列から特定のプロパティの合計を計算する例

const cart = [
  { item: 'Apple', price: 100, quantity: 2 },
  { item: 'Banana', price: 80, quantity: 3 },
  { item: 'Orange', price: 120, quantity: 1 }
];

const totalPrice = cart.reduce((total, product) => total + (product.price * product.quantity), 0);
console.log(totalPrice);

👇出力結果

この例では、商品オブジェクトの配列から総額を計算しています。reduce()メソッドは、各商品の価格と数量を掛け合わせた値を累積していき、最終的に総額を返します。初期値として0を指定しています。

array.reduce()に関するよくある質問

Q. reduce()の初期値は必須ですか？

A. 初期値は必須ではありませんが、指定することをお勧めします。指定しない場合、最初の要素が初期値として使用されます。

Q. reduce()は何を返しますか？

A. reduce()は単一の値を返します。この値は数値、文字列、オブジェクト、配列など、任意の型にすることができます。

Q. 空の配列でreduce()を使うとどうなりますか？

A. 空の配列でreduce()を使用し、初期値を指定しない場合はTypeErrorが発生します。初期値を指定すれば、その値が返されます。

JavaScriptを勉強するのにおすすめな問題集アプリの紹介

楽しくプログラミングを学ぶことで、プログラミングの理解度が深まります。『JavaScript問題集』は、楽しくJavaScriptを学ぶのに最適なアプリです。AIが出題する問題に答えていくことで、自然とJavaScriptの理解度が深まります。

AppStoreからダウンロード：https://apps.apple.com/jp/app/id6737941570

JavaScriptのarray.reduce()についても学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのarray.reduce()やNumber.isFinite()、Math.cos()、Math.log()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。