Published 03 Nov, 2022

Map And Set

Nick Corona
Category Javascript
Modified : Feb 01, 2023

This article was written by Nick Corona. It covers a lot of details targetting javascript and various other things. Nick Corona is a tech enthusiast and creative writer and has been writing for a long time now. He has written around 10 posts here and has been a regular contributor to forum discussions.

Today I am going to write about something I have been playing with a bit recently. Previous to a couple weeks ago, I was pretty much in the dark about Map and Set. I was not sure what they were, how they were used and to be honest, I didn't really see the point of using them. In this blog post I will attempt to explain what the are and how we can use them.

So what are Map and Set exactly? Map and Set are collections of data. They inherit from their Object parent, so you can use the Object constructor methods. Map and Set also have their own methods but those will not be usable by the Object class. Yet the two work in different ways, and their uses vs each other can be quite specific. Map will store data in key value pairs just like and object. But one of the (in my opinion) nice things about Map is that a key can be any type of data structure and WILL NOT be converted to a string. This can be quite handy and convenient.

To construct a new Map it is fairly straightforward. Generally one will set a variable to a new instantiation of a Map. Then we use built in methods as well as any other javascript methods or whatever to fill it up. The most basic way to add to our Map is to set key, value pairs using the .set method for Map.

Alt Text

Notice the key's type. Like I said earlier, we create an object but the keys can be any type and will not be converted to a string which is pretty cool. Also we can make a key valued pair object with an array using our array methods and our .set method.

Alt Text

The built in Map methods are very useful. We can navigate through the object very cleanly and efficiently using these. Using the regular javascript way to access obj values (map[key]) will work, but in order to maximize the efficiency of the Map, we want to use .set and .get.

Map also has iterators that we can use. We can access the keys or the values using .keys() or .values() just like a regular object.

Alt Text

A Set is similar to Map, but only stores values and the values can only occur once. This can be extremely useful for certain situations. The obvious case would be to obtain a unique collection. Now Set can take in an array and turn it into a unique Set, but the set will become an object. What we can do though to fix this is just turn it into an array and boom we have a unique function. I went to a coding bootcamp where we learned ruby before javascript and the ruby language has a built in unique method. I always wondered why javascript didn't have this as well. Even without using a Set it is fairly easy to make a unique function, but I always wondered why it wouldn't just be implemented in a JS update. With a Set we can do this even easier than how I would normally make an array unique.

Alt Text

Set also has its own built in methods like Map, and most of them are the same. In a Set however, we would use set.add(something) instead of map.set(some key, some val). We iterate over a Set in the same way as map. IE with .keys(), .values(), etc. You can probably imagine the use cases for both of these collection structures. The unique example was just an obvious example, but understanding how Map and Set works can make lots of actions easier and less convoluted. I hope you enjoyed the article.

Meet the author

Learn more about the author of the post

Profile Picture
Nick Corona

I talk about technology day in and out, nature lover, gardener and an artist. In my free time I contribute to various projects on github.