|

ES6 Sets and Maps

es6 sets and maps

ES6 includes two data structures which help programmers get work done without reinventing the wheel. These two data structures are those of Sets and Maps. A Set can be thought of as a collection of elements which are both unordered, and unique. That is the key to remember. The purpose of a Set is to guarantee the uniqueness of it’s items. A particular element is a member of the set, if the set contains the element. The set does not change if you add an element which is already a member of the set. A Map on the other hand is a collection of key-value pairs. They are quite similar to objects, however maps can have keys of any type, and the keys are not converted to strings. Let’s expand our learning of Sets and Maps in ES6 right now.


ES6 Sets

Sets are collections that with deal with single values or single objects. There is no mapping from a key to a value such as you might find in a Map. Like we mentioned in the introduction, a Set is to group together items and guarantee their uniqueness. As always, let’s look at some code.


Using .add() to add elements

Above we initialize a new Set and assign it to the pouch variable. Once we have that set, it is easy to add items with the .add() function. We log out the size of the set after adding Weapons, Bows and Arrow, and Shields, to see that we do indeed have three unique items in the set. Recall we said that you can not add an item to the set twice? Let’s prove that here.

We add another set of Weapons, but check it out. The size still shows as 3.


Passing an array to the Set constructor

You can bypass the .add() function by simply passing each element as an array to the Set constructor. Here, we will set up a new Set using just this technique.

Just like with the .add() function, if you pass an array of values to the Set Constructor, duplicates will be ignored. For example, let’s see how this works here.

So even though we had an array of 6 items, only 3 were added to the set. This is because 3 of them are duplicates, and duplicates are not added to a set.


Checking set membership with .has()

You can check to see if a Set has a particular element with the .has() function like so:


Removing an entry from the set with .delete()

Using the delete function on a Set can be used to remove a particular element. Below we will remove the Korok Seed from our pouch. Upon removal you get a boolean value. If you get true, it means the element was removed. You will get false if you try to remove an element that is no longer in the set.


Using .keys(), .values() and .entries() on Sets

Since a Set does not really have keys and values, you will find some interesting results with these. Let’s see.

From this, we can see that .keys() and .values() give the same results. That is to say, each value is both the key and the value. When we make a call to .entries(), we confirm this as we see an array which has the value in both the key and value positions.


Iterating over sets with forEach and for...of

Let’s try iterating over a Set with the forEach construct.

We get a similar result when using for...of as seen here.


Emptying the set with .clear()

Finally, you can empty or clear out the set you are working with using the .clear() function.


Weak Set

We also have Weak sets in ES6. The main difference between Sets and Weak Sets is that their elements may disappear once they are garbage collected. The use cases for weak sets are probably not large but we include them here for completeness. Weak sets are not iterable, can only store objects, and you don’t have access to the size of the set like you do with normal sets. In any event, let’s look at a weak set here.


ES6 Maps

A map is simply a key value pair very much like an object in JavaScript. You could consider any JavaScript object to be a map. What makes this new form of a Map unique, is that you can use an object as a key. This was not possible with the standard JavaScript object. Let’s see a few examples of using an object as the key in Maps.

Here we set up two variables which each holding an object. We go ahead and create a new Map and store that in the players variable. We then use the .set() function to place a value in a given key. Note here that we place a value in the key of player1, and player2. When we log out the value of each key in the players map, we get Super Mario! and Awesome Luigi! So as we can see, we are actually using an object as the key in this map. Very neat.


Checking map size with .size

You can easily access the size of a map with the .size property like so.


Removing an item with .delete()

We make use of the .delete() function if you need to remove a value from the Map. You pass in the object, which is the key, to the delete function in order to remove it.


Empty the map with .clear()

To empty or clear out your Map, just use the .clear() function like so.


Passing an iterable to the Map constructor

In this example we first set up an array of objects. From there we create a map, passing in the iterable to populate our map. We then simply check it’s size, and get the two values held in the map.

We can make use of the spread operator when working with Maps as we see here. First we check the .values() and then we check the .entries().

Spreading out the entries


Weak Maps

With a weak map, it holds a weak reference to the object. When one of those keys such as shield1 or shield2 gets garbage collected, it automatically gets removed from the weak map. In this example below, we set the key shield1 of the weak map to null. This makes it ready for garbage collection. So when we go to log out the size of our weak map, we find that it is undefined.


ES6 Sets and Maps Summary

This tutorial gives us a great overview of how Sets and Maps work in ES6. To summarize, Sets are an unordered collection of unique elements. An element is a member of the set, if the set contains the element. Adding more of the same elements to the set does not increase the number of elements in the set, as only unique values can be added. Maps are a collection of key-value pairs much like regular objects. If you provide a key, you can fetch the corresponding value. There are a few differences between objects and maps, with the main difference being an object can act as the key of a map. You can learn more about Maps at the Mozilla Developers Network, in addition to Sets.