reduceメソッドの使い方

javascript の reduce メソッドは、集計や加工処理を実行できる便利なメソッドです。以下にサンプルコードを含め、reduce メソッドの使い方を解説します。

配列を操作する場合、for 文や map などのループ処理を行うのが一般的でしたが、これらの処理を reduce メソッドを使って行うこともできます。 reduce メソッドの引数には、第 1 引数に変換前の値（今回は配列）、第 2 引数に変換後の値（求めたい値）を渡します。 reduce メソッドは、先ほどの配列を任意の数値・文字列・オブジェクトに変更できます。

以下に、reduce メソッドを使って数値を加算していくサンプルコードを示します。

const numbers = [1, 3, 5, 7, 9];
// reduceメソッドを使って合計を求める
const total = numbers.reduce(function (sum, number) {
	return sum + number;
}, 0);

console.log(total); // => 25

上記のコードでは、第 1 引数に sum を加算した値を返し、第 2 引数に 0 を渡して加算しています。このようにして、reduce メソッドを使うことで、配列を任意の加工処理を行い変換できます。 また、配列だけでなくオブジェクトの集計も可能です。

オブジェクトの集計は、以下のように行います。

const people = [
	{ name: 'Bob', age: 21 },
	{ name: 'Jack', age: 30 },
	{ name: 'John', age: 45 },
	{ name: 'Alice', age: 15 },
	{ name: 'Steve', age: 40 },
];
// reduceメソッドを使って平均年齢を求める
const average =
	people.reduce(function (sum, person) {
		return sum + person.age;
	}, 0) / people.length;

console.log(average); // => 33

上記のコードでは、people 配列の person オブジェクトの age プロパティの値を加算しています。最後に、加算した値を people 配列の要素数で割ることにより人々の平均年齢が求められました。

reduce メソッドは、配列から任意の情報を抽出したり、任意の加工処理を行ったりするのに非常に便利なメソッドです。少ないライン数で加工処理を行うことができるので、簡潔で明瞭なコードを書けるというメリットもあります。 今回は javascript の reduce メソッドを紹介しました。ユーザーからのデータを加工したり、集計処理を行いたい場合は、reduce メソッドを使いましょう。