【JavaScript入門】配列のmapメソッドの使いどころ

配列（Array）の mapメソッドを使用すると、配列の要素に対して繰り返し処理を行うことができます。

また、mapメッドの特徴として、処理した結果は 新しい配列 として返されます。

基本的な動作

次の例では、変数 array_bef の各要素に対して、100 を加算した結果を新しい配列として取得しています。

この結果から、元にした配列 array_bef の値が変わっていないことが分かります。

var array_bef = [1,2,3,4,5];

var array_aft = array_bef.map(function(elem){
  return elem + 100;
});

console.log(array_bef); // 1,2,3,4,5
console.log(array_aft) // 101,102,103,104,105

var array_bef = [1,2,3,4,5];

var array_aft = array_bef.map(function(elem){

return elem + 100;

});

console.log(array_bef); // 1,2,3,4,5

console.log(array_aft) // 101,102,103,104,105

また、次のように５つある配列のうち、３つめまで処理を行なった場合、残りの要素は undefined になります。

var array_bef = [1,2,3,4,5];

var array_aft = array_bef.map(function(elem, idx){
  if( idx < 3 ){
    return elem + 100;
  }
});

console.log(array_bef); // 1,2,3,4,5
console.log(array_aft) // 101, 102, 103, undefined, undefined

var array_bef = [1,2,3,4,5];

var array_aft = array_bef.map(function(elem, idx){

if( idx < 3 ){

return elem + 100;

}

});

console.log(array_bef); // 1,2,3,4,5

console.log(array_aft) // 101, 102, 103, undefined, undefined

パフォーマンス

mapメソッドは、処理結果を新しい配列として返します。

そのため、元となる配列を直接変更する場合よりも、メモリ消費が多くなると思われます。

次のように、単純なfor文と mapメソッドを使った時のメモリ使用量を比べてみました。
（array_bef変数には、1000,10000,10000の要素を生成しました。）

// 各要素の値を10倍する
// for文
for( var i = 0; i < array_bef.length; i++ ){
  array_bef[i] *= 10;
}

// mapメソッド
var array_aft = array_bef.map(function( elem ){
  return elem *= 10;
});

// 各要素の値を10倍する

// for文

for( var i = 0; i < array_bef.length; i++ ){

array_bef[i] *= 10;

}

// mapメソッド

var array_aft = array_bef.map(function( elem ){

return elem *= 10;

});

※ メモリ使用量はchromeのデベロッパーツール（Memory）で計測

配列の要素 = 1000 のメモリ使用量

for文：0.4MB
mapメソッド：0.4MB

配列の要素 = 10000 のメモリ使用量

for文：0.6MB
mapメソッド：0.7MB

配列の要素 = 100000 のメモリ使用量

for文：2.2MB
mapメソッド：2.9MB

この結果から、要素数が10000 くらいまでですと、大差は無いように見受けられます。

ただ、今回の処理は単純な内容なので、処理内容によっては大きく変わるかもしれません。

そのため、mapメソッドは

・元となる配列の値はそのまま
・処理結果は新しい配列で受け取りたい

という用途でのみ使用をおすすめします。

参考サイト

MDN Array.map