Map vs Object in JavaScript

Поділитися
Вставка
  • Опубліковано 8 вер 2024

КОМЕНТАРІ • 87

  • @leighhalliday
    @leighhalliday  2 роки тому +3

    Check out my course called Next Level Next.js! A full stack course covering GraphQL, TypeScript, Apollo, Prisma, auth and lots more! next.leighhalliday.com

  • @omri9325
    @omri9325 2 роки тому +7

    A note about the swapObj method you used, it will actually be done in O(N^2) complexity due to reduce+spread are iterating twice, you can do it better by either using Object.fromEntries or Object.assign to iterate in O(N)

    • @leighhalliday
      @leighhalliday  2 роки тому +1

      Thanks for the heads up Omri!

    • @Microphunktv-jb3kj
      @Microphunktv-jb3kj 8 місяців тому

      im looking at a lot of map related videos atm...
      can anyone show a good example when to use maps over objects?
      the web and apis are so json heavy/oriented, when does map even make sense...
      probably in data wich have loads of arrays.. machine learning, ai? data wich changes a lot? realtime market data for example etc , thousands of tickers and values...
      well i guess map is good to use when you literally have just key-value pairs... not objects with more than single keyvalue entry or smt?
      wonder if Map feature is prequel to the new features they are adding to javascript soon.... the pipes, like elixir language has (other languages too... i assume these things have some name and some other language have it too.... functional languages?)
      |> toUpperCase()
      |> trim()
      |> console.log(x)
      where you can chain stuff like that,
      ive never written one, but also Decorators are Stage 3 and seem interesting concept... very reusable code

  • @0xAndy
    @0xAndy 2 роки тому +6

    Great video. If you're looking for a video topic or just generally taking suggestions, I would love to see you cover TypeScript generics and partials.

    • @leighhalliday
      @leighhalliday  2 роки тому +4

      Here you go my friend ua-cam.com/video/XKVGXu6_ygY/v-deo.html

  • @TomaNeagu
    @TomaNeagu 2 роки тому +7

    Thank you for posting knowledge! For me, this channel and all the work you put in it helps me out. I started on the path of web development alone and I learned a great deal from your React videos. I really like the way you explain things, makes them easy to understand.

    • @leighhalliday
      @leighhalliday  2 роки тому

      Thank you so much Toma!

    • @KManAbout
      @KManAbout 2 роки тому

      @@leighhalliday you could have used the in keyword to iterate over the object

  • @Kay8B
    @Kay8B 2 роки тому +2

    Leigh Halliday, I actually love your channel and appreciate these small clips you put out. You always introduce me to something new as a growing developer! Thanks, ALOT!

    • @leighhalliday
      @leighhalliday  2 роки тому

      Nice! Glad it helped, Kay. Thanks for the support!

  • @jeromealtariba7339
    @jeromealtariba7339 2 роки тому +4

    very interesting. I've been programming JS and TS for almost 6 years, never used Map, although seems to be cool

    • @leighhalliday
      @leighhalliday  2 роки тому +1

      I learned about it when developing with MobX, it preferred map over object for certain things.

  • @DebopriyoBasu
    @DebopriyoBasu 4 місяці тому

    absolutely amazing and to the point comparison!

  • @zitabokor5577
    @zitabokor5577 2 роки тому

    Thanks a lot for this video, it's exactly what I needed for my exam on Monday!

  • @KennethChambers-vn9gf
    @KennethChambers-vn9gf Рік тому

    i watched several videos on map object, I stopped here because you hit all the points. thank you

  • @GonzaloherreraTuc
    @GonzaloherreraTuc Рік тому

    Thanks! I love tutorials when they go right to the point ❤

  • @alii4334
    @alii4334 2 роки тому

    I love the way you organize the tutorial, pretty awesome!

  • @totfosk
    @totfosk Рік тому

    great instructional video!

  • @tonybrown7847
    @tonybrown7847 Рік тому

    Great explanation and examples. We should really be using Maps more

  • @introvertsgo
    @introvertsgo 2 роки тому

    Another great video. Thanks, I've been stuck on using an arrow function return with reduce. I didn't know you had to spread the acc.

  • @cschipg4688
    @cschipg4688 2 роки тому

    Extremely valuable. Thank you sir.

  • @deatho0ne587
    @deatho0ne587 Рік тому

    What is the practicality of swapping the keys and values?
    This video shows some of the differences between the two, but does not show why you would use one over the other.
    OBJ over MAP
    -If dealing with data from/to an API
    --Due to JSON format is normally required
    -if dealing with data that is always going to have the same keys
    MAP over OBJ
    -If you will delete and add new keys
    --This is due to a slight speed up
    PS: It is relatively simple to convert one to the other, but still it is still a thing

  • @lacherolachero9409
    @lacherolachero9409 Рік тому

    const swapObj = Object.entries(obj).reduce((acc, [key, value]) => acc[value] = key && acc, {})
    also works
    As long as value !== 0 😄

  • @seepoot330
    @seepoot330 Рік тому

    Hey.. just found out your video and love it! Do you have other videos that talks about the performance between Map and Plain Object? Thanks!

  • @user-zt1hx3ci2v
    @user-zt1hx3ci2v 2 роки тому

    Thanks for that!

  • @ghostpieces2362
    @ghostpieces2362 Рік тому

    Thanks for the great instruction

  • @shrestha0144
    @shrestha0144 2 роки тому +1

    I love the simplicity of Objects, or maybe I am biased cause I have been working with objects a lot. You mentioned there are performance benefits to using maps?

    • @leighhalliday
      @leighhalliday  2 роки тому

      There may be, but I didn’t worry too much about performance when doing this video. Best to search for some benchmark comparisons

  • @vadim4283
    @vadim4283 2 роки тому

    Nice video, thanks! I’d like to use Map more, just need to start.
    Small note: you say in object the order isn’t guaranteed. Actually, it’s guaranteed, but in ‘some special way’ :) integer properties are sorted, others appear in creation order.

    • @leighhalliday
      @leighhalliday  2 роки тому

      Thanks!! I didn't know that :) Honestly the order of an object has never bothered me... I think if I cared about order I would use an array.

    • @vadim4283
      @vadim4283 2 роки тому

      @@leighhalliday .. or Map :)

  • @abdurrahmanahmed3533
    @abdurrahmanahmed3533 Рік тому

    You're the man

  • @always-ask-why
    @always-ask-why 2 роки тому +1

    Very good and useful but I wonder if you could mention how to use stringify with maps?

    • @leighhalliday
      @leighhalliday  2 роки тому

      Looks like the answer is here stackoverflow.com/questions/29085197/how-do-you-json-stringify-an-es6-map

  • @lawrencedoliveiro9104
    @lawrencedoliveiro9104 2 роки тому +1

    Interesting how Python does it the other way round, with the expressions that look like JavaScript “object” ones actually constructing dictionaries, while general Python objects have custom construction facilities (or you could use canned ones like dataclasses).
    Basically, JavaScript tried to mash dictionaries and general objects together, and then discovered this was not such a good idea, so it had to add a separate dictionary (Map) type anyway. Python kept them separate, and ended up with a cleaner and simpler design overall.

    • @leighhalliday
      @leighhalliday  2 роки тому

      Python has really powerful expressions! I never quite mastered them but I’ve only worked professionally with python for a few months.

    • @lawrencedoliveiro9104
      @lawrencedoliveiro9104 2 роки тому

      @@leighhalliday Have you tried Jupyter notebooks? A very handy tool for exploring programming and data manipulation and general messing about, not just in Python but also other languages.
      I have a collection of Jupyter notebooks discussing various topics in Python. I would link to them, but UA-cam will likely delete my comment.

  • @karlstenator
    @karlstenator Рік тому

    I prefer to use the .map() method over .reduce() when working with object structure.
    const swapObj = Object.fromEntries(
    Object.entries(obj).map(([key, value]) => [value, key])
    );

  • @nazgul.of.Suburbia
    @nazgul.of.Suburbia 2 роки тому

    Thank you, it helps me enormously

  • @chrisyan1842
    @chrisyan1842 2 роки тому

    Wonderful, thank you!

  • @stevenrodriguez2882
    @stevenrodriguez2882 7 місяців тому

    Clojure has ruined me, this all seems like so complicated for no reason lol.
    Also this video is great

  • @TanUv90
    @TanUv90 Рік тому

    You have to write custom logic when using Map unlike pojos

  • @npc73x
    @npc73x 2 роки тому

    Thanks for the Informative video, Can you make a video about scaling a typescript projects in manageable way ?, what are the practise we want to flow ?

    • @leighhalliday
      @leighhalliday  2 роки тому +1

      Hey! My advice would be to use it on strict mode… it’ll call out everything which will slow you down at the beginning but be a life saver when your code base grows.

  • @javascriptduniya1201
    @javascriptduniya1201 2 роки тому

    Great Video, but when should we use Map and when should we use Object ?

  • @AmitErandole
    @AmitErandole 2 роки тому

    Not related to the topic but how are you getting a full height vertical output window in your vscode setup in the right panel? Is this a package?

  • @laluchademeche
    @laluchademeche 2 роки тому

    Please continue uploading videos on your other Spanish channel Leigh, we are a great community waiting for Spanish-speaking people who value your content a lot, regards

    • @leighhalliday
      @leighhalliday  2 роки тому +2

      Gracias John! Lo intentaré pero es difícil tener un balance entre UA-cam y el resto de mi vida jaja. Gracias por tu apoyo!

    • @laluchademeche
      @laluchademeche 2 роки тому

      @@leighhalliday lo entiendo gracias por darte el tiempo de escribir, tu información es precisa en lo mayoría de los casos, saludos desde Perú.

  • @abdelhameedhamdy
    @abdelhameedhamdy 2 роки тому

    Very neat👍

  • @endernator
    @endernator 2 роки тому

    i am first...great content loooove it... i will finally know how to code 👨‍💻 thank you

    • @leighhalliday
      @leighhalliday  2 роки тому +1

      First! Glad you enjoyed the content :)

    • @endernator
      @endernator 2 роки тому +1

      i will be your padawan 🥷

  • @MichaelDeeterIA
    @MichaelDeeterIA 2 роки тому

    OP, at 7:16, you mention that "ironically this is an object", but I'm not sure why it's ironic. When you console.log({ foo, bar}), you're not consuming an object, but you're creating an object using shorthand. You could have just as easily written it as console.log({ value, key }). Just curious if I'm missing something interesting there.

    • @leighhalliday
      @leighhalliday  2 роки тому

      Hey Michael! You're not really missing anything... was just a liberal use of the word "ironic" haha... that I was using an object when talking about maps in a video that compares maps to objects.

    • @MichaelDeeterIA
      @MichaelDeeterIA 2 роки тому

      @@leighhalliday ah... okay, cool. Thanks for review.

  • @ridl27
    @ridl27 2 роки тому

    ty. also would be nice codepen for this, as a cheatsheet :D

    • @leighhalliday
      @leighhalliday  2 роки тому +1

      Hey Alex! If this helps, here's a quick gist of the final code: gist.github.com/leighhalliday/31430d36b49e7296e7a2ef603e2084ef

    • @ridl27
      @ridl27 2 роки тому

      @@leighhalliday wow ty! also add it to the description, so everyone who need it could see it :D

  • @endernator
    @endernator 2 роки тому

    I am struggling with DBs. Maybe a good idea to compare Supabase vs. Prisma? ease of use, speed, auth integration, dev speed...

    • @leighhalliday
      @leighhalliday  2 роки тому

      I definitely need to give Supabase a try... I'll start learning it so I can make a video shortly.

  • @yanbatista2828
    @yanbatista2828 Рік тому

    how can I favorite methods like in 9:44?

  • @kamertonaudiophileplayer847
    @kamertonaudiophileplayer847 2 роки тому

    No need ; at the eol. Otherwise, the guide is generally good, although misses some alternatives, at least for object.

  • @alebuda117
    @alebuda117 2 роки тому

    good video!

  • @maneth3448
    @maneth3448 2 роки тому

    Hey, Leigh what theme you use in Vs code ?

    • @leighhalliday
      @leighhalliday  2 роки тому +1

      Hey Maneth! It is OneMonokai I believe

    • @maneth3448
      @maneth3448 2 роки тому

      @@leighhalliday thanks

  • @AlexSpieslechner
    @AlexSpieslechner Рік тому

    the notion that „in a js object the order is not guaranteed“ has been wrong for quite a few years now.
    nowadays, the order is in fact guaranteed.

  • @jofla
    @jofla 2 роки тому

    Just started watching the video but in my opinion is using map is not worth, leets see if I change my mind after the video

    • @leighhalliday
      @leighhalliday  2 роки тому

      Did you change your mind?

    • @jofla
      @jofla 2 роки тому

      @Leigh Halliday I agree when you say that maps are great if you just want a dictionary, but as you said later most of the time we interact with objects in the end and that's my biggest issue with maps. Maps API is really nice tho
      I guess I've changed my mind because I will at least consider Maps depending on the context

  • @GustavoDiaz93
    @GustavoDiaz93 2 роки тому

    When I do LeetCode questions always use an object.

    • @leighhalliday
      @leighhalliday  2 роки тому +2

      I tend to use objects too… but I have never done a LeetCode question hehe

  • @darkarie
    @darkarie 2 роки тому

    so basically maps are better than objects

    • @leighhalliday
      @leighhalliday  2 роки тому

      I wouldn’t say so… when you work with JSON you’ll end up with an object, you get destructuring.

    • @darkarie
      @darkarie 2 роки тому

      totally agree, but that's one situation where objects make sense. But are there many more situations? maps are even faster than objects

    • @leighhalliday
      @leighhalliday  2 роки тому +1

      In one sense I'd say: Use objects when you define the properties, or are from parsing JSON... use maps when the keys come from data.