Best of Modern JavaScript — Maps

Subscribe to my email list now at http://jauyeung.net/subscribe/

Follow me on Twitter at https://twitter.com/AuMayeung

Many more articles at https://medium.com/@hohanga

Even more articles at http://thewebdev.info/

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at how to use maps in various ways.

Maps to JSON

Maps can be converted to JSON objects.

We can do the conversion to the spread operator to an array.

For instance, we can write:

const map = new Map()
  .set('foo', 'one')
  .set('bar', 'two')
  .set('baz', 'three');

const arr = [...map];

We can just spread the map into an array of key-value pair arrays since maps are iterable.

Once we did that, we can convert the array into a JSON string with JSON.stringify :

console.log(JSON.stringify(arr));

Then we get:

[["foo","one"],["bar","two"],["baz","three"]]

We can convert the stringified array of key-value pair arrays into a map with JSON.parse and the Map constructor.

For example, we can write:

const parsed = new Map(JSON.parse(str));

Then we get back the original map.

Map to Object

We can convert a map to an object by looping through it and then putting the keys as the properties and the values as the values.

For example, we can write:

const map = new Map()
  .set('foo', 'one')
  .set('bar', 'two')
  .set('baz', 'three');

const obj = Object.create(null);
for (const [k, v] of map) {
  obj[k] = v;
}

We create an object without a prototype by passing in null into Object.create .

Then we loop through our map to get the key and value and then set the key as the property name and the value as the value with the for-of loop.

We can convert the object to JSON with JSON.stringify .

For example, we can write:

console.log(JSON.stringify(obj));

And we get:

{"foo":"one","bar":"two","baz":"three"}

logged.

We can call JSON.parse to parse that back into an object.

For instance, we can write:

const map = new Map()
  .set('foo', 'one')
  .set('bar', 'two')
  .set('baz', 'three');

const obj = Object.create(null);
for (const [k, v] of map) {
  obj[k] = v;
}

const str = JSON.stringify(obj);
console.log(JSON.parse(str));

Map API

The Map API lets us create a map with an iterable object of key-value pair arrays.

This is optional.

If we don’t pass it in, then we create an empty map.

For instance, we can write:

const map = new Map([
  ['foo', 'one'],
  ['bar', 'two'],
  ['bar', 'three'],
]);

to create a map.

The Map.prototype.get method takes a string key and returns the value with the given key.

If there’s no such key in the map, then undefined is returned.

Map.prototype.set takes a key and value as arguments and then returns the map with the new entry added.

Map.prototype.has takes a key and returns a boolean indicating whether the key exists or not.

Map.prototype.delete takes a key and removes the item given the key.

If an item is removed then true is returned.

Otherwise, nothing happens and false is returned.

Map.prototype.size is a getter method and return how many entries are in the map.

Map.prototype.clear clears all entries from the map and returns nothing.

Conclusion

Maps can be converted to arrays and objects.

Also, it has many methods we can use to manipulate and get data about maps.

The post Best of Modern JavaScript — Maps appeared first on The Web Dev.