Maps vs. Objects in JavaScript - What's the Difference?

In today's video, we will look at the difference between Maps and Objects in JavaScript. You may be more familiar with objects, but both data structures allow you to store key-value pairs in JavaScript but with some key differences.
Converting a Map to JSON:
stackoverflow.com/questions/2...
🏫 My Udemy Courses - www.udemy.com/user/domenic-co...
🎨 Download my VS Code theme - marketplace.visualstudio.com/...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #javascript

[@rmnkot]

Also it's possible to use Object.entries() for your loop case and get the benefit of destructuring as for the Map example
for (let [k,v] of Object.entries(o)) {
console.log(k, '=>', v)
}

[@dennisorbison7318]

Also the thing with Maps, you are guaranteed order in the order of insertion. you wont get that with objects.

[@samuelmoncarey7183]

To stringify a Map jou can create an Object from the Map's entries (it might only work with stringy keys)
console.log(JSON.stringify(Object.fromEntries(personMap.entries())));

[@angryman9333]

I love JS and ur videos

[@neutralitat2570]

JSON.stringify(Object.fromEntries(yourMap))

[@montebont]

IMHO Maps work best for data structures with 2 or more dimensions.
In the example above it would be difficult to have an indexed collection of PersonObjects because name is not suitable as a primary key..
I use Maps for in-memory databases with unique keys that link to rows in a form. Keys are generally Base36(time()) which make them unique

[@nicolashumbert8344]

5:20 I'm currently exploring solutions to create a huge booking calendar and I've tried using dayjs objects as keys (with data held by any date as value) and it works wonders so far.

[@moe9647]

you need to give practical examples ,about using Maps , use cases . Very cool video thanks mate

[@Microphunktv-jb3kj]

when you're dealing with loads of key-value data, hash maps... Maps Are Iterable , Objects are not(so easily)
Maps can be merged with arrays and converted to arrays... built in .size method
it has downside too tho, no native method for serialization and parsing...
const shoppintCart = [
{ price: 10, amount: 1 },
{ price: 15, amount: 3 },
{ price: 20, amount: 2 },
]
// original code
shoppintCart.reduce(
(accumulator, currentItem) => {
return {
totalItems: accumulator.totalItems + currentItem.amount,
totalPrice:
accumulator.totalPrice + currentItem.amount * currentItem.price,
}
},
{ totalItems: 0, totalPrice: 0 } //initial value object
)
// { totalItems: 6, totalPrice: 45 }
// with map
shoppintCart.reduce(
(accumulator, currentItem) => {
accumulator.set('totalItems', accumulator.get('totalItems') + currentItem.amount);
accumulator.set('totalPrice', accumulator.get('totalPrice') + currentItem.price);
return accumulator;
},
new Map([['totalItems', 0], ['totalPrice', 0]])
)
// { 'totalItems' => 6, 'totalPrice' => 45 }

[@souravrouth5333]

Explained very well but it would have been more better if you could atleast show an example of map's usecase.. although loved the explanation ❤

[@jijieats]

how do Maps work with typescript? and can be they turned into JSON?

[@Microphunktv-jb3kj]

maps don't have native method for serialization and parsing
U have to use Array method.
const map1 = new Map([
[1, 2],
[2, 3],
[4, 5]
]);

const arr = Array.from(map1);
const serialized = JSON.stringify(arr);

[@goldmikanik8274]

Well I didn't see the benefits of the Map, actually I am more convinced to use regular Objects now 😅

[@Microphunktv-jb3kj]

come back after you have to loop over deeply nested objects :D

[@danielnadar75]

You are amazing brother! Thanks for sharing for knowledge with us! I am surprised that this channel is so underrated! I am taking your rust course right now and it's one of the best and I am going to share it with my team as the only playlist they ever need to learn rust! Thanks again! Keep up the amazing work!

[@hollam224]

same here wonder why this page is underrated