ES6 Map -- more than just another Object
Tags: javascript
Published: 2019-11-10 02:45:06

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``:
```javascript
// 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:
```javascript
// 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
```javascript
// map
firstMap.get(this) // => 'using this as a key! WHATT??'
// object
normalObject['1'] // => 'my key must be a string...'
```
 - delete key-value pairs
```javascript
// 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)
```javascript
// map
for(const [key, value] of firstMap){
  console.log(value);
}
// object
Object.keys(normalObject).forEach( key => {
  console.log(normalObject[key];
});
```
 - counting key-value pairs:
```javascript
// map
firstMap.size // => 2
// object
Object.keys(normalObject).length
```
 - checking if key exists
```javascript
// 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](https://twitter.com/goodmodule/status/820582596648325120)) 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.