JavaScript map の使い方 #1

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

JavaScript の 高階関数は慣れると便利なのですが、最初はとっつきにくい機能の1つです。高階関数の難しいことは後回しにし、今回は map に絞って具体的な説明をしていきます。まず以下のサンプルをみてください。

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

  for ( let i = 0; i < inputArray.length; i++ )
    console.log( inputArray[ i ], i, inputArray ) ;
}

// 実行結果
// 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 ]
// 17           3     [ 1, 3, 10, 17, 20, 31 ]
// 20           4     [ 1, 3, 10, 17, 20, 31 ]
// 31           5     [ 1, 3, 10, 17, 20, 31 ]

べたな記述ですが、整数の配列 inputArray を準備し、for ループで配列の要素、配列のインデクス、配列全体を表示するプログラムです。次に map を使って同じ動作をするプログラムを書いてみます。

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

  inputArray.map( function( currentValue, index, array ) {
                  console.log( currentValue, index, array ) ;
                } );
}

// 実行結果
// 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 ]
// 17           3     [ 1, 3, 10, 17, 20, 31 ]
// 20           4     [ 1, 3, 10, 17, 20, 31 ]
// 31           5     [ 1, 3, 10, 17, 20, 31 ]

一言で説明すると「map により配列 inputArray の各要素に関数 function を適用する」となります。ここで function はコールバック関数と呼ぶもので、3つの引数の順序が決まっています。この例では currentValue, index, array という変数名を使っていますが a, b, c であっても問題ないです。ただし引数の順序は重要で前から「その時の配列の要素」「その時の配列のインデクス」「配列全体」と決められています。

実行結果を見てみましょう。 currentValue と index は各配列の要素とインデクスなので順に出力されており、ループと同じように動作していることがわかります。3つ目の引数 array は元の配列 inputArray と同じものが保持されていることがわかります。この例は最初なのでコールバック関数で使える3つの引数をすべて記載しましたが、例えば3つめの配列 array が処理に不要であれば省略可能です。

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

  inputArray.map( function( currentValue, index ) {
                  console.log( currentValue, index ) ;
                });
}

// 実行結果
// currentValue index
//  1           0
//  3           1
// 10           2
// 17           3
// 20           4
// 31           5

同様に2つ目の引数 index も不要であれば省略可能です。しかしコールバック関数では引数の順序が重要なので、最初の引数 currentValue のみ省略する、あるいは2つ目の引数 index のみを省略するといった使い方はできません。

今回は map の振る舞いとコールバック関数の引数を中心に説明しましたが、実プログラムで役に立たない例ばかりでしたね。次回は実際に使えそうなコードを使って説明していきます。

では、ごきげんよう。