DEV Community

Cover image for 5 Reasons To Choose JavaScript Maps Over Objects For Storing Key-Value Pairs(With Examples)

5 Reasons To Choose JavaScript Maps Over Objects For Storing Key-Value Pairs(With Examples)

Gus Pear 🍐 on January 21, 2023

At 18 I started my "career" as an IT support guy. At 20 I was flying 80 hours per month as a flight attendant. At 22 I got my commercial airplane p...
Collapse
Β 
tracygjg profile image
Tracy Gilmore β€’

Hi Gus,
Using a Map over an Object is very often a wise choice but for some reason one I seldom employ; I have no justification other than set in my ways.
One thing to consider is JSON, Objects are supported directly but Maps are not.
Regards, Tracy

Collapse
Β 
gustavupp profile image
Gus Pear 🍐 β€’

Hey Tracy! Good to see you here.

The same goes for me. That is one of the reasons why I wrote the post haha.

There is also the case where most of your colleagues might not be used to it, than you'd prefer to stick with regular objects not to raise eyebrows haha..

Thanks for stopping by again, and have a great week!

Collapse
Β 
leob profile image
leob β€’

Isn't speed/performance another reason to prefer Map? I've heard that Map is faster with lookups, especially when the number of items is larger.

Collapse
Β 
gustavupp profile image
Gus Pear 🍐 β€’

Hey Leopb! how are you? thanks for leaving a comment!

You're right, Map seems to be faster in most cases, specially for reading.

There is a video in the first section with some tests.

Have a great week my dude!

Collapse
Β 
peerreynders profile image
peerreynders β€’ β€’ Edited

The video doesn't actually cover a map.get(key: string) vs objectMap.key access comparison.

Given the impact that performance of the object.property lookup has on the overall JS runtime performance I would be surprised if map.get(key: string) is faster than object.property for lookup over a [key, value] set not exceeding the size of the number of properties found on a typical object.

Map is optimized for [key, value] deletion and insertion (while maintaining the insertion order for iteration which is something objects per spec don't guarantee even though they often do) and efficiently handling larger [key, value] sets.

Meanwhile an object literal lookup will often perform similar to a switch statement on a string value.

Thread Thread
Β 
gustavupp profile image
Gus Pear 🍐 β€’

Hey Peerreynders! Thanks for you insighful comment!

Apperantly Map outperforms Object in all operations unless you have small integer, array-indexed keys according to this article that run multiple tests.

Have an awesome week!

Thread Thread
Β 
peerreynders profile image
peerreynders β€’ β€’ Edited

The article discusses insertion, deletion, and iteration performance, the scenarios Map is specifically optimized for. Lookup/access performance isn't discussed.

In this test objects are faster on Chrome 109 (V8) while maps are faster on Firefox 109.0 (SpiderMonkey). But once the number of entries increases to 20-30 map performance catches up.

Thread Thread
Β 
gustavupp profile image
Gus Pear 🍐 β€’

I didn't know about the jsbench website! Thanks for sharing the link Peerreynders!

That is an in-depth test.

Thanks once again.

Collapse
Β 
brense profile image
Rense Bakker β€’

Great post! No native serialization is a big downside though. In modern apps, a lot of data structures go from/to Json APIs, so having data structures with native serialization is extremely convenient. The benefits are there, but only for data that doesn't need to be serialized I think.

Collapse
Β 
gustavupp profile image
Gus Pear 🍐 β€’

Hey Rense! thanks for stopping by.

100% with you, no native serialization/parsing is a big downside. That's one of the reasons I'd choose plain objects.

Have a great week!

Collapse
Β 
elliot_brenya profile image
Elliot Brenya sarfo β€’

Great post, it's clear that you have a lot of experience and knowledge about the topic. Your examples and explanations make it easy to understand the differences between Map and Object.

Have you tried experimenting with the different use cases of Map and Object in your projects? It would be great to see some examples of how you have utilized these data structures in your own work.

Collapse
Β 
gustavupp profile image
Gus Pear 🍐 β€’

Hey Elliot! how are you? Thanks for taking the time to comment!

I am not that experienced at all lol. I am just curious.

And yes I have used it a few times. The second example at the end of the post is actual code I used in a project I build when buidling my portfolio.

Have a great week man!

Collapse
Β 
raibtoffoletto profile image
RaΓ­ B. Toffoletto β€’

Great research and article πŸŽ‰

Collapse
Β 
gustavupp profile image
Gus Pear 🍐 β€’

Thanks a lot Rai! Happy to hear it

Collapse
Β 
frandev profile image
Franco β€’

Very nice article, thanks a lot! I will use Map and see how that goes.

Collapse
Β 
gustavupp profile image
Gus Pear 🍐 β€’

I am happy that you liked it Franco! Come back and let me know how it went

Collapse
Β 
easyjobber profile image
Easyjobber : le site de jobbing en France β€’ β€’ Edited

Great post with good examples and explanations

Collapse
Β 
gustavupp profile image
Gus Pear 🍐 β€’

I am super glad you found it useful Easyjobber!

Passe une bonne semaine!

Collapse
Β 
ahamsammich profile image
Andre Hammons β€’

Thank you for the post! I don't didn't really understand the difference until reading this. I definitely assumed they were the same thing.

Collapse
Β 
gustavupp profile image
Gus Pear 🍐 β€’

I am happy to hear that my post helped to clarify the differences Andre!

That is what makes my day.

Thanks for taking the time to leave a comment and have an awesome week.

Collapse
Β 
faaktap profile image
Fakie Tap β€’

Nice explanation. Maps don't allow duplicates. Which is a good reason to use them sometimes.
Did not known about new object(null)
Good to know.

Thanks

Collapse
Β 
gustavupp profile image
Gus Pear 🍐 β€’

Hey Frakie Tap! I am glad you got some value out of it.

Thanks for taking the time to leave a comment!

have a great week my dude

Collapse
Β 
niza profile image
Ebenezer Enietan (Niza) β€’ β€’ Edited

Nice work Gus,
I imagine using a map with my key and/or values as functions if the exact their values needs to be calculated at a later time in my logic?... still thinking

Collapse
Β 
gustavupp profile image
Gus Pear 🍐 β€’

Hey Niza!! thanks for leavaving a comment man!

Not 100% sure what you mean though.. haha

Have a great week man

Collapse
Β 
officialbidisha profile image
Bidisha Das β€’

One of the best articles so far. Was waiting for this.

Collapse
Β 
gustavupp profile image
Gus Pear 🍐 β€’

Wow, you just made my day Bidisha!

I am glad it was helpful!

See you around.

Collapse
Β 
awaisalwaisy profile image
Alwaisy al-waisy β€’

map is more like an array and modern data type.

Collapse
Β 
gustavupp profile image
Gus Pear 🍐 β€’

Thanks for commenting Al-waisy!

Collapse
Β 
kumarkalyan profile image
Kumar Kalyan β€’

Helpful article @gustavupp

Collapse
Β 
gustavupp profile image
Gus Pear 🍐 β€’

I am very glad it was helpful Kumar!

Collapse
Β 
ernazar151020 profile image
Ernazar β€’

Thanks

Collapse
Β 
gustavupp profile image
Gus Pear 🍐 β€’

Thank you Ernazar for leaving a comment!

Collapse
Β 
the_yamiteru profile image
Yamiteru β€’

Hey I think you've missed a very important point.

Under the hood objects strongly favor static vs dynamic shapes/size. This means that adding or deleting keys in objects is very slow compared to maps which are designed for exactly this.

Collapse
Β 
barisroboplas profile image
baris-roboplas β€’ β€’ Edited

except for a few things(non-technical), great post and also great informative comments