ES6 Map & Set

ES6 introduced the new data structures Map and Set. Maps and sets were developed to address some of the shortcomings of objects and arrays, respectively, though both Maps and Sets share some characteristics of both objects and arrays. However, they are not meant to be a replacement of these data structures.

Map

The Map object was introduced in ES6 to provide a native javascript hashmap data structure. Maps, like objects, hold key value pairs. Similarly to arrays, however, Maps also remember insertion order, and have a size property similar to an array’s length property. A Map key can be any value, even an object or a function, not just strings, integers and symbols.

Map Declaration and Initialization

A new instance of a Map can be created by calling the Map constructor with the new keyword. A new Map can be initialized with or without values:

Maps have some useful methods and properties:

Set sets a key and value pair on a Map
map.set(key, value);
Has returns a boolean if key exists on Map
map.has(key);
Get returns the value at the provided key
map.get(key);
Delete deletes a key/value pair from Map
map.delete(key);
Clear deletes all key/value pairs from Map, and returns an empty Map
map.clear();
Size returns the amount of key/value pairs in a Map
map.size;

Duplicate Keys

Maps do not allow for duplicate keys. In an attempt to set a a new key that already exists on a Map, the initial key will remain, while the value stored at that key will be updated to the passed in value. The original insertion order remains, as well. Here we see that the attempt to add ('Matrix', 2007) to our map has updated the first key’s value to 2007, overriding the initial value of 2005. As well the map size remains (3).

MapIterator

Maps have a built in iterator(MapIterator), which is returned by map.entries(), map.keys(), and map.values().

Because of this, Maps can be iterated over using forEach and for...of loops.

The output is the same both times, and the data is returned in the order of insertion.

Sets

In mathematics, a set is a “collection of different things.”. In javascript, Sets are a collection of different elements of any value type. While similar to arrays, they can contain no duplicate values. Like Maps, Sets keep track of insertion order.

Set declaration and initialization

A new instance of a set can be created by calling the Set constructor with the new keyword. A new set can be created with or without input values:

Sets have some useful methods and properties:

Add adds a value to a set
Set.add(element);
Has looks up a value in a Set, returns a boolean
Set.has(element);
Delete deletes a value from the Set
Set.delete(element);
Clear clears all values from the Set
Set.clear();
Size returns number of elements in the Set
Set.size

Let’s assume I didn’t just clear all the Toyota models from my example set above, and try to add some more Tacoma’s since everyone wants one these days. As you can see, these insertions do not happen, the Toyota Set remains the same:

Iteration

Like Maps, Sets have values(), keys(), and entries() methods, which here return a SetIterator to get all of the Sets values. While set.values(), as you may have guessed, returns a Set’s values, so does set.keys(). As well, set.entries() returns a SetEntries of [value, value] pairs:

Like with Maps, we can access a sets values using forEach or a for...of loop. Both will log the same list to the console, respecting insertion order:

Conclusion: When to use Maps and Sets?

Maps have similarities with both objects and arrays, though they are much more like objects than arrays. So when might you want to use a Map over an object? For one, if you want to have keys that are not only strings. Maps only accept keys that are explicitly inserted in them; they do not inherit default keys like objects do from the prototype object. This combined with the fact that duplicate keys cannot exist on Maps would make it a good option for storing large amounts of key/value pairs where key collision is of concern. If insertion order is important, Maps would be preferable. As well, the size property of Maps is more convenient than finding the size of an object, where you may have to pass in an object to Object.values() and then access the length property of the returned array.

Like with Map, Sets are preferred over an array when a collection of unique elements is needed. Set methods like add and delete allow for more efficient element insertion and removal; whereas array methods like shift, unshift, and slice, where iteration is happening under the hood, make for potentially worse time complexity.

Sources:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

https://www.freecodecamp.org/news/how-to-use-javascript-collections-map-and-set/

https://www.zhenghao.io/posts/object-vs-map

https://medium.com/@rabailzaheer/mapping-sets-and-maps-advanced-javascript-collections-66a35deebe66