本記事では、JavaScriptのreduceメソッドの使い方について解説しています。
JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで
| 出版社 | 技術評論社 |
|---|---|
| 著者 | 山田 祥寛 |
| 発売日 | 2023/2/13 |
| ページ数 | 624ページ |
| レビュー (Amazon) | (4件) |
綺麗なコードが書けるようになる！
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
| 出版社 | オライリージャパン |
|---|---|
| 著者 | Dustin Boswell / Trevor Foucher |
| 発売日 | 2012/6/23 |
| ページ数 | 260ページ |
| レビュー (Amazon) | (620件) |
reduceメソッドの使い方
reduceメソッドの基本的な使い方は以下のとおりです。
Array.reduce(callbackfn (previousValue, currentValue, currentIndex, array),initialValue)- Array：reduceメソッドを使用したい対象の配列を指定
- callbackfn：コールバック関数
- previousValue(第一引数)：currentValueよりもひとつ前の要素またはinitialValueにセットされた値または関数の結果を保持
- currentValue(第二引数)：現在処理されている要素
- currentValue(第三引数)：現在処理されている要素のインデックス番号(添え字)
- currentValue(第四引数)：Arrayで指定した対象の配列
- initialValue：初期値(省略可能)
かなり多くの引数が出てきて、困惑している人も多いと思いますが大丈夫です。一つずつ引数に渡る値を確認して読み解いていきましょう。
const numArr = [10, 30, 50];
let sum = numArr.reduce((previousValue, currentValue, currentIndex, array) => {
console.log(`previousValue:${previousValue}`);
console.log(`currentValue:${currentValue}`);
console.log(`currentIndex:${currentIndex}`);
console.log(`array:${array}`);
return previousValue + currentValue;
});
/* コンソールログ *
*
* previousValue:10
* currentValue:30
* currentIndex:1
* array:10,30,50
*
* previousValue:40
* currentValue:50
* currentIndex:2
* array:10,30,50
*
*/previousValue(第一引数)の値を確認すると、配列の先頭にある10の値が渡されていることが確認できます。構文解説に記載されている「currentValueよりもひとつ前の要素」になります。ということは、currentValue(第二引数)には、previousValueの次にあたる値が代入されるということなので、確認してみると予想通り30の値が渡されていることが確認できます。
currentIndex(第三引数)には、currentValueが代入されている配列のインデックス番号が渡されるので1の値が確認できます。最後のarray(第四引数)には、reduceメソッドに指定した配列そのものが渡されるので10,30,50の値が確認できます。
2週目を確認すると、previousValueの値が40になっていることが確認できます。これは、previousValueの値が「currentValueよりもひとつ前の要素」→「関数の結果を保持」に変わるからです。つまり、previousValue(10) + currentValue(30)された40の値が結果としてpreviousValueに渡されます。
reduceメソッドややこしいですね。。しかし、まだ終わりではなくreduceメソッドはinitialValue(初期値)を指定すると1週目に渡される引数が異なります。
const numArr = [10, 30, 50];
let sum = numArr.reduce((previousValue, currentValue, currentIndex, array) => {
console.log(`previousValue:${previousValue}`);
console.log(`currentValue:${currentValue}`);
console.log(`currentIndex:${currentIndex}`);
console.log(`array:${array}`);
return previousValue + currentValue;
}, 0);
/* コンソールログ *
*
* previousValue:0
* currentValue:10
* currentIndex:0
* array:10,30,50
*
* previousValue:10
* currentValue:30
* currentIndex:1
* array:10,30,50
*
* previousValue:40
* currentValue:50
* currentIndex:2
* array:10,30,50
*
*/上記のコードは、initialValueに0を指定しています。1つ目のコードと実行結果は全く同じですが、コンソールログを確認すると引数に渡される値が先ほどと異なるのが分かります。
どのように渡される引数が変わったのか、簡単に言ってしまえば一つずつ後ろにずれているだけです。previousValue(第一引数)にはinitialValueに指定した値が渡され、currentValue(第二引数)には配列の先頭にある10が渡されます。
おまけ：配列内の数値を足すだけではない
reduceメソッドは配列内の数値を加算していくサンプルコードが多いですが、previousValue(第一引数)に関数の結果を保持する性質を利用し、以下のような処理も実装することが出来ます。
const numArr = [30, 20, 50, 40, 80, 70];
let max = numArr.reduce((previousValue, currentValue) =>
previousValue > currentValue ? previousValue : currentValue
);
console.log(`配列で一番大きい数値は${max}です！`); // => 配列で一番大きい数値は80です！
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 
