When to use Object map vs Map class in ES6 [duplicate]

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
– Aluan Haddad, Commented Sep 16, 2018 at 15:09
Actually, I'm slightly mistaken. You can get the keys with map.keys. — Aluan Haddad
– Aluan Haddad, Commented Sep 16, 2018 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
– Jonathan, Commented Sep 16, 2018 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
– Bergi, Commented Sep 17, 2018 at 13:25

Attacktive · Accepted Answer · 2024-02-28 12:58:11Z

12

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 vs. Maps 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.

edited Feb 28, 2024 at 12:58

Attacktive

6191 gold badge12 silver badges28 bronze badges

answered Sep 16, 2018 at 14:44

Jonathan

33k40 gold badges144 silver badges209 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Aluan Haddad Over a year ago

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

Jonathan Over a year ago

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.

Aluan Haddad Over a year ago

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.

Buggy Over a year ago

Also worth mentioning is that Map is not deserialized by default

Brian M. Hunt Over a year ago

As of ES2020 Object.keys are ordered. stackoverflow.com/a/30919039/19212

|

Collectives™ on Stack Overflow

When to use Object map vs Map class in ES6 [duplicate]

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related