Map Objects

The latest thing I didn’t know I needed in JavaScript

My study of algorithms and data sets has brought me to yet another new topic: Map objects. As stated in the MDN docs:

The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value.

That doesn’t seem much different than your standard POJO(Plain Old JavaScript Object), minus remembering insertion order. But, this is misleading! A few cool differences:

• A Map’s key can be any value.
• The number of items in a Map can retrieved using its size method.
• A Map is iterable.
• A Map performs better in situations with frequent addition and deletion of key/value pairs.
• Map objects have built in properties and methods.

Sounds pretty cool, huh? Let’s take a further look.

Using Map Objects

Creating a new Map

let recipe = new Map()

To add to a Map, use the built in set method

recipe.set('grilled cheese', {'bread': 'two slices', 'butter': 'one tab', 'cheese': {'cheddar': 'one slice'}})

Taking a look at the console, everything is there, and laid out pretty much as expected.

To verify if something is in a Map, use the has method.

recipe.has('grilled cheese')
//returns true
recipe.has('bacon')
//returns false

To get the value of a key, use the get method.

recipe.get('grilled cheese')
//returns bread: "two slices", butter: "one tab", cheese: {cheddar: "one slice"}}

To get the size, use the size method

recipe.size
//returns 1

To clear the whole Map, use the clear method. To delete one key/value pair, use the delete method.

Iteration Methods

This is where Map objects get really cool, in my opinion. The iteration methods are not like anything you can easily get with a POJO and fun to learn. Let’s use a simpler Map, one where the key doesn’t point to a value of a nested object. This time, let’s use the 1996 Chicago Bulls lineup.

My team Map looks like this:

{"guard1" => "Ron Harper", "guard2" => "Michael Jordan", "forward1" => "Scottie Pippen", "forward2" => "Dennis Rodman", "center" => "Luc Longley"}

To return just they keys, use the keys method

team.keys()
// returns {"guard1", "guard2", "forward1", "forward2", "center"}

Conversely, to return just the values, use the values method

team.values()
//returns {"Ron Harper", "Michael Jordan", "Scottie Pippen", "Dennis Rodman", "Luc Longley"}

Looping

Now, one cool feature we can do is loop through and extract some of this info. Let’s say we needed to access all the names individually. To do that, we could implement a for…of loop over our team.values()

for(let name of team.values()){
    console.log(name)
}
//Output 
// Ron Harper
// Michael Jordan
// Scottie Pippen
// Dennis Rodman
// Luc Longley

Conclusion

Map objects provide an alternate tool to POJO’s. They have built in methods that allow us to easily add, extract, delete, and iterate through their key/value pairs. And, if you’re anything like me, iterating through an object was always a bit mystical. Now, with the help of Map objects, we’re well on our way to further mastering data and JavaScript. As always, don’t forget to reference the docs, and happy coding!