When to use Object map vs Map class in ES6

Question

Suppose I wanted to create a dictionary of, say, car makes to one or more models.

It seems that I could do this in two different ways in ES6.

1. Create an Object map:

Code:

const makesAndModels = {
    "mazda": [
        { name: "Miata" },
        { name: "626" }
    ],
    "toyota": [
        { name: "Camry" }
    ],
    ...
};

2. Create an ES6 Map instance:

Code:

const makes = {
    mazda: { name: "Mazda" },
    toyota: { name: "Toyota" }
};

const makesAndModels = new Map([
    [makes.mazda, [
        { name: "Miata" },
        { name: "626" }
    ]],
    [makes.toyota, [
        { name: "Camry" }
    ]],
    ...
]);

What are the key differences and pros/cons between the above two methods?

The map you create in the example has a serious problem: you cannot get the values by key. Because maps compare keys using standard equality and this cannot be customized, `makesAndModels[{name: "Mazda"}]` will always evaluate to `undefined`. — Aluan Haddad, Sep 16 '18 at 15:09
Actually, I'm slightly mistaken. You can get the keys with map.keys. — Aluan Haddad, Sep 16 '18 at 15:16
I’m thinking of generalising this question because I think it actually applies to Javascript in general, not only Typescript. Anyone agree? Upvote this comment if yes? — Jonathan, Sep 16 '18 at 20:37
Your second code makes no sense. To be comparable to the first, it should use strings as keys of the `Map` as well — Bergi, Sep 17 '18 at 13:25

score 10 · Accepted Answer · answered Sep 16 '18 at 14:44

10

Here are the differences I've found thus-far:

Map allows you to use any type for the key. So if you want, you can store an entire object in the key, where, for an index signature, Typescript currently only supports string or number keys.
Map is only natively supported in ES6. If targeting ES5 or lower, you need to provide a polyfill.

Not sure if these are exhaustive though.

Edit: Just discovered an Objects and maps compared section in the Mozilla docs, which looks pretty comprehensive.

It includes the following items not mentioned above:

The keys in Map are ordered while keys added to object are not. Thus, when iterating over it, a Map object returns keys in order of insertion.
You can get the size of a Map easily with the size property, while the number of properties in an Object must be determined manually.
A Map is an iterable and can thus be directly iterated, whereas iterating over an Object requires obtaining its keys in some fashion and iterating over them.
An Object has a prototype, so there are default keys in the map that could collide with your keys if you're not careful. As of ES5 this can be bypassed by using map = Object.create(null), but this is seldom done.
A Map may perform better in scenarios involving frequent addition and removal of key pairs.

answered Sep 16 '18 at 14:44

Jonathan

32,202
38
137
208

2

The primary advantage of Maps, being able to use any value as a key, is diminished significantly by the lack of customizable equality. The API for both Set and Map is pathetic. Another failure of the Maximally Minimal approach of TC39 – Aluan Haddad Sep 16 '18 at 15:13
Noted. I wonder if it's worth still using Map, in hopes that the API will improve, so that I don't have to change all my code down the track. Or whether it's a better overall approach to just use the 'object-map' approach. – Jonathan Sep 16 '18 at 15:17
1

Depends on the use case. If string, number, or symbol keys are all you need, use an object for ease of use, especially at API boundaries like function parameters. If you need to use other kinds of values as keys then you must use a map. Also WeakMap offers functionality, whatever the key requirements, which simple objects cannot provide. A WeakMap is very powerful but you likely won't need it often. – Aluan Haddad Sep 16 '18 at 15:24
3

Also worth mentioning is that `Map` is not deserialized by default – Buggy Sep 16 '18 at 15:27
@Buggy Quite so. JSON has no way to express a `Map` or a `Set`. It also can't express symbols for similar reasons – Aluan Haddad Sep 16 '18 at 18:11
2

As of ES2020 Object.keys are ordered. https://stackoverflow.com/a/30919039/19212 – Brian M. Hunt Oct 24 '20 at 14:44

When to use Object map vs Map class in ES6

1 Answers1

Related