JavaScriptのreduce()を使ってみる

JavaScriptのreduce()メソッドを使ってみます。

サンプルコード

reduce()メソッドは指定した配列内の各値に対して、コールバック関数で指定した処理を行います。
その処理の際、1つ前の値の処理結果を取得できるので、配列内の値の和の取得などができます。

const arr = [1, 2, 3, 4];

const result = arr.reduce(function(previousValue, currentValue, currentIndex, array) {
	console.log(previousValue, currentValue, currentIndex, array);
	return previousValue + currentValue;
});

console.log('result', result);
// expected output: 10

この場合のconsoleの出力結果は以下のようになります。

1 2 1 [1, 2, 3, 4]
3 3 2 [1, 2, 3, 4]
6 4 3 [1, 2, 3, 4]
result 10

reduce()のデモページ

reduce()には第一引数にコールバック関数(callbackFn)、第二引数にはコールバック関数が初めて呼び出された時の初期値(initialValue)を設定できます。

第一引数のコールバック関数は4つの引数を持ちます。

先ほどの例だとinitialValueが設定されていなかったので、設定したパターンも試してみます。

const arr = [1, 2, 3, 4];

const result = arr.reduce(function(previousValue, currentValue, currentIndex, array) {
	console.log(previousValue, currentValue, currentIndex, array);
	return previousValue + currentValue;
}, 5);

// 5 + 1 + 2 + 3 + 4
console.log('result', result);
// expected output: 15

先ほどの例では1回目のpreviousValueは配列1番目の「1」が入り、処理自体は2番目の「2」から3回行われましたが、今回の場合は1回目のpreviousValueは初期値で設定した「5」が入り、処理自体は配列1番目の「1」から4回行われました。

5 1 0 [1, 2, 3, 4]
6 2 1 [1, 2, 3, 4]
8 3 2 [1, 2, 3, 4]
11 4 3 [1, 2, 3, 4]
result 15

reduce()のデモページ2

initialValueで空配列やオブジェクトを渡して、各値を処理して追加して別途配列を作成するといった使い方もできます。

const arr = [
	{
		"title": "titleC",
		"date": "2021-11-21",
		"body": "bodyC"
	}, {
		"title": "titleB",
		"date": "2021-11-20",
		"body": "bodyB"
	}, {
		"title": "titleA",
		"date": "2021-11-14",
		"body": "bodyA"
	}
];

const result = arr.reduce(function(previousValue, currentValue, currentIndex, array) {
	previousValue.push({
		"title": currentValue.title,
		"date": currentValue.date
	});
	return previousValue;
}, []);

console.log('result', result);

reduce()のデモページ3
他にも色々な使い方ができそうです。