You Should Use Maps and Sets in JS

แชร์
ฝัง
  • เผยแพร่เมื่อ 22 ก.ค. 2024
  • 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
  • วิทยาศาสตร์และเทคโนโลยี

ความคิดเห็น • 31

  • @syntaxfm
    @syntaxfm  4 หลายเดือนก่อน +6

    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
    @benvinegar 4 หลายเดือนก่อน +10

    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
      @Dedseq 4 หลายเดือนก่อน

      precisely my thoughts

  • @TheOllieJT
    @TheOllieJT 4 หลายเดือนก่อน +9

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

    • @CodingGarden
      @CodingGarden 4 หลายเดือนก่อน +2

      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
    @coltonaallen 4 หลายเดือนก่อน

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

  • @gosnooky
    @gosnooky 4 หลายเดือนก่อน +6

    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.

  • @studiousllama4776
    @studiousllama4776 4 หลายเดือนก่อน

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

    • @syntaxfm
      @syntaxfm  4 หลายเดือนก่อน

      More coming 🔜

  • @jagonza2000
    @jagonza2000 4 หลายเดือนก่อน

    Great video CJ!

  • @___dh__dh__
    @___dh__dh__ 2 หลายเดือนก่อน

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

  • @pranjalagnihotri6072
    @pranjalagnihotri6072 4 หลายเดือนก่อน +2

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

    • @CodingGarden
      @CodingGarden 4 หลายเดือนก่อน

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

  • @btrsl
    @btrsl 4 หลายเดือนก่อน

    Yesss! This is what we want 🎉🎉

  • @jofftiquez
    @jofftiquez 4 หลายเดือนก่อน

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

    • @syntaxfm
      @syntaxfm  4 หลายเดือนก่อน

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

  • @Souljacker7
    @Souljacker7 2 หลายเดือนก่อน

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

    • @syntaxfm
      @syntaxfm  2 หลายเดือนก่อน +1

      It is called Quokkajs - quokkajs.com/

  • @Pra2wins
    @Pra2wins 4 หลายเดือนก่อน

    CJ ❤

  • @user-xr3hf2ps6p
    @user-xr3hf2ps6p 3 หลายเดือนก่อน

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

    • @syntaxfm
      @syntaxfm  3 หลายเดือนก่อน

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

    • @user-xr3hf2ps6p
      @user-xr3hf2ps6p 3 หลายเดือนก่อน

      @@syntaxfm ☺️thank you very much

  • @prashlovessamosa
    @prashlovessamosa 4 หลายเดือนก่อน

    👍 CJ

  • @jonathonbloomfield8991
    @jonathonbloomfield8991 4 หลายเดือนก่อน +1

    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
      @Mike-vq3yt 4 หลายเดือนก่อน

      Quokka.js maybe?

    • @CodingGarden
      @CodingGarden 4 หลายเดือนก่อน

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

  • @BartekKozera
    @BartekKozera 13 วันที่ผ่านมา

    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
      @syntaxfm  12 วันที่ผ่านมา

      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.

  • @lautarodapin
    @lautarodapin 4 หลายเดือนก่อน

    the lesson is, use typescript

  • @good_eats876
    @good_eats876 4 หลายเดือนก่อน +1

    js is so quirky, it’s insane