Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

MapとObjectの違い

ES2015でMapが追加されました。パッと見Objectっぽいですよね。本記事ではどこが違い、どういう用途で使うのか解説したいと思います。

Mapとは

Mapとはハッシュテーブル、あるいは連想配列、辞書のことです。

const map = new Map();
map.set('foo', 42);

でもこれはObjectでもできます。

const obj = new Object();
obj.foo = 42;

MapとObjectの違い

扱えるキーの違い

Mapは「写像」を意味しています。実際、キーとして文字列以外も扱えます。Objectは文字列 or Symbolのみです。

const obj = {foo: 42};
const map = new Map();
map.set(obj, 'object');

Iterableかどうか

Mapはiterableです。そのため、forループで回すことが可能です。ObjectはIterableではありません。

for (const [key, value] of map) {
    console.log(key, value);
}

ObjectでもObject.entries()を使えば同様のことができます。

for (const [key, value] of Object.entries(obj)){
    console.log(key, value);
}

プロトタイプチェーンによる継承

Objectにはプログラマが設定したキーの他に、プロトタイプチェーンで継承したプロパティがあります。

Mapは完全にプログラマが設定したキーしか存在しません。

ロジックを組み込めるか

Objectにはメソッドを追加することができます。しかし、Mapはダメです。というか非推奨です。

person.name = 'Machi';
person.greet = function(name) {return "hello " + name + "! I'm " + this.name + "."};

デメリットのようですが、そもそもMapはただの辞書なのでロジックを組み込む必要がありません。

まとめ

ただの辞書、写像として使うならMap、ロジックを組み込む、再帰的構造にする、名前空間として使うならObjectといった感じです。