While hunting for my first job as a software engineer, I have spent a LOT of time on LeetCode and HackerRank. Everyone has a different strategy for how they approach this studying. At some point after I’ve solved a problem, I like to look at how other individuals have approached the same situation. And from doing this, I’ve picked up two very valuable assets in JavaScript: map and set.
SET
I find myself using Set all the time. It is an exceptional tool for removing duplicates in an array. Imagine you have let arr = [1, 2, 3, 4, 1]. Run [...new Set(arr)], and you will get [1, 2, 3, 4]. Great! But I know this is a limited use of Set so I wanted to dig a bit deeper.
What is Set? If we take a set like the one above and run typeof() on it, we see that a set is a type of object in JavaScript. It is worth remembering there are two structural types in JavaScript: objects and functions. Within the object family tree, we find arrays, maps, sets as well as WeakSets and WeakMaps.
So Set is a type of object. As Mozilla describes: “Set objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set's collection.” They key to set is the condition of uniqueness.
It is also worth noting that Set allows us to iterate over it. So we can call forEach on a Set. Several other methods also allow iteration: Set.prototype.keys() and Set.prototype.values() create iterator objects that return the keys or values of the set. If we had something like let mySet = new Set([1, 2, 3, 4, 4, 4]), mySet would be of size 4 and would equal {1, 2, 3, 4}. What is important to note about this is that if we wanted to to find the values or keys of this set, the result would look the same, because in this case, the values and keys are effectively the same. Set store objects and arrays inside of it as well, creating nesting. If we wanted to add let arr = [1, 2, 3, 4, 4] to mySet by performing mySet.add(arr), mySet would take on size five and look like {1, 2, 3, 4, arr: [1, 2, 3, 4, 4]}. It is noteworthy here that set allows non-unique values inside the this array because it is not looking inside the value stored.
MAP
Map turns out to be quite similar, but does not uphold the uniqueness factor. Like set, a Map does not use or contain keys by default, but if keys are added, the can be any value (e.g. primitive data types, functions, objects). Similarly, Map allows out to iterate over, and values are placed in the sequence in which they are added (or set). There’s a StackOverflow post containing an older explanation of the differences between objects and Maps that is helpful.
Objects are similar to Maps in that both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Because of this, Objects have been used as Maps historically; however, there are important differences between Objects and Maps that make using a Map better.
An Object has a prototype, so there are default keys in the map. However, this can be bypassed using map = Object.create(null). The keys of an Object are Strings, where they can be any value for a Map. You can get the size of a Map easily while you have to manually keep track of size for an Object.
Use maps over objects when keys are unknown until run time, and when all keys are the same type and all values are the same type.
Use objects when there is logic that operates on individual elements.
With both Map and Set, there are a lot of properties and methods
Tania Rascia has a great post outlining some of these, but essential ones are set, delete, get, has, clear, and size for Map. All considered, Set and Map are essential tools in modern JavaScript.
Top comments (0)