You Should Use Maps and Sets in JS

In this video CJ talks about the scenarios when it is better to use Maps and Sets instead of Objects and Arrays in JavaScript.
00:00 Intro
01:09 The problem with Objects
02:41 When to use a Map
03:07 How to use Map
04:34 Create a Map from an Object
04:59 Object Keys are Strings
05:59 Create a Map from an Array
07:02 Map methods are nice
07:45 JSON.stringify a Map
08:53 Sets
09:15 The problem with Array.includes
10:36 Making a Set with an Object
11:50 Create a Set from an Array
12:23 Sets and Duplicate Values
12:58 Set methods on MDN
13:21 Thanks for watching
Listen to episode 689 on Syntax: syntax.fm/show/689/you-should...
Read about Map on MDN: developer.mozilla.org/en-US/d...
Read about Set on MDN: developer.mozilla.org/en-US/d...
------------------------------------------------------------------------------
Hit us up on Socials!
www.syntax.fm/links
Brought to you by Sentry, use code tastytreats to get your first 2 months free: sentry.io/syntax/
#javascript #webdevelopment #programming #typescript

[@syntaxfm]

Listen to Syntax episode 689: syntax.fm/show/689/you-should-be-using-javascript-maps-and-sets Are you using Maps and Sets in your code? Let us know! 👇

[@benvinegar]

Years of muscle memory have made it hard to not use Objects all the time, so this was a helpful illustration of why I should use Map and Set more often. Thanks CJ.

[@Dedseq]

precisely my thoughts

[@TheOllieJT]

Must be daunting to join Syntax after such a long time of just Scot & Wes... you're doing a great job, CJ!

[@CodingGarden]

Thank you 🙏 - It's a big role to fill but the team is super collaborative, encouraging and allowing me to do some of my best work.

[@coltonaallen]

Great vid, CJ! Welcome to The Syntax team! My literal 3 favorite devs now in one place! Couldn't ask for any meter trio!

[@studiousllama4776]

This was awesome! Loving the deep dive and hoping for more videos like it

[@syntaxfm]

More coming 🔜

[@jagonza2000]

Great video CJ!

[@btrsl]

Yesss! This is what we want 🎉🎉

[@CodingGarden]

😄

[@pranjalagnihotri6072]

Hey CJ, please make a video on using different design patterns in JavaScript and where to use them 😊

[@CodingGarden]

This is a good topic! I'll put it on the list.

[@___dh__dh__]

It would be interesting to know scenarios where set/map doesn't actually make sense and objects might be better.

[@gosnooky]

One of the unfortunate things about the Set implementation in JS is that it can only match primitives and memory addresses to compute equality. So even if you have two objects with the exact same fields and values, they will still not be equal because each has a non-unique memory address. Just something to be aware of if you're coming from a language like Java where you can override the 'equals' method on any object to govern how equality is computed.

[@Pra2wins]

CJ ❤

[@prashlovessamosa]

👍 CJ

[@jofftiquez]

May I know what plugin does that automatic logging on the end of your `console.log()`? Thanks

[@syntaxfm]

It is called quokka.js There is also a plugin called TypeScript Worksheet that is similar, but I have not tried it.

[@user-xr3hf2ps6p]

May I know what color theme you have on vs code?

[@syntaxfm]

You can see the theme I use here: github.com/codinggarden/vscode-settings?tab=readme-ov-file#themescolor -CJ

[@user-xr3hf2ps6p]

@@syntaxfm ☺️thank you very much

[@Souljacker7]

Any of you guys know what extension is that that shows the result in the side?

[@syntaxfm]

It is called Quokkajs - quokkajs.com/

[@jonathonbloomfield8991]

Thank you for this video! Would you mind sharing how you're displaying logs and return values inline in your code editor please?

[@Mike-vq3yt]

Quokka.js maybe?

[@CodingGarden]

Using quokka.js there is also an extension called TypeScript worksheet that I haven't tried yet.

[@BartekKozera]

Hot take: The "problems" with using objects are not real problems and they never come up in real life scenarios so it's not worth sacrifising the nice syntax of object for the verbosity of using Map.

[@syntaxfm]

It's one of those "use it when you have those problems " kinda thing. Not that they should replace objects in your day to day.

[@good_eats876]

js is so quirky, it’s insane

[@lautarodapin]

the lesson is, use typescript