JavaScript Object Types I Didn’t Learn in College

You ever come across something in your professional life that people make you feel like you should already know how it works, but in reality this is the first time you’re even hearing about it?

That’s how I felt the first time I came across Sets and Maps.

Both of these object types, in my defense, were not part of the language at the time I was first learning it, at least not officially. Major support for these features didn’t come around until ES6, and even looking at browser compatibility tables will show you that IE 11 only partially supports some core functionality. Not to sound old, but during the days of IE 6 support, this wasn’t really taught to budding front-end engineers (and technically I was being taught Flash at the time anyway, but that’s covered in my intro post).

So, what makes these special, and how can you use them?

Sets

“They’re just a fancy array…..right?”

This was more or less my initial understanding of what a Set is. In a very reductive way, “yes?”, but in a more specific and nuanced way, “no”. Sets are actually a fancy type of object that points to a reference to a collection of key-less data. What makes sets powerful is that they are enforced to contain only unique pieces of data.

Let’s try making one:

As you can see, Sets allow for you to put whatever you want in them, and even if you add the same items multiple times, it will automatically de-dupe them for you.

One thing to note is that Sets use “.size” rather than “.length” like an array. Who needs consistency? Another important “gotcha!” that may trip up newer devs is that it’s enforce uniqueness takes into account that objects are referential. Take the slightly modified following example:

Even though I’ve added two extra items that are “the same object” as my game variable, they are still counted as two new entries. This is because objects are referred to by their location in memory, not by their human readable contents.

Here are some more methods the Set data structure comes with:

The big takeaways here are the following:

• You can iterate over sets using .forEach(), which has a function taking three arguments: the value at the current index, that same value a second time, and a reference to the entire set
• .delete() removes an item from the set. If an item is an object or array, you need to pass a reference to that value in here to remove it
• .clear() empties the entire set.

Another cool thing about Sets is that they retain insertion order. While object keys in modern JavaScript also support this functionality, legacy browsers do not and that is an important distinction. Let’s have some fun with that:

In this example, we have a Set of numbers that then gets spread into a new array, but I am .add()-ing the number 6 to the Set right before it is iterated over. Lastly, I call .shift() on that result.

What do you expect to find at index 4 of myArray?

Was it….. 7?

To break down what is going here:

1. First I am declaring a new set
2. Before it gets broken down into pieces that get placed inside of an array, I am tacking on the number 6 to the end of that series of numbers
3. Because Sets ensure uniqueness, the duplicate 2 is removed
4. Lastly, .shift() with no arguments deletes the first entry in an array, so we are left with

[2, 3, 4, 5, 7, 6] (and remember, arrays start at index 0!)

Maps

Maps are, in short, an object with key-value pairs, but, the order in which said keys were added are significant. There are a few other differences that make Maps more than just “Object Part II”; here are some key takeaways found on MDN.

• Maps are empty by default, where as in most cases an empty object isn’t actually empty. (Note: creating an object in more recent JavaScript engines using the syntax Object.create(null) will make your object truly empty, but I have literally never done this in my entire career)

• Keys within a Map can be Objects or primitives. Since Functions are Objects in JavaScript, you can even use one of them as a key. It’s an easy way to let others know you enjoy hurting people

• Maps are directly iterable, where as Objects require you get their keys first before being able to loop through them.

Here’s a look at some Map functions in action.

As you probably noticed, many of the functions related to Maps are very very similar to those of Sets. You assign values the same way, get values the same way, and the property for getting the number of items is .size rather than .length like it is with an array.

For further information on all of the methods and properties available to you when using Maps, check out the MDN documentation on the subject.

WeakMap and WeakSet

These two types of object I honestly am just learning about as I am writing this. The biggest takeaway I am getting from the documentation is that WeakMaps and WeakSets only work with objects. In the case of Maps, keys can only be an object, not a primitive (number, string, or Symbol), and these kinds of Sets can only contain objects. These rules also mean that since references to objects are held weakly, it is possible for that data to be garbage collected and have contents removed if said reference isn’t being used elsewhere.

The examples given for when to uses these object types is a bit over my head at the moment, but if you are curious about the performance boosts you get from using them appropriately, please check out their documentation.

That being said, I would feel as though I was doing my readers a disservice if I didn’t at least mention them to pique their interest into learning more.

---

And there we have it: a surface level introduction to Sets and Maps. Do you use these often professionally, or was this new for you too? What’s an example you can come up with where a Set or a Map comes in handy?

=> { }