Best of Modern JavaScript — Maps and Arrays
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:25:17

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

**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 by doing array operations with them.

### Converting Maps to Arrays

We can use the spread operator to convert iterable objects to arrays.

This includes maps.

For example, we can write:

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

const arr = [...map];

```

to create a map and convert it to an array.

Then we get an array with the following for `arr` :

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

```

### Looping Over Map Entries

We can loop over map entries with the `forEach` method.

The method takes a callback with the `value` and `key` as parameters.

For instance, we can write:

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

map.forEach((value, key) => {
  console.log(key, value);
});

```

Then we get:

```
foo one
bar two
baz three

```

from the console log.

### Mapping and Filtering Maps

To map and filter maps, we’ve to convert the map to an array first.

There’re no methods to do this within the `Map` constructor.

Therefore, to create a map and then do filtering and mapping with it, we can write:

```
const map = new Map()
  .set('foo', 1)
  .set('bar', 2)
  .set('baz', 3);

const mappedMap = new Map(
  [...map]
  .map(([k, v]) => [k, v ** 2])
);

```

We created a map called `map` .

Then we spread `map` with the spread operator into an array.

Then we called `map` on the returned array instance and return a new array with the `v` , which has the value squared.

`k` is the key and that stayed the same.

We did the mapping in the `Map` constructor to get a map returned.

In the end, we get a map with the following:

```
{"foo" => 1, "bar" => 4, "baz" => 9}

```

Similarly, we can call `filter` to filter the map entries.

For example, we can write:

```
const map = new Map()
  .set('foo', 1)
  .set('bar', 2)
  .set('baz', 3);

const mappedMap = new Map(
  [...map]
  .filter(([k, v]) => v < 3)
);

```

We called the `filter` method with the same callback signature, but we return only the entries with the value less than 3.

We did the filtering in the `Map` constructor to get a map returned.

In the end, we get:

```
{"foo" => 1, "bar" => 2}

```

We can also use the spread operator to combine maps.

For instance, we can write:

```
const map = new Map()
  .set('foo', 1)
  .set('bar', 2)
  .set('baz', 3);

const map2 = new Map()
  .set('qux', 4)
  .set('quxx', 5);

const combinedMap = new Map([...map, ...map2])

```

We created 2 maps, `map1` and `map2` .

Then we spread them both into an array with the spread operator.

The `Map` constructor will turn all the entries into a map.

In the end, we get:

```
{"foo" => 1, "bar" => 2, "baz" => 3, "qux" => 4, "quxx" => 5}

```

### Conclusion

Converting maps to arrays are useful for various operations.

It lets us use array methods on maps, which is useful since there’re no map equivalents of array methods.

The post [Best of Modern JavaScript — Maps and Arrays](https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8amaps-and-arrays/) appeared first on [The Web Dev](https://thewebdev.info).