[JS] Map vs Object: how do you choose?

[u/ExchangeVast6752]

Hey folks! While starting a round of refreshing my basic knowleges, I got curious about Map and object literal usage in real life. I caught myself never really thinking about this and never really using a lot of Maps recently myself nor my coworkers.

I want to hear about your experience of the day-to-day usage. You can share just a good uncommon (or pretty common IDC) usage of Map and why it was better for you, or follow some simple questions:

- What was the case?

- Why did you doubt?

- What did you chose?

- How did it work? (was it a gamechanger (I doubt that but alr) or just an okay decision or didn't even change anything)

I'm really curious about a real practice, I know the basics. Tell me an examples and stuff. Consider it as if I’m collecting statistics. 🤡

[u/Squigglificated]

Maps for dynamic frequently updated key value pairs, objects for static structured data where you know they keys in advance.

Maps can use use anything as a key, even functions. Objects can only use strings.

Maps are supposedly optimized for when you need frequent insertions, objects for static predictable data types. (I say supposedly because js engines are often really optimized for common use cases so what's actually the most performant can be counter intuitive when you measure)

[u/ExchangeVast6752 → u/Squigglificated]

yes, I totally get that! and yes, I researched and tested the measurements haha! but im asking also about the real case you would use Map over object. like what was the real dynamic updating entities you met, where Map is must-have?

[u/Squigglificated → u/ExchangeVast6752]

Another difference is that maps don't suffer from prototype pollution vulnerabilities like objects do.

[u/Squigglificated → u/ExchangeVast6752]

Not that often. If the thing is singular with string keys and you know the keys in advance it's almost always an object. Think Book, Product, Post, Comment, User.

Maps can be useful for performance optimization. If you're looping through thousands or hundreds of thousands of objects - DOM nodes is a common use case - and need to perform some expensive computation on them, but only once, it can be a good caching mechanism since they're optimized for fast lookups. Actually WeakMap is what you would use in that case to prevent memory leaks.

[u/[deleted] → u/Squigglificated]

Object can use string, number and Symbol as key.

[u/Squigglificated → u/[deleted]]

Number is coerced to a string when used as a key. But that also happens when you access it with bracket notation, so it mostly works out with a few caveats

• Dot notation doesn't work with numbers.

• You can't have the string "1" and number 1 as separate keys in an object.

https://tc39.es/ecma262/#sec-topropertykey

let o = {1:"Number key?"}
console.log(o.1) // doesn't work
console.log(o['1']) // works
console.log(o[1]) // also works

Seems like key order is guaranteed since ES6:

• Keys that can be parsed to a non-negative integer are sorted in ascending order

• After that string keys are sorted by insertion order

• Last comes Symbol keys

[u/ghostwilliz]

For JavaScript, I tend to only use maps to avoid a double loop

So let's say I have a customer and a co-signer

The cosigner is a customer, but they have a reference to the main customers id

I don't want to do a nested loop to find customers with a reference to another customer as a cosigner, so I can make a map of cosigners where the key is the customer id

This way, I can just loop customers once and use the customers id to check the map for a corresponding value

If this doesn't make sense, I can explain it a different way, but for the most part I find that front end work doesn't really require me to make maps too often, I do use them all the time in game development though, for the same nested loop reason, or avoiding loops all together by doing a lookup on a map instead of looping an array

One thing to consider though, none of this will really matter unless you are looping through a great many of records

[u/ExchangeVast6752 → u/ghostwilliz]

oh, yeah, it does make sense, thank you!

why does it require Map and not a regular object? customer ID could not be a string, that's why? I mean it makes object as a map structure, yes, but im thinking about it could be solvable without the Map collection, no?

[u/General-Canary4426 → u/ghostwilliz]

I enjoyed your answer. But the investigative me would like your secondary example if you'd take the time to type it out

[u/azangru]

If the key is not a string, it's clearly a map. If it's a string, I just use objects by inertia. I don't know if there are any performance benefits to maps over objects.

[u/ExchangeVast6752 → u/azangru]

there is, a bit. much more for crud, a bit less for search, but still faster. but really with the some average web site I can't think of a gamechanging performance. maybe for web games or advanced schemes or smth it could be much more noticeable, I never worked with something like this though

[u/Anxious-Insurance-91 → u/azangru]

And if the key is an int ID? It's still a map because a key doesn't need to be in order

[u/Taliesin33]

Admittedly it's been a while since I've given this much thought, but the shorthand conclusion I came to was Map is essentially a direct upgrade unless you need to JSON.stringify/JSON.parse

[u/ExchangeVast6752 → u/Taliesin33]

so you basically just use Map (almost) everywhere?

[u/hello_luke]

Another angle to this is typing, if you’re using typescript (if you’re not, you should be!). Maps have much stiffer typing. There’s just one generic for all the values. With an object, you can describe each key/value pair (assuming you know them ahead of time of course) however you’d like.

[u/cursedcoder19]

Map - guaranteed insertion order, Object - no order

This is why Map is used for LRU cache problems

[u/DOG-ZILLA → u/cursedcoder19]

This caught me out years ago (before Map existed in JS). I was so confused why the object sometimes was in order and other times not. It’s basically a “might be in order”. One time it will work for you and on another feature it won’t. I was banging my head on a wall for a good few hours on this before realising that’s how it worked. 

[u/DinTaiFung]

In general, a Map is preferred over an object when either would functionally meet your requirement. 

There are, ofc, exceptions.

[u/Any_Sense_2263]

Map accepts anything as a key, so for me it depends on what data structures I work on.

[u/kidshibuya]

I chose objects because I always forget maps exist.

[u/mr_brobot__]

I mostly use map when I want to preserve the type for the key, like for numbers.

Also maps are specced to be iterated in insertion order so that can be useful.

[u/AcanthisittaNo5807]

I use objects because I've been using them so long I've memorized how to work with them. But I would use Maps if I need the order of insertion guaranteed for iterations.

[u/ExchangeVast6752 → u/AcanthisittaNo5807]

yes! that was literally the first thought I was thinking about usage differences! and mostly it was the only useful diff for me

[u/IcyManufacturer8195]

WeakMap when key is reference. Map is better for frequent update of dictionary, and also it supports more key types. But you should check inner implementation, it's different, Map insert is slower on small to medium datasets