While working with JavaScript, developers waste a lot of time on choosing the right data structure.
Objects and Arrays are the primary data structures used to store collections of data. Objects are used for storing key/value pairs, and arrays- for indexed lists. To make developers’ life easier, ECMAScript 2015 represented two new kinds of iterable objects: Maps and Sets.
Maps
A map is a key-value pairs collection that can apply any data type as a key, maintaining the sequence of its entries.
Maps contain both elements of objects and array. But, conceptually, they are similar to objects.
The primary distinction is that maps allow any type of keys.
The main properties and methods of maps are the following:
- new Map() – creating the map.
- map.set(key, value) – storing the value by the key.
- map.get(key) – returning the value by the key, undefined if no key exists in the map.
- map.has(key) – returning true if there exists a key, and false otherwise.
- map.delete(key) – removing the value by the key.
- map.clear() – removing everything from the map.
- map.size – returning the current element count.
So, you can use new Map() to create a map like this:
Javascript Map of objects and array
From this example, you can notice that they are not converted to strings, as any type of key is allowed.
Also, maps are capable of using objects as keys as demonstrated below:
Javascript maps use objects as keys
One of the most significant map features is using objects as keys:
Javascript maps use objects as keys
In the example above, visitsCountObj is an object that converts all the keys like js to strings. So, the string key is "[object Object]". But, it is not completely right.
The SameValueZer algorithm is used for testing keys for equivalence. It is similar to ===. The only difference is that NaN is equal to NaN and can be applied as the key. You can’t change or customize this algorithm.
There is another option, too: the calls can be chained, as each map.set call returns the map, like this:
map.set('10', 'str')
.set(10, 'num')
.set(false, 'bool');Iterating over Map
Three main methods exist that allow looping over a map. They are as follows:
- map.keys() – returning an iterable for keys,
- map.values() – returning an iterable for values,
- map.entries() – returning an iterable for entries [key, value], it’s applied by default in for..of.
An example is as follows:
Javascript iterating over map
Also, there exists a built-in forEach method, equivalent to Array:
Javascript iterating over map
Using Object.entries
Once a map is generated, an array can be passed with key/value pairs as follows:
Javascript map using object entries
A map can be created from an object as follows:
Javascript map using object entries
Object.fromEntries
After learning how to create a map from a plain object using Object.entries(obj), let’s get to the opposite.
The Object.fromEntriesmethod allows performing the reverse process. Once you have an array of [key, value] pairs, it will generate a object from them like this:
Javascript map using object entries
So, Object.fromEntries can be used for getting a plain object from the map. Once you store data inside a map, you should pass it to a third-party code, expecting a plain object, as demonstrated below:
Javascript map using object entries
The (*) line can be made shorter:
let obj = Object.fromEntries(map); // .entries()Sets
A set is a specific collection of “set of values” where every value can take place only once.
The primary methods used by set are shown below:
- new Set(iterable) – creating the set, and if an iterable object is supplied (usually an array), copying values from it to the set.
- set.add(value) – adding a value, returning the set itself.
- set.delete(value) – removing the value, returning true if the value is there at the moment of the calling, otherwise false.
- set.has(value) – returning true if the value is there inside the set, otherwise false.
- set.clear() – removing all from the set.
- set.size – counting the elements.
Set can be useful in various situations. For example, visitors are coming to your site, and you wish to remember all of them. Take into account that repeated visits must not lead to duplicates, and each visitor should be counted once. It can be easily done with Set like this:
Javascript map set
Iterating over Set
Looping over a set is possible either with for..of or with for..of like this:
Javascript iterating over set
Here is an interesting and a bit funny fact. The callback function that is passed inside forEach includes three arguments: a value, the same value valueAgain, and the target object. As you can see, the same value can appear in the arguments twice.
That can seem strange but helps in replacing the Map with Set in particular cases.
Summary
In this chapter, we represented to you Map and Set. Now, let’s summarize what was covered in general. While Map is a collection of keyed values, Set represents a collection of unique values. Each of them has its methods and properties.
Both of these data structures add extra capabilities of JavaScript and can simplify common tasks (for example, detecting the length of a key/value pair collection or deleting duplicate items from a data set).