Best of Modern JavaScript — Maps
Tags: javascript, webdev
Published: 2020-07-31 01:32:25

---
title: Best of Modern JavaScript — Maps
published: true
date: 2020-07-25 19:43:42 UTC
tags: javascript,webdev
canonical_url: https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8amaps/?utm_source=rss&utm_medium=rss&utm_campaign=best-of-modern-javascript%25e2%2580%258a-%25e2%2580%258amaps
---

**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](https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8amaps/) appeared first on [The Web Dev](https://thewebdev.info).