JavaScriptのMapとWeakMapの違いとは？特徴と使い分けのポイントを解説

MapとWeakMapの主な違い

MapとWeakMapは、どちらもキーと値のペアを格納するコレクションであり、基本的な仕組みは共通しています。しかし、両者にはいくつかの重要な違いがあります。

1) WeakMapはオブジェクトのみをキーとして受け付けます。一方、Mapはオブジェクトに加えて、文字列や数値などのプリミティブ型もキーとして使用できます。

2) WeakMapでは、キーとして使われているオブジェクトへの参照が他に存在しなくなると、そのオブジェクトはガベージコレクションによって自動的に回収されます。そのため、WeakMapにはキーの一覧を取得する手段がありません。対してMapには、Map.prototype.keys() のようにキーを取得するためのメソッドが用意されています。

3) WeakMapにはsizeプロパティが存在しません。

MapとWeakMapの比較一覧

Mapの使い方

Mapは、文字列・数値・オブジェクトなど、データ型を問わず任意のキーに対して値を関連付けることができるコレクションです。

サンプルコード

<script>
// 新しいMapオブジェクトを作成
var map = new Map();

// キーとして使用するオブジェクトを定義
var objKey = { name: 'tutorialspoint' };

// 文字列をキー、文字列を値とする要素を追加
map.set('first', 'a');

// 数値をキー、配列を値とする要素を追加
map.set(3, ['c']);

// オブジェクトをキー、数値を値とする要素を追加
map.set(objKey, 3);

// 配列をキー、文字列を値とする要素を追加
map.set(['add', 'mapping'], 'd');

// キー「2」を持つ要素が存在するか確認 → false
console.log(map.has(2));

// キー「first」を持つ要素が存在するか確認 → true
console.log(map.has('first'));

// キー「first」の要素を取得 → "a"
console.log(map.get('first'));

// objKeyをキーとする要素を取得 → 3
console.log(map.get(objKey));

// 存在しないキー「empty」で取得 → undefined
console.log(map.get('empty'));

// Mapのサイズを取得 → 4
console.log(map.size);

// すべての要素を削除
map.clear();
console.log(map.size); // → 0
</script>

実行結果

false
true
a
3
undefined
4
0

WeakMapの使い方

次の例からわかるように、WeakMapはオブジェクト（関数を含む）のみをキーとして受け付け、文字列や数値などのプリミティブ値はキーとして使用できません。

サンプルコード

<script>
// 新しいWeakMapオブジェクトを作成
var weakMap = new WeakMap();

// キーとして使用するオブジェクトを定義
var obj4 = { d: 4 };
var obj5 = { e: 5 };

// オブジェクトをキー、文字列を値とする要素を追加
weakMap.set(obj4, 'fourth');
weakMap.set(obj5, 'fifth');

// 関数をキー、数値を値とする要素を追加
weakMap.set(function () {}, 7);

// obj4をキーとする要素が存在するか確認 → true
console.log(weakMap.has(obj4));

// obj4をキーとする要素の値を取得 → "fourth"
console.log(weakMap.get(obj4));

// obj4をキーとする要素を削除 → true
console.log(weakMap.delete(obj4));
</script>

実行結果

true
fourth
true

使い分けのポイント

キーとして文字列や数値を使用したい場合、要素数を把握したい場合、あるいはコレクション全体を反復処理したい場合には、Mapが適しています。一方、DOM要素などオブジェクトに追加のデータを関連付けたいものの、そのオブジェクトが不要になった際にメモリリークを発生させたくない場合には、WeakMapが最適な選択肢となります。