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
 
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
 
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
 
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
 
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
 
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
 
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
 
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
 
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
 
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