Why should I use Map() when key is unknown until run time?

Question

The MDN documentation on Map says:

If you're still not sure which one to use [object or map], ask yourself the following questions:

• Are keys usually unknown until run time, do you need to look them up dynamically?

• [...]

Those all are signs that you want a Map for a collection. [...] https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Map

But I can set keys for objects dynamicaly with square brackets too (ie. myObject[dynamicKey]).

Is there another reason for using maps when I have dynamic keys other than just for "fitting the Maps purpose" of being a collection?

Answer 1

The reason for using Map with arbitrary keys is to avoid name collisions. E.g. with plain object:

let a = {};

function foo(key) {
  console.log(a[key] === undefined ? "Unset" : "Set");
  a[key] = "Hi";
  console.log(a[key]);
  console.log("" + a);
}

foo("goodKey");  // Unset, Hi, [object Object]
foo("toString"); // Set, Hi, TypeError: can't convert a to primitive type

Above we collided with Object.prototype.toString.

With Map we're fine:

let a = new Map();

function foo(key) {
  console.log(a.get(key) === undefined ? "Unset" : "Set");
  a.set(key, "Hi");
  console.log(a.get(key));
  console.log("" + a);
}

foo("goodKey");  // Unset, Hi, [object Map]
foo("toString"); // Unset, Hi, [object Map]

Answer 2

It's related to an earlier point in the same document:

An Object has a prototype, so there are default keys in the map.

Traditionally when you iterate through an object (which is what they mean with "look [keys] up dynamically") you'll need to filter out prototype properties:

for( var key in obj ) {
    if( obj.hasOwnProperty(key) ) {
        // do something
    }
}

When you iterate through a Map you can skip the extra check because it doesn't have its own properties mixed together with the prototype properties.

Answer 3

Object only support numbers and strings as keys. Maps also support object as key. If your key is unknown until run time you may not be sure what type the key is. So map is safer.

I think you shouldn't use Map when you transpiling your ECMAScript 6 code to ECMAScript 5. The polyfill needed to use Map is not good for performance.

Answer 4

But there is still a problem with assinging values to an object. The reason is that keys are always converted to strings in objects.

For example:

let author1 = { name: "Name1" };
let author2 = { name: "Name2" };

let mostRecentReply = {};

mostRecentReply[author1] = "Test1";
mostRecentReply[author2] = "Test2";

console.log( mostRecentReply[author1] );
console.log( mostRecentReply[author2] );

will output the following:

Test2
Test2

Using a Map solves the problem:

let mostRecentReply = new Map();
mostRecentReply.set(author1, "Test1");
mostRecentReply.set(author2, "Test2");

console.log( mostRecentReply.get(author1) );
console.log( mostRecentReply.get(author2) );

will output:

Test1
Test2