ES6 Map & Set
Published: 2023-12-04 14:35:04

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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fj3reg3w9diclsugskzw.png)

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;`


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5l32m4gupnht26uj4310.png)

**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)`.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xnvs9lb7c2l7bz99mvf3.png)

**MapIterator**

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x65pbjzl3i07avize5d0.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ubwuykboynw237vxmt7c.png)

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."](https://en.wikipedia.org/wiki/Set_(mathematics)). 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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swbnngwyiugbprits71e.png)

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`


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulkqy4jfhbbotv4d96cw.png)

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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7sie3pfbgcpgp6aajxr5.png)


**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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3gb0irzz2x67lrce9ar6.png)

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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/saq684g2bxasffu3p6eo.png)



**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_