JavaScript reduce の使い方 #3

株式会社リュディアです。JavaScript reduce の使い方 #3 です。JavaScript reduce の使い方 #1、JavaScript reduce の使い方 #2 の続きになります。掲載するソースコードはすべて GAS の開発環境で動作確認をしています。

#3 では reduce の戻り値として配列を使ってみます。JavaScript reduce の使い方 #1 で説明したように reduce は単一の値を戻り値とします。したがって複数の値を戻り値としたい場合は、何らかのデータ構造をもって単一の値とする必要があります。この例では配列を使ってみます。次の例をみてください。

function checkEvenReduce() {
 const inputArray = [ 1, 3, 10, 17, 20, 31 ] ;

 inputArray.reduce( function( accumulator, currentValue, index, array ) {
                      console.log( accumulator, currentValue, index, array ) ;
                      if ( currentValue % 2 === 0 )
                        accumulator.push( currentValue ) ;
                      return accumulator ;
                    }, [] ) ;
}

// 実行結果
// accumulator currentValue index array
// []           1            0     [ 1, 3, 10, 17, 20, 31 ]
// []           3            1     [ 1, 3, 10, 17, 20, 31 ]
// []          10            2     [ 1, 3, 10, 17, 20, 31 ]
// [ 10 ]      17            3     [ 1, 3, 10, 17, 20, 31 ]
// [ 10 ]      20            4     [ 1, 3, 10, 17, 20, 31 ]
// [ 10, 20 ]  31            5     [ 1, 3, 10, 17, 20, 31 ]

今までと同じ元配列を使って偶数の要素だけを抜き出し新配列とする関数です。JavaScript reduce の使い方 #2 でまとめた accumulator の初期値は何が設定されているかわかりますか？ [ ] つまり空の配列です。ヌル配列とも言います。実行結果を見ると、元配列の要素数が 6 で実行回数も 6 回であること、accumulator の初期値が [ ] であることもわかります。元配列のインデクス 2 の要素 10 が最初の偶数なので、push により 空配列 accumulator に追加され accumulator = [ 10 ] となります。次に元配列のインデクス 4 の要素 20 が次の偶数なので、10 のみを要素とする配列への push により accumulator = [ 10, 20 ] となります。

では最後に元配列を2次元配列にした例を示します。また reduce 自体の戻り値を returnValue に取り込んでいることも注意してください。アルファベットと数字の組を 1 つの要素とする配列を元配列とします。アルファベットの A と組みになっている数字、ここでは 50, 70, 100 の和である 220 が求める数字となります。元配列の要素数 6 と同一の実行回数の間は A と組みになっている数字のみの総和をとります。最後に reduce 全体の戻り値が 120 + 100 = 220 であることがわかると思います。

function sampleReduce() {
 const inputArray = [ ['A', 50 ], ['B', 50 ], ['C', 50 ], ['A', 70 ], ['B', 80 ], ['C', 90 ], ['A', 100 ] ] ;

 const returnValue =
 inputArray.reduce( function( accumulator, currentValue, index, array ) {
                      console.log( accumulator, currentValue, index, array ) ;
                      if ( currentValue[ 0 ]  === 'A' )
                        accumulator += currentValue[ 1 ];
                      return accumulator ;
                    }, 0 );
}

// 実行結果
// accumulator currentValue index arrray
//   0         ['A', 50 ]   0     [['A', 50], ['B', 50], ['C', 50], ['A', 70], ['B', 80], ['C', 90], ['A', 100]]
//  50         ['B', 50 ]   1     [['A', 50], ['B', 50], ['C', 50], ['A', 70], ['B', 80], ['C', 90], ['A', 100]]
//  50         ['C', 50 ]   2     [['A', 50], ['B', 50], ['C', 50], ['A', 70], ['B', 80], ['C', 90], ['A', 100]]
//  50         ['A', 70 ]   3     [['A', 50], ['B', 50], ['C', 50], ['A', 70], ['B', 80], ['C', 90], ['A', 100]]
// 120         ['B', 80 ]   4     [['A', 50], ['B', 50], ['C', 50], ['A', 70], ['B', 80], ['C', 90], ['A', 100]]
// 120         ['C', 90 ]   5     [['A', 50], ['B', 50], ['C', 50], ['A', 70], ['B', 80], ['C', 90], ['A', 100]]
// 120         ['A',100 ]   6     [['A', 50], ['B', 50], ['C', 50], ['A', 70], ['B', 80], ['C', 90], ['A', 100]]
// 220

reduce は非常に汎用的が関数で、私ども株式会社リュディアのシステム開発でもよく使います。最初は戸惑うことも多いですが、JavaScript プログラミングにおいて理解し実際に利用していただきたい機能です。

では、ごきげんよう。