JavaScriptでMapを使うススメ

“Map”はJavaScriptでマップ型(=連想配列)を扱うためのオブジェクトで、ES2015より採用されました。

const isbn = new Map();
isbn.set(4088824954,"鬼滅の刃 23");
isbn.set(4088917359,"キングダム 60");
isbn.set(4065220297,"進撃の巨人 33");

console.log(isbn.get(4088917359)); // キングダム 60

new Map()で新しいマップを作成してset/getメソッドで要素の追加/取得を行うことができます。

マップとして使うObjectの問題点

Map採用前はマップ型を実現するためにObjectが利用されていました。

しかし、いくつか問題点がありました。

  • protoypeオブジェクトが含まれるため、prototypeのキーと衝突する可能性がある
  • キーとして使えるのは文字列(String)かSymbol
  • for-inで順序が保証されない場合がある。Object.keysを使った反復処理も面倒
  • 要素を数えるのが面倒

Mapを使うメリット

Mapはこれらの問題点をすべて解決しています。

Mapは意図しないキー衝突を回避できる

Map は明示的に設定したキーを除き、既定では何もキーを持っていません。そのため、Objectのようにキーが衝突することはありません。

あらゆる値をMapのキーに指定できる

Objectは文字列とSymbolのみでしたが、Mapでは数値や配列といった値をキーに指定することができます。

for-ofで順序が保証される

Mapはfor-ofで反復処理を行うことができます。この時、Mapへ要素を挿入した順に処理が行われます。

for(const [key,value] of isbn){
  console.log(`${value}のISBNコード : ${key}`);
}

// 鬼滅の刃 23のISBNコード : 4088824954
// キングダム 60のISBNコード : 4088917359
// 進撃の巨人 33のISBNコード : 4065220297

反復処理を簡単に扱える

forEachを使えばMapの各要素に対してコールバック関数を実行することができます。

isbn.forEach((value,key)=>{
  console.log(`${value}のISBNコード : ${key}`);
});

// 鬼滅の刃 23のISBNコード : 4088824954
// キングダム 60のISBNコード : 4088917359
// 進撃の巨人 33のISBNコード : 4065220297

要素の数を簡単に数えられる

Mapに追加された要素数はsizeプロパティで簡単に取得することができます。

console.log(isbn.size);  // 3

 

Mapの登場によりJavaScriptで連想配列を扱いやすくなりました。Mapの詳細・互換性についてはこちらを参照ください。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map

Related Posts