本記事では、JavaScriptのreduceメソッドの使い方について解説しています。
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
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です！
