What is a Map?

The concept of a Map is simple. It’s a way for us to store key value pairs. You can use the key to retrieve the value.

Objects vs Maps

From the definition above, you can tell that Map sounds an awful lot like an Object. In fact, Objects have been used as maps until Map was added to JavaScript. Both are based on the same concept - using key-value pairs to store data.

How are the two different?

Keys in an Object can only be simple types (String, Symbol). However, keys in a Map can be any data-type including Function & Object. Another big difference is that in an Object the original order of element isn’t always preserved but in a Map it is.

Maps in action

Unlike Objects, there is only way to create a new instance of Map & that is by using the constructor. The Map constructor accepts an Array or any other iterable object whose elements are key-value pairs.

const map = new Map();
const map = new Map([[1,10],[2,20]]); // map = {1=>10, 2=>20}

Accessing data

With Objects, we use the dot notation to access specific elements. With Map we can use Map.prototype.get to do the same. In both cases, we must know the key to access the value.

map.get(1); // returns 10

Checking if an element exists

To check whether an element with the specified key exists we can use Map.prototype.has.

With Objects we can use Object.prototype.hasOwnProperty to check if a property exists. Note: hasOwnProperty only returns true if the object has the specified property as its own (not inherited).

map.has(1); // returns true
map.has('1'); //returns false because the type doesn't match

Adding new elements

Map supports adding new element by providing Map.prototype.set() which takes 2 parameters: key, value.

map.set(3,30); //{1=>10, 2=>20, 3=>30}

If you pass an existing key, it will overwrite the value mapped to that key with the new value .

map.set(1,15); //{1=>15, 2=>20, 3=>30}

Iterating over elements

Map is an iterable which means we can use Map.prototye.forEach or for...of to loop over all the elements. Slightly better syntax than Objects where you either loop over the keys using Object.keys or for...in.

for (const [key, value] of map) {
  console.log(key + ' : ' + value);
}

map.forEach(function(value, key) {
  console.log(key + ' : ' + value);
});

// Both of these print out the following
// 1 : 15
// 2 : 20
// 3 : 30

Removing elements

In order to delete an element from an Object we can use the following syntax

delete object.id;

Map comes with a Map.prototype.delete method which returns a boolean value indicating whether the operation was successful.

let isDeleted = map.delete(1); //{2=>20, 3=>30}
console.log(isDeleted); //true

isDeleted = map.delete(10); //{2=>20, 3=>30}
console.log(isDeleted); //false

Map also comes with a Map.prototype.clear method which removes all elements from the map.

What’s your size?

Finding out the number of elements in a Map object is as easy as calling the Map.prototype.size method. This is much cleaner than Objects where size has to be manually computed using Object.keys.

console.log(map.size);

console.log(Object.keys(obj).length);

When to use which one

When you just need a simple key-value store Object is a good choice. Creating objects & accessing data on them is faster than a Map. A Map will be better choice when storing a large set of data. However, if you know that you’ll be adding/removing elements a lot then Map is more desirable. There is a considerable performance downside to removing elements from an Object.

Written by Watandeep Sekhon.
Website / Twitter / LinkedIn / Instagram