Javascript ES6: Map vs. Object

Introduction to Maps with Javascript

Objects are one of Javascript’s data types. They are used to store various keyed collections and more complex entities. With this capability, they are probably one of the most important data types as they form modern building blocks. They are more complex because they can contain any combination of primitive data types, such as Number, String, Boolean, etc, as well as other reference data types (like other objects). Objects can be defined as an unordered collection of related data in the form of “key-value pairs.” With the introduction of ES6, we were given the option of the Map object. Maps have a lot of similar features as Objects, but they also have some differences. So let’s get into it…

2020 Electoral Map from 270towin.com

What is a Map?

No, we’re not talking this type of Map! So as with Objects, Map is a collection of elements where each element is also stored as a “key-value pair.” With objects, the key must either be a String or a Symbol, whereas it can be any value within Maps. Maps also keep the order of keys in the order that they were inserted into the Map. Since Map has the similarities of an Object, a Map can technically be called an Object, but an Object cannot be called a Map.

Construction

Maps and Objects are constructed in different ways. With objects, there are multiple ways to construct an empty object, but with a Map, there’s only one way:

object vs map construction

Adding Elements

As before, objects have multiple ways to add new elements in, whereas maps only have one method called .set(), which takes a (key,value) pair as parameters:

object vs map — adding elements

As you can see above with both data types, setting a value to an existing key will just replace the value to that key.

Obtaining Values by Key

Using the examples above, we can obtain the values by accessing them with the key. The syntax is similar to that of setting them in objects, whereas with maps uses a different method called .get(), passing the key as an argument:

object vs map — accessing value by key

Confirming If a Key Already Exists

This is where things start to differ with the two data types. Map has a method called .has() that takes a key as an argument to return a boolean on if it already exists in the map. As for Objects, it takes a little bit more to confirm. Thankfully with ES6, Objects has new methods that could help us out:

object vs map — confirm if key exists

While there are many different ways to confirm if a key exists in an object, I found the method above to be the easiest. Object.keys() returns an array of all the keys in the object. We can then use .includes() on the array to confirm if the key in question exists.

Deleting Entries

Objects again do not have a specific method in which to clear out key-value pairs. Instead, the delete operator would need to be used. When clear out the object to make it an empty object, we would need to use the delete operator on each key-value pair. With Maps, they have both a .delete() and .clear(), which deletes a key-value pair and empties out the map, respectively:

object vs. map — delete/clearing entries

Size/Length

Objects do not have direct way of getting the size/length of the object like how arrays have .length. Instead, we would need to work a little harder again to get this kind of information (again, different way, but I like to use Object.keys()). With Map, it, of course, has access to .size().

object vs map — size/length

Recap

As you can see with above, maps seems to have the better performance and easier and cleaner code. There are still situations where objects would be more ideal. Examples include situations where a simple structure is needed to store data or when JSON is involved as it gives direct support for object but not with map. There are still many other differences between map and objects that I didn’t go through above, so check out the resources below for more information!

Resources:

1. “Object,” MDN Web Docs Mozilla, accessed Nov 13, 2020, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
2. “Objects in Javascript,” Geekforgeeks, accessed Nov 13, 2020, https://www.geeksforgeeks.org/objects-in-javascript/
3. “Map,” MDN Web Docs Mozilla, accessed Nov 13, 2020, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
4. “Map in Javascript,” Geekforgeeks, accessed Nov 13, 2020, https://www.geeksforgeeks.org/map-in-javascript/
5. “Map vs Object in Javascript,” Geekforgeeks, accessed Nov 13, 2020, https://www.geeksforgeeks.org/map-vs-object-in-javascript/