ECMAScript 2015, better known as ES6, was many widely-adopted features including const and let variable declaration, array and object de-structuring, class keyword, and arrow functions (just to name a few). ES6 also includes a new datatype: the Map. While not yet as widely used as some of the other syntaxes previously mentioned, Map is basically a souped up javascript object with some pretty cool features. This post covers the basics of creating and using ES6 map and also compares it to the more familiar javascript object along the way.

What is a map?

Map is a datatype similar to an object (ok, technically it is an instance of an object) where data is stored in key-value pairs. Unlike traditional objects, keys can be any datatype (keys must be strings in objects). This is pretty nifty as we can now use numbers, booleans, and even objects as keys!

Creating our first Map

We make a map using the new keyword. Let's check out the difference between declaring a map vs. a plain old object:

// map
const firstMap = new Map();
// object
const normalObject = {};

In order to add key-value pairs, map comes with a set method that takes a key and value as its arguments:

// map
firstMap.set(1,'my key is a number!');
firstMap.set(this, 'using this as a key! WHATT??');
firstMap.set('boat', 'I can use strings too!');
//object
normalObject['1'] = 'my key must be a string...';
normalObject['this'] = 'my key is still a string (:';

This is particularly useful in front-end development because we can assign properties to object keys like DOM elements!

Working With Maps

Let's look at some of the most common map methods and their object equivalent:

• property look-up

// map
firstMap.get(this) // => 'using this as a key! WHATT??'
// object
normalObject['1'] // => 'my key must be a string...'

• delete key-value pairs

// map
firstMap.delete(this) // => true
// object
delete normalObject['1'] // doesn't return anything

Notice that Map returns a boolean confirmation upon delete --pretty useful when you aren't sure the key exists in the first place!

• iterating through all values (let's log all values)

// map
for(const [key, value] of firstMap){
  console.log(value);
}
// object
Object.keys(normalObject).forEach( key => {
  console.log(normalObject[key];
});

• counting key-value pairs:

// map
firstMap.size // => 2
// object
Object.keys(normalObject).length

• checking if key exists

// map
firstMap.has(5) // => false
// object
normalObject
console.log('key' in normalObject) // => false

With objects, 'key' in normalObject will return true if 'key' exists on the prototype. maps do not allow prototypal inheritance, this ridding us from the 'where is the property actually from' puzzle.

Conclusion

By implementing some subtle yet powerful changes, ES6 Map allows us to save key-value pairs in memory in a more logical, legible way. Operations like lookup and iteration are done with clear and concise code - a definite step up from the verbose and somewhat confusing object syntax. In web development, Map is particularly useful when we want to associate properties with complex datatypes such as objects. Some drawbacks include loss of performance when adding tons of properties (see this graph) and lack of compatibility with JSON (at least, for now). What is clear is that the brains behind javascript are actively trying to improve upon one of language's most fundamental components (objects, of course). Map is a step in the right direction and it will be interesting to see what ECMAScript 2020 has in store.