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 の振る舞いとコールバック関数の引数を中心に説明しましたが、実プログラムで役に立たない例ばかりでしたね。次回は実際に使えそうなコードを使って説明していきます。
では、ごきげんよう。