JavaScript map の使い方 #2

株式会社リュディアです。JavaScript がサポートしている高階関数の1つである mapメソッド（以下、map） についてまとめてみます。第2回目です。掲載するソースコードはすべて GAS の開発環境で動作確認をしています。

JavaScript map の使い方 #1 を見てもらうと map の振る舞いを理解いただけると思います。JavaScript map の使い方 #2 では実際のプログラミングで使える例をあげていきます。まず以下の例をみてください。この例では配列の各要素に対する処理のみですので、コールバック関数の引数は1つ目「その時点での配列の要素」のみであることに注意してください。さらにJavaScript mapの使い方 #1 で使ったプログラム例との大きな違いは、returnArray に map の戻り値を使っていることです。つまり map には戻り値があります。

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

  const returnArray = inputArray.map( function( currentValue ) {
                                      return currentValue * 2 ;
                                    }
                                  ) ;
  console.log( returnArray ) ;
}

// 実行結果
// [ 2, 6, 20, 34, 40, 62 ]

map の本質は、「コールバック関数で定義された処理」を元配列の各要素に施した新規配列を戻り値とすることにあります。元配列は破壊されず新規配列を戻り値とすることにも注意してください。この例では元配列の各要素を2倍した値を要素とする新規配列を戻り値とします。実行結果より元配列は [ 1, 3, 10, 17, 20, 31 ] であるのに対し、戻り値は [ 2, 6, 20, 34, 40, 62 ] と2倍になっていることがわかります。図示すると以下のようになります。

次は条件分岐を含む例です。ここでは元配列の要素の値が10を超えている場合のみ要素の値を2倍するコールバック関数を定義しています。実行結果を見てみましょう。

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

  const returnArray = inputArray.map( function( currentValue ) {
                                      if ( currentValue > 10 )
                                        return currentValue * 2 ;
                                    }
                                  ) ;
  console.log( returnArray ) ;
}

// 実行結果
// [ undefined, undefined, undefined, 34, 40, 62 ]

実行結果を見ると最初の3つの要素が undefined となっていますね。これは currentValue > 10 に該当しないインデクス0, 1, 2 に対する処理を定義していないためです。この実行結果からわかることは、map の戻り値となる新規配列は元配列と同じ長さをもつということです。処理したい内容を図示すると以下のようになります。

undefined になっていた部分にも対応したプログラムは以下のようになります。

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

  const returnArray = inputArray.map( function( currentValue ) {
                                      if ( currentValue > 10 )
                                        return currentValue * 2 ;
                                      return currentValue ;
                                    }
                                  ) ;
  console.log( returnArray ) ;
}

// 実行結果
// [ 1, 3, 10, 34, 40, 62 ]

これで処理したい内容に合致した実行結果を得ることができました。

次の例ではコールバック関数の2つ目の引数 index も使ってみます。ここでは元配列のインデクスが4を超える要素の値に対し値を3倍しています。

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

  const returnArray = inputArray.map( function( currentValue, index ) {
                                      if ( index > 4 )
                                        return currentValue * 3 ;
                                      return currentValue ;
                                    }
                                  ) ;
  console.log( returnArray ) ;
}

// 実行結果
// [ 1, 3, 10, 17, 20, 93 ]

最後の例ではコールバック関数の3つ目の引数 array も使ってみます。配列の要素を1つずつずらした新規配列を戻り値とするプログラム例です。動作イメージとプログラムを以下に記載します。

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

  const returnArray = inputArray.map( function( currentValue, index, array ) {
                                      if ( index < inputArray.length - 1 )
                                        return array[ index + 1 ] ;
                                      return array[ 0 ] ;
                                    }
                                  );
  console.log( returnArray ) ;
}

// 実行結果
// [ 3, 10, 17, 20, 31, 1 ]

今回は実際のプログラムでも使えそうな例をあげて map の動作を説明しました。コールバック関数の3つの引数の使用例もあげました。現実のプログラムではさらに複雑な処理を行うことになりますが、今回説明した内容の組合せで実現できると思います。

では、ごきげんよう