You Should Be Using JavaScript Maps & Sets

when a has all of those methods that you're used to for checking if a font is loaded, if a font should be removed.

Can you delete my Chapstick? Can you give me information about how many times I've clicked on my Chapstick? or you're doing this like weird Word. I think the I think the biggest benefit here is a but you're still referencing it. The browser doesn't know to clean that up and you run that long enough, you iterate over enough things. It happens more often enough, Iterate over the items of a week set or week map. And the whole idea behind that is, like, what is the benefit of this collection if I can't see what's in the collection? on the serverless function, we have a new map.

I'm going to get rid of this. I'm going to throw this in the garbage. I don't need it. So I have a variable

That name variable is no longer needed anywhere. Nowhere is pointing to that variable. The browser says, all right, well, Knows where everything is. Right? Yeah. I think so. So the documentation for maps and sets say they are more performant than their

Or I can remove my ChapStick from the box, but I cannot open up the box and look at my ChapStick. Is that correct? Exactly. You say, hey. Do you have a ChapStick?

I think it helps that I don't use these things. So

dom elements quite a bit. You know, it needs to keep data about what's on the page, what needs to be re rendered. Those are great use cases very similar to an object where you have property value.

Peace. Head on over to syntax.fm

For me to understand why these things exist and when you might wanna pick them up. And and personally, I think I I think sets seem really useful to me, and they all seem really useful to me. But, like, stuff. Mhmm. I think I think I'll start picking some of these up when they are appropriate

because, hey, that's why they exist. Right? Yeah. If if you also like these are, I think, lower level primitives, like I've said. So if you look in the React source code, into a map as a key,

okay. I'll I'll put my ChapStick into the box. Okay? Yep. I can ask the box, Yep.

they are garbage collected. So in JavaScript, garbage collection is

And don't forget to subscribe in your podcast player

Values are no longer referenced anywhere in your code.

or drop a review if you like this show.

they're used quite a bit. Sick. Well, that was really enlightening. I I appreciate the, the the deep dive on this one, Wes. I think this this kind of stuff rules. Yeah. Thank you. Alright. Catch you later, everyone. Peace.

That's what that's what a memory leak is, is when you are referencing you're accidentally referencing this Pixel, then I think the keys If it's not on that object, it will There are ways to add multiple items at once to a set. No problem there. But When you if you do want to because you can put items and it will return the actual value, right? You just give it an object.

definitely, like, listening to you talk about them, it it's Yeah. Turning wheels in my brain about, like, alright. These are things that I haven't had to think about. Me erase objects, that's where I live. So,

hey. Is my ChapStick in there? And the box will say yes or Yep. No.

Hey. Is

So with a weak set and a weak map, as soon as those values are no longer referenced, In my example, as soon as the button is no longer on the page, it's no longer in a variable somewhere. It's no longer being referenced by So they both come out the that will be translated into The benefit to that is element itself, are only for

a box. Right? You put something into a box.

I think this episode was really enlightening

for sets and maps. So if if you look into any of these, like, lower level libraries, add. So it's add, not set. Set. Set would be a bit odd Makes a lot more sense of this HTML page and turn that into a PNG, right? That's how we generate our Open Graph images. We design them with HTML and CSS, take a screenshot, when you simply want to rather than having to make your own class and implement getter setters and all the performance stuff that comes along with it The order at which you put the data in, which is similar to an object. People always say you can't guarantee Yeah. So,

counting clicks Yeah. I think for me, it's We have a serverless function that will take a screenshot And in the case of adding, you don't have to check if it's already in there.

is still that whole button still sticks around it might not matter.

You run out of memory on your user's computer. Right? And probably something that you might not have considered is this is not just like a different type of array by. There's a new method on it called Groupby.

Value is no longer referenced look up the prototype chain for another one. And sometimes that cannot be what you want. So you have to use You click some buttons. You run some functions.

I don't need that anymore. So it It throws it out. It's garbage collected. Right? So with week set and week maps,

anywhere in your code.

a good example is the

And if you're using any new API like you might be using with maps and sets, you should probably have some error and exception handling tracking service To make sure that if you're running bugs with any of these new APIs, you're trying to use them like you would use an object or an array, and you don't know your way around them, well, you might be hitting some bugs here. So check it out. Wanna check out century.io

Yeah. Do you wanna talk about what makes them a spicy buffalo object?

So let's get going here. We're gonna start with maps, which are kind of like So okay. So What they are, why they come in handy, some of the reasons why they differ from arrays and objects, and just in general,

because this podcast is brought to you by Century.

But do you wanna talk spicy buffalo object? Spicy buffalo object. Perfect. Yeah.

they're kind of like

I I don't know if you wanna say they're they're supercharged

can be how they work as well as, like like, you actual use cases that you might wanna use them in your applications. Yeah. They're neat, And I don't think they get enough love.

the benefit Does it get translated into a string? To a string? Yeah. See, that's what I like. Visually, I see it as a string when I think the key. When you when you pull it out of an object, it comes out as a string.

be an another object. It can be obviously a string, can be a number, any type, including objects, maps. It's more for just holding hunks of data and you want a nice API.

along with the API, we'll talk about in a second. But probably the biggest benefit to me is that the key of a map is for Yes. Array sets are still

as This gets into Equivalents.

To 2 I don't I I mean, a string.

of a map, symbol? I don't know. Symbl? Good. That's the second one. I guess Oh, I know it. Yeah. You got it. You could guess. Yeah. Okay. I don't know if the third one is is technically correct or not, but You can set a number as a

And If I was counting clicks with a map the order of a set is right now with an object, and iterables are things that you can loop over in JavaScript. So They will be removed. So Most of the elements that have previously been added to the set, and particularly

maps or objects or anything like that. But that's not what we're talking about today. We're talking about how and if not, these are maps still feel mysterious to me. So can you change the size of a map after it's created? Stuff. Yes, you can. And sorry. I I just said that there's a dot size property on a map. That's not true. There is Thought we should do a show on maps and sets and how you should use them. They've been around for any of the data that you have, as well as it's pretty common for people to as clear and delete. It's just a really nice API. You don't have to check for includes.

unique string So it's kind of neat to see, okay, these primitives are now being built upon now that they're in the browser.

as strings if you were to run object dot keys on it. So that's that's your limitation to an object right now is that The keys must be I can simply just pass Scott the object And for creating keys in Often what you'll find yourself doing is you can and it's deleted, of the map in memory because I've referenced it somewhere. I've referenced it in my map.

some sort of

let's, let me let me try it right now. Yeah. We got a console. We got a, what do they call that? Is it just a console? When you type you can just type it in JavaScript. Let's go. Yeah, there's no differentiation

A do you reach for a set?

a property on an object. However, pixels.

Okay. But

spread before,

a set. Is that correct? It's automatically deduped no matter what you do. It just you can, you know, understand that it will be that way. Nice. Automatically deduped.

And then put it back into an array just to get the benefit of that's a pretty quick way to an easy way to make a an array unique. Yeah. Stuff. So you don't have to dedupe when you put them into the object, they go to the bottom. Same thing with sets is they go to the end of the actual set API, very simple. Get Browser vendors can use these primitives uniqueified. So if you add the same item to a set twice It's apparently faster. So, again, the MDN docs say the has method checks if a value something that might be a duplicate. So, like, if I had a key of Wes And then I later I had a Key of Wes as well. Those things would overlap each other. You wrap it in a symbol, and all of a sudden you have this infinitely unique thing that will never be overwritten. And sometimes that's helpful a specific comment.

arrays have a length.

Mostly And then to build other things with it. Graphics as well.

Sets have a size.

keys and number keys and object and symbol keys. But called name and I set it to Scott.

Honey garlic arrays. Wonderful. I actually do like I like the honey garlic. Yeah. Yeah. I'm a big, big honey garlic fan too. Stuff. I'll show up for that. Yeah.

this is on average faster than

There's probably some Anything else in your application,

Then it will only be added once, which is sometimes nice if you're trying to

and this is referenced when an array has a length equal to a set size. So that's the other weird thing is that can be much faster. Interesting.

set an array with buffalo sauce on it?

So I got this name variable sitting on the shelf over here. It's taking up memory.

What makes a

You can simply just call delete and you pass it the reference to the comment and it will remove it. You don't have to know where in the set That item is, make a unique ID out of

the order of an object, but An object is always based on insertion order. There's a couple more rules around is in the set using an approach that is, on average, quicker than testing alternative data structures when you are really counting on big jobs and big performance, which is often seen in because what happens if there's a guest named Scott? You know, now everybody has to have a unique identifier.

The unique thing about a set is that the items are automatically

loop over a bunch of data. You don't have to check if it's in there already before you go ahead. You don't have to deduplicate The data itself. Yes. A spread operators and store them in memory because they regenerate take the items of a set and put them into an array, you can spread them.

meeting that went on and like many

the process of transforming

then pop a class on it

it wouldn't add another one because the values need to be unique.

A set to an array could be done just by array brackets, dot, dot, dot, and then the set itself?

Pixel has been hovered, then do what are what are the keys of the map? Maybe the show number? some sort of object or value in the browser in in the code and I can use that as a reference for it. So it's really handy for these, like, metadata, an array is something where you want where the order matters. Right.

Weak. Weak. Weak. Weak.

Highlighted

And in those 10 pixels, it's the background color of those 10 pixels. Right? I mean, you might have the same color multiple times. And then in that case, like I said, wouldn't

Last thing here is we also have weak versions of both of them. Weak map and weak set. So do these things just need to hit the gym? What's up with them? Yes. Why are we weak? Where's the soundboard? Weak.

1 question I have is is you you mentioned spreading. You can spread them. I just wanna say definitively, you can spread them like you would in a ray. Correct? And,

a set which is called So you have a dot For each method on a map, you do not have

Throw them into a function as a spread into arguments. You could do that as well. Sick.

wouldn't be appropriate because you need that array to be You do want it multiple times. Right. You want it multiple times. Not only that, but you wanna have a set a set size

Highlight it in a different way. Interesting.

Yes. Yes. So the spread syntax and a string on an object, Jeff. Sometimes it's hard to search for what you want.

You add that on There's some new methods coming to JavaScript Arrays that will allow us to take items out of an array Much easier, but this API is onions. It's onions.

Hover Dot has the object itself, not like the 2 objects with the same values, but the same object twice,

So, yeah, you can change the size any given time, you simply just add or remove items. Dot set method. Yeah. A dot set method. Not a set itself.

because you're a you're a person an example that I use in my beginner JavaScript course is how many times has this an array of actual items. So You would have to say You have to use .get. Exactly.

a dot size property on a set.

The API for that map. So counting instances is really popular.

native to the platform U42 look and see what is inside a week set or a week map at any time, and you cannot website for our Open Graph images.

But in many cases, quickly referencing a value

get, set, has, and clear.

you can use the dot size property. So I have some questions for you because for a full archive of all of our shows,

entries values. And then when you have a map, the API is just you cannot spread into a set.

That comes with a bit of a more a bit more limitations.

because it is

to iterate over the items.

and all that good stuff from the beginning.

if you ever need to make your own data structure If you do want to

Again, with all things, you're going to see maps all over the place because React needs to reference

And then if you wanna see how many items are in a map, And can you can you delete everything from the box itself? You can do all of those things,

Specific use case. So what you're saying is I should always use maps for everything now.

map on a map.

lookups, things like that. And and so to be be clear, would be way more performant than even doing, like, an object

filter, all of that stuff. I got that's more for sets, but you don't have any of those for sets either. You just have a for each or a for of loop or a symbol, which is a symbol is a way to

dictionary, a key of a map can be literally anything, and it Can an array

Stuff. And a lot of times that does make sense. And then some cases you say, oh, you know what? This is more something that I should be using an object for.

Another question. So unlike an object, are you not able I think that's, like, the biggest thing. Right? Because you could think if you have, like like, you were saying the pixels a 2nd ago. I think there are times when An array makes way more sense than. Right? Let's say you have an array, and that array is here's 10 pixels.

not something that you can use with these. Right? Because if you spread out a map, what are you getting? The internals of the map and not

as the keys, then a map is where you wanna go. Interesting. Yeah. That's a good Good way to put it. Right? You're using it potentially as a data store.

that that works with objects. You know, like, the thing with objects is if that object has been extended And when you are rendering them out Yeah. You could say or when somebody hovers, you simply just add that iterables, data science And then in the case of rendering it out, you simply just say if

convert it back to an object or array, do your work and then throw it back in.

to

So when you get into I want to do this object dish thing or array ish thing with a map, filter or find or reduce any of these type of things.

And I wanna be able to use No. I'm saying

We gonna be, you can't map the map. You got gotta add the set to the map, but not the set to the set. Jeff. Yeah. Yeah.

Okay. And lastly, because of that, I would assume that means the Spread operator is

from another object and you try to access a property, div or that span to the set as alright. That one's been hovered. And then when you're rendering them out, you say, alright. If this you create a totally separate object but you don't want to stick that data on the element. So a button, between a number which can sometimes be a little bit annoying, if you want to track how many times a button has been clicked Okay. Because a set is a group of items.

access properties directly. You have to use a dot get to access the value of a property, right? Correct. Yes. If you you can't just say, like,

Mhmm. Yeah. The language is tough here. But okay.

With a map, you can literally just query selector, same with sets. It's based on insertion order. However, you cannot sort a set.

and stick that dom element as the key. So So you see what I mean by that? The key of a map can be anything. And then if you ever want to reference how many times an element has been clicked, you simply just say, like

And you somehow create a unique ID for that an array of comments and you want to delete can be any type. So the key of an object can be 3 things. Do you know what those 3 things are

this button been clicked? Looping over items in a map is pretty straightforward.

Right? There's this idea in JavaScript that sometimes you wanna keep a dictionary or a running tally red.

and then you reference it. Like, maybe the maybe you have an ID 123 on that div.

You can give it any value that you want. So again, if you have but you cannot say give me a list of the things you have in the box, And you cannot open the box up and see everything that is in the box. There's no way for you to know what is in there.

If you have an array of items and you wanna group them by a specific person, like, we have 20 utterances in this show, and I wanna group them by the ones that I've said in the ones that Scott have said, I don't have to get the ID of Scott, with get set has delete and clear methods, possibly use a set or there's also like the weak versions of each of them is you can still add things to them. You can still delete things to them. You can still check if an item is in your set or map, but

You with an object, you would either have to stick the number of clicks on the object itself or it's gone from the weak set or weak map as well, and you don't have to explicitly go and delete them From your map or set, they're just garbage collected. So let me let me understand if I I got this correct. So you could think of them as, like, of a map is pretty simple. You say new map and you can pass it It's really easy to delete something. So let's say you have that has getters, setters, Skip 1, spread after.

data about something, a button that I talked about at the very top of the hour.

of a website with JavaScript, Have a data bucket like you said with the my click count get and you pass it the dom element not all cases, but in many cases, Reaching for a map and a set or a map or a set versus an object or an array can sometimes be a pleasant experience, can sometimes be

This is a very common thing to do is we regenerate it and throw it in the map for next time that it's Cached.

key So that's an interesting thing to think about here. On the the same idea, let's say you have a grid of 50 pixels or 50, like, spans. Every time you hover over one of those fans, it fills with a different color because you've highlighted it. So you might have a bunch of pixels and you want to check. All right. Is this value somewhere in this set? Sets are actually honey garlic arrays.

are When those

whenever we need them.

It's the same code as my personal westboss.comopengraphimages.

And what are we using to store you can think of maps as sort of a key value store, and not the whole prototype chain look up has own property business So, you know, when you call object entries on something you get an array in each

the as a cache, we're using a map. So And somebody removes that div or that button from the page, You can just create a blank map or you can pass it a what I call entries.

you know, analogous to maps, but array like.

It could it could be anything. You could literally put the show as a key in the map. And then when we somebody requests a Open Graph image,

It could be like even I don't know if you would implement, like, an in memory cache with a dot map, but,

And

I mean, that's that's the type of thing I think about when I think about needing a a data store. Let's talk about where we used a a map as a cache. So on the syntax I can ask that box.

Word. That that's a very good example. It's it's using it as a cache. Okay. Well, let's get into sets now. Okay? And we're talking about the array like things that are,

We check if that map already has the image. If so, we return the cached version, take an array, throw it into a set, show.title.

unique

Oh, it doesn't have there's no find. There's no filter. There's no reduce. So like, okay, well, if I'm buying into set now, you're telling me I can't array includes or you can put items into a set as a value itself.

add,

where, int arrays as well in graphics world. But

and graphics processing. Yeah. I think a part of that too is that that the fact that values are

not CSS.

delete, Grouping item. The key value is a sub array.

You can use the font face API objects and arrays.

to

What is the specific use case where You might reach for a set specifically.

Inside of a set, objects or something like that because they're analogous to objects in many ways.

You're you're thinking, I'm gonna put this into an array. Oh, wait. Maybe I should be using sets here, because I heard about it on Syntex.

If you want to load a custom font into maybe maybe see is like, is this a use case where I could Use a specific map.

but, like, when specifically

It's much more primitive than that, but a lot of the new and upcoming stuff. You cannot Or maybe 2 things.

Web APIs by reference, meaning that if you add the same object, So

Like, let's say you have, like, You do not have reduce 1st item is the key. 2nd item is the value. You can create a map from those long GitHub threads on Should we use .length or .size? But Yeah. That's one thing to remember is it's not .length. It's it's .size, which is a property of how many items are in the set. Yeah.

are being built on top of sets, and I think that, again, this is a very nice primitive in our language. If you're trying to build your own object or set that has a really nice API to it. Set is a really good standing point starting point for it. So the font face API, select the dom element itself,

this all sounds really great, and then running it through a loop to manually group by

and that is based on a set and it has the whole deletes, and clears. This is a very good primitive to build on top of of data about a person, you could use that entire array as the in deciding if you want to use the map is a, do I want the clean API

Monday. Monday. Monday. Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing,

soft skill, web development, the hastiest, the craziest, the tastiest web development treats. Coming in hot. Here is Wes, Barracuda,

What is up with maps and sets? My name is Scott Tolitsky. I'm a developer from Denver, and with me as always is Wes Bos. What's up, my man? Hey. I

probably 8 years or so. Stuff. It still feels like a relatively new part to JavaScript. But

Tolinski.

in The browser comes along and says, that because it has all of these things and it is and then it's a PNG at the other end. We just convert those to base 64

Welcome to Syntax. On this Monday hasty treat, we're gonna be talking about you should be using maps and sets within JavaScript.

Boss, and Scott, El Toro Loco,