It's worth noting that "frequently" in the terms of the MDN docs means an insane amount - ie orders of magnitudes more than you'd need for most use cases. The inconvenience in using maps, and the gotchas around memory mean that they're usually just a premature optimization and not really a good thing to recommend to a beginner.
I can confirm this. I started using maps, because of a video like this one and ended up having to store the maps to disk after each change. The solution I found for that was to convert the map to an object and store it as json - at which point I decided to use an object instead.
These are some odd takes. Outside the context of a beginner, this is a well explained. Most intermediate/advanced developers are using Typescript anyways and I’ve found typings with Maps and Sets to be much more intuitive. Plus, the ability to use a reference value as a key on a Map/WeakMap has saved me a tremendous amount of headache. I do agree, that in some instances it’s just easier to use objects but throwing Maps and Sets into the mix is a good call. It’s like this, if I only ever know about a hammer, I’m going to use a hammer for everything. But what about the screwdriver and table saw?
even for beginners. its only been a week of programming for me, started with js. and ive been using array of ids so i can reference them to an array of objects with a .find(). i might rewrite some of my code to include maps and sets.
It's good to remember that maps are not JSON.stringified by default... Also, the order of keys is the insertion order (so it's good for stuff like LRU cache)
What I took away from it: Objects should be used to describe actual things (ie. real life objects, hence oop), maps are used as a collection of things where you need more functionality than an array
Pretty Impressed by the content you make. Have a lot to learn, know and implement from your videos. Keep posting best practices. Tried to connect over LinkedIn too but asking email.
Excellent format, very informing, and yet simple. I am an intermediate professional developer and because of your tutorial, I will be using sets and maps immediately in my projects! Thank you and keep up the good work!
@@shaneaudinett8464 well it should be. Just sounded in the first comment that you saw a few min video and will now start replacing most of your object literals to maps. That would not be smart. And if its personal projects, thats one thing. If you did that at work, very diff story
@@shaneaudinett8464 tbh I wasn't trying to be a dick. Just often see that many junior developers see something on tiktok then begin to religiously use it without knowing what it is, and often making their things worse without realising
if Map preserves order of keys than Set do this as well according to spec notes: "For iteration purposes, a Set appears similar to a Map where each entry has the same value for its key and value."
Personally, I like to use objects for making object-based constants. The simple syntax of creating and fetching data is just a lot smoother than maps. Because these objects are constants and lookup speed isn't really a priority, I'll probably stick with objects
@@Microphunktv-jb3kj js can be performant enough for many applications on the web without the need for wasm, and offers a better suited API for accessing the browser's functionality. But just like any other language, you can kill your good enough performance.
One thing that would make Maps and Sets more useful is if they supported the [] operator like Objects do. I've been told this can be done by doing something clever in the prototype; however, I haven't been able to figure out how.
I love learning all these new things!! I have only known the one way for converting map to json with const mapAsJSON = JSON.stringify(Object.fromEntries(someMap)) now I know about the replacer! from JSON back to map with const mapFromJSON = new Map(Object.entries(JSON.parse(someJSON)))
Map is interesting, but when we need to add an entry between two existing keys, we have to create a complete new map and that is not cool for complexe entries with nested elements.
Interesting video... I would also like to know if it's okay to use MAPS in React in some situations, or if it makes sense to use it for communication with a database. Thanks for your answer.
Worth noting that if using objects and arrays as keys, this is done according to object IDENTITY: consider this transcript from node > m = new Map() Map(0) {} // Use object as a key > b = { a: 42 } { a: 42 } > m.set(b,42) Map(1) { { a: 42 } => 42 } > m.get(b) 42 // what if we change that object? > b.c = 43 43 > m.get(b) 42 // what if we make a copy of that object? > c = {...b} { a: 42, c: 43 } > m.get(c) undefined // try similar with an array as a key > m.set([1,2],50) Map(2) { { a: 42, c: 43 } => 42, [ 1, 2 ] => 50 } > r = [1,2] [ 1, 2 ] > m.get(r) undefined > m.get([1,2]) undefined so if we store using a literal array or object as a key, we have a leak, and if we lose access to the object itself, we cannot recreate the key.
@@MrLinuxFreak I personally like maps because you can also subclass them, eg making get() throw an error you can make an LRU cache easily by sub classing maps too
> maps would preserve the order of keys It's crucial to specify that the kind or order is the original insertion order of the keys. I will only rely on this a little though, as it could harm readability: nobody expects this semantics, but only the people who have read and do remember this particular behaviour. It's not normal in other languages, either!
Can a map where key = ID and value = object replace arrays of objects in context of data fetching and state management in react? For example, arrays of objects are fetched from database, serialised using the methods descripted in this video, sent to the front end as maps, and stored / manipulated in state? Or would this be bad practice?
After doing web development for a good 20 years I must say I’m ashamed to admit I didn’t even know JavaScript has a Map… Would probably have been different if I would’ve written JS on the backend…
I am curious. At my job I encounter many situation where I need to do type checking, either using type guard or discrimination check or else, is map better at checking types over objects. This is one of the reasons why I am getting frustrated with javascript... :(
Depends on your use case. Maps (and Sets) are immutable, always so you cannot guarantee values to be defined for given keys. It requires runtime checks to avoid bugs. Objects on the other hand, can be defined as a readonly value and narrow its type using `as const` (and the new `satisfies` operator). This is useful in cases where you have constant values that you know are always available.
I like the idea of Map but I really wish there was an easy way to perform transforms. The Map transform is so janky in it's current state. Maybe ES7 will address this but it's just bad DX at this point
WeakMaps have one big drawback compared to maps which is implied in this video but not explicitly stated: WeakMap keys must be Objects, they cannot be primitives. Edit: Not trying to be critical. I’m really liking your videos so far. I appreciate having more realistic examples over what MDN provides
@@suya1671 yes it creates a new object/array by spreading and updating the previous values, so it's always returning a new object/array, so in that case should I use a Map instead (if it's possible)?
@@blackpurple9163 you shouldn't since Map is good for mutating an existing, not for creating/destroying new maps. Again, note that I have limited knowledge on how react works.
But here you are talking about mutating the objects. In functional programming case (for example in React), mutating the object is already a bad practice. So I think objects are still easier to work with in that case (unless you want to copy the Map each time and edit the new copy). Also, true, deleting keys is still better with Maps.
this video is confusing. I don't see the benefits to change out using map to object. I would need better examples. So for instance, if I am trying to see a image of the pokeapi how am I going to do this with map? This is just confusing as hell to understand for me and I am not a beginner just getting back to it for the millionth time
This channel is an example of "I don't know shit, but I'll recommend shit to everyone because I just learnt this". No, don't use maps as a drop in replacement for objects.
This is good information if you're working in a context where you have extreme performance requirements. For the other 95% of usecases, this is a really bad recommendation and even an antipattern akin to stringly typed code.
More cool things you can do with Maps and Sets, including all the code shown here in this video, in my full blog post: www.builder.io/blog/maps
Awesome stuff Steve! So happy I've found this channel. Great format, presentation and topics. Keep it up!
It's worth noting that "frequently" in the terms of the MDN docs means an insane amount - ie orders of magnitudes more than you'd need for most use cases. The inconvenience in using maps, and the gotchas around memory mean that they're usually just a premature optimization and not really a good thing to recommend to a beginner.
Can confirm this.
I can confirm this. I started using maps, because of a video like this one and ended up having to store the maps to disk after each change. The solution I found for that was to convert the map to an object and store it as json - at which point I decided to use an object instead.
Why we introduce beginners everywhere? Infact it's better to teach the right thing to beginners from the starting
@@amans6504 the issue is using maps is almost never the right thing in js.
These are some odd takes. Outside the context of a beginner, this is a well explained. Most intermediate/advanced developers are using Typescript anyways and I’ve found typings with Maps and Sets to be much more intuitive. Plus, the ability to use a reference value as a key on a Map/WeakMap has saved me a tremendous amount of headache. I do agree, that in some instances it’s just easier to use objects but throwing Maps and Sets into the mix is a good call. It’s like this, if I only ever know about a hammer, I’m going to use a hammer for everything. But what about the screwdriver and table saw?
This is a very good way to present content, especially for more experienced devs. Subscribed.
even for beginners. its only been a week of programming for me, started with js. and ive been using array of ids so i can reference them to an array of objects with a .find(). i might rewrite some of my code to include maps and sets.
it is amazing how you make these videos better and better with each and every one, thank you
Just found accidentally your channel and based on the number of likes, I think you are way underestimated. Awesome videos, new subscriber here.
Keep going, that was purest explanation out here. Very good examples, perfect work
Your way of explanation is excellent. Precise and focused. Thanks...
Long time backend dev.
New to frontend.
Excellent tutorial, thanks!
I read the blog earlier this week, and now seeing this again is pretty cool.
One of the best channel for JavaScript!
Very well explained and good examples too!
This is extremely useful content. I have not come across anything similar elsewhere. Keep it up.
It's good to remember that maps are not JSON.stringified by default...
Also, the order of keys is the insertion order (so it's good for stuff like LRU cache)
What I took away from it: Objects should be used to describe actual things (ie. real life objects, hence oop), maps are used as a collection of things where you need more functionality than an array
I am new in this channel and this video is really nice thanks :)
i REALLYY love maps!! i always use them in place of switch statements
Never thought I could learn that much in 10min
Hi Steve, Thank you🌹🌹. It was very cool. Please make more videos like this. Good luck.🙏🙏
This is great stuff, thank you.
Useful explanations, thanks!
That metadata use case blew my mind.
Great format, content at a perfect pace! Thank you.
Question: Sets don’t maintain order?
An awesome explanation and presentation
Does it provide the TypeScript support the object does?
Pretty Impressed by the content you make. Have a lot to learn, know and implement from your videos. Keep posting best practices. Tried to connect over LinkedIn too but asking email.
Excellent format, very informing, and yet simple. I am an intermediate professional developer and because of your tutorial, I will be using sets and maps immediately in my projects! Thank you and keep up the good work!
Mate, if you are truly intermediate, you should have the foresight to do more research and run your own tests before shoving maps in your projects.
@@yegorzakharov8514 that's obvious though isn't it? Using in the projects where they are necessary?
@@shaneaudinett8464 well it should be. Just sounded in the first comment that you saw a few min video and will now start replacing most of your object literals to maps. That would not be smart. And if its personal projects, thats one thing. If you did that at work, very diff story
@@yegorzakharov8514 that's called assuming. Thanks for taking a personal interest in my life internet stranger 😉
@@shaneaudinett8464 tbh I wasn't trying to be a dick. Just often see that many junior developers see something on tiktok then begin to religiously use it without knowing what it is, and often making their things worse without realising
Man your video came at the perfect moment!
Didn’t even know about maps before I saw your blog post and then subsequently this video 😳
if Map preserves order of keys than Set do this as well according to spec notes: "For iteration purposes, a Set appears similar to a Map where each entry has the same value for its key and value."
Objects preserve key orders as well, check newer ES spec. The video contains wrong information.
Personally, I like to use objects for making object-based constants. The simple syntax of creating and fetching data is just a lot smoother than maps. Because these objects are constants and lookup speed isn't really a priority, I'll probably stick with objects
it's not one or the other lol both have use cases
if speed becomes an issue.. why are you even using JavaSript facepalm....
@@Microphunktv-jb3kj js can be performant enough for many applications on the web without the need for wasm, and offers a better suited API for accessing the browser's functionality. But just like any other language, you can kill your good enough performance.
That metadata use case is brilliant. Knew about the arbitrary keys but didn’t think of that approach.
How did ya record and edit this? I like the format
Sounds like pizza has arrived for the end, good timing from delivery guy
I was hoping no one would notice 😂
Very useful video.
+1 subscriber for this 5 mins of quality content.
I've read somewhere that creating an object is slower than using other approaches
thank you, thank you, thank you 🙏 for such a content
Nice! Very usefull video. Keep it up!
thanks for so helpful video
hey amazing content , would like to know how it was edited, if you could shed some light on this , that would be great
One thing that would make Maps and Sets more useful is if they supported the [] operator like Objects do. I've been told this can be done by doing something clever in the prototype; however, I haven't been able to figure out how.
I love learning all these new things!! I have only known the one way for converting map to json with
const mapAsJSON = JSON.stringify(Object.fromEntries(someMap)) now I know about the replacer!
from JSON back to map with const mapFromJSON = new Map(Object.entries(JSON.parse(someJSON)))
Bro, You are super quick before graps
Map is interesting, but when we need to add an entry between two existing keys, we have to create a complete new map and that is not cool for complexe entries with nested elements.
What do you think of keepin maps inside useState?
Thanks!
Wow, cool. I've been using JS for years and I didn't know about that. Thank you!
And how do you do subtitles like this?
Interesting video... I would also like to know if it's okay to use MAPS in React in some situations, or if it makes sense to use it for communication with a database. Thanks for your answer.
How would this work with react
Hi Steve,
Why you don't make course, your tips or information it's most advanced someone tell us about it.
many Thanks .
cool. how would you use it in react? Whould you store it outside component or in a context? Thanks.
very nice video
Worth noting that if using objects and arrays as keys, this is done according to object IDENTITY: consider this transcript from node
> m = new Map()
Map(0) {}
// Use object as a key
> b = { a: 42 }
{ a: 42 }
> m.set(b,42)
Map(1) { { a: 42 } => 42 }
> m.get(b)
42
// what if we change that object?
> b.c = 43
43
> m.get(b)
42
// what if we make a copy of that object?
> c = {...b}
{ a: 42, c: 43 }
> m.get(c)
undefined
// try similar with an array as a key
> m.set([1,2],50)
Map(2) { { a: 42, c: 43 } => 42, [ 1, 2 ] => 50 }
> r = [1,2]
[ 1, 2 ]
> m.get(r)
undefined
> m.get([1,2])
undefined
so if we store using a literal array or object as a key, we have a leak, and if we lose access to the object itself, we cannot recreate the key.
This is great content. Subscribing for more!
Whats better to use object or map for: storing and reading only by key.
(Inmem cache..)
@@MrLinuxFreak I personally like maps because you can also subclass them, eg making get() throw an error
you can make an LRU cache easily by sub classing maps too
Great stuff
> maps would preserve the order of keys
It's crucial to specify that the kind or order is the original insertion order of the keys. I will only rely on this a little though, as it could harm readability: nobody expects this semantics, but only the people who have read and do remember this particular behaviour. It's not normal in other languages, either!
Can a map where key = ID and value = object replace arrays of objects in context of data fetching and state management in react? For example, arrays of objects are fetched from database, serialised using the methods descripted in this video, sent to the front end as maps, and stored / manipulated in state? Or would this be bad practice?
Had same question in mind watching this video
@@niksonkanyuka4323 after some research it seems that using arrays of objects should be used over maps in react state due to mutability
Why do you need WeakMaps? To not have to clean up yourself?
Waiting for your frontend course bro
even with ngrx?
Hey there, it seems you missed writing the " like trivially implementing an O(1) LRU Cache", is it normal?
Thank you
awesome content
quality content.
After doing web development for a good 20 years I must say I’m ashamed to admit I didn’t even know JavaScript has a Map… Would probably have been different if I would’ve written JS on the backend…
Does this mean maps are pretty much always better?
I am curious. At my job I encounter many situation where I need to do type checking, either using type guard or discrimination check or else, is map better at checking types over objects. This is one of the reasons why I am getting frustrated with javascript... :(
Depends on your use case. Maps (and Sets) are immutable, always so you cannot guarantee values to be defined for given keys. It requires runtime checks to avoid bugs.
Objects on the other hand, can be defined as a readonly value and narrow its type using `as const` (and the new `satisfies` operator). This is useful in cases where you have constant values that you know are always available.
you should really start with a disclaimer on maps - espescially since you're highlighting the gotchas of objects
Amazing keep going
I like the idea of Map but I really wish there was an easy way to perform transforms. The Map transform is so janky in it's current state. Maybe ES7 will address this but it's just bad DX at this point
Gracias
WeakMaps have one big drawback compared to maps which is implied in this video but not explicitly stated: WeakMap keys must be Objects, they cannot be primitives.
Edit: Not trying to be critical. I’m really liking your videos so far. I appreciate having more realistic examples over what MDN provides
this is gold! Subbed
In most cases I don't need all that Map functionality.
gotcha!
Thanks! I understand nothing and i'll still use objects
Maps are ok, but i think i'll continue to use objects and arrays
Really Cool
So i should use Maps more than Objects in react?
Depends on your use case. If you are frequently adding and removing from an object, yes. Else, no.
@@suya1671 I'm talking about with useState and similar hooks
@@blackpurple9163 I don't use react that much, but I don't think objects Vs maps affect it since setState takes in a whole new object to my knowledge
@@suya1671 yes it creates a new object/array by spreading and updating the previous values, so it's always returning a new object/array, so in that case should I use a Map instead (if it's possible)?
@@blackpurple9163 you shouldn't since Map is good for mutating an existing, not for creating/destroying new maps.
Again, note that I have limited knowledge on how react works.
Nice
How did I never know structuredClone was a function?!?!?!?!?!?!!?!!!!!!!!
Great
But here you are talking about mutating the objects.
In functional programming case (for example in React), mutating the object is already a bad practice.
So I think objects are still easier to work with in that case (unless you want to copy the Map each time and edit the new copy).
Also, true, deleting keys is still better with Maps.
this video is confusing. I don't see the benefits to change out using map to object. I would need better examples. So for instance, if I am trying to see a image of the pokeapi how am I going to do this with map? This is just confusing as hell to understand for me and I am not a beginner just getting back to it for the millionth time
This video is not for beginners.
This channel is an example of "I don't know shit, but I'll recommend shit to everyone because I just learnt this". No, don't use maps as a drop in replacement for objects.
Gold
Legend
I do not like the fixed CC in this video.
Agreed, in a foreign language for me too (I speak English, not USA English)
One more video for the sake of video
bruh just make a school for JavaScript, i would totally buy your courses
This is good information if you're working in a context where you have extreme performance requirements. For the other 95% of usecases, this is a really bad recommendation and even an antipattern akin to stringly typed code.
These are good to know, but I can smell premature optimization.
Content is good. Title is bad.
Your method of teaching ain't lucid and clear
Nice video, nicely edited. Thanks for sharing!
First like, bruh
you are a horrible teacher lmao oh my god
Using map everywhere is gonna cost performance
Just don’t use JavaScript.
Why not? JavaScript is pretty powerful.
@@zakuguriin4521Typescript is more effective
As a frontend developer, I wish I could