JavaScript

【JavaScript】reduceメソッドの使い方

本記事では、JavaScriptのreduceメソッドの使い方について解説しています。

JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

本書情報
出版社技術評論社
著者山田 祥寛
発売日2023/2/13
ページ数624ページ
レビュー
(Amazon)
(4件)
先輩くん
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ!
後輩ちゃん
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ!

綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報
出版社オライリージャパン
著者Dustin Boswell / Trevor Foucher
発売日2012/6/23
ページ数260ページ
レビュー
(Amazon)
(620件)
先輩くん
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!

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です!

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村