Best of Modern JavaScript : Maps and Arrays

Best of Modern JavaScript : Maps and Arrays

In this Modern JavaScript Tutorial, we’ll look at how to use maps by doing array operations with them. 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.

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.

javascript web-development programming developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

What Garbage Collection in JavaScript Is and How It Works

JavaScript values are allocated when things are created (objects, Strings, etc.) and freed automatically when they are no longer used. This process is called Garbage collection.

What Javascript Spread Operator is, How It Works and How to Use It

JavaScript spread operator is one of the more popular features that were introduced in ES6. This tutorial will help you understand it. You will learn what spread operator is and how it works. You will also learn how to use it to copy and merge arrays and object literals, insert data and more.

Top 10 Web Development Trends in 2020 | Web Development Skills

Top 10 Web Development Trends in 2020 will provide you with a detailed list of the trends which are currently being noticed. Upskilling to these trends will help you in landing onto better jobs in 2020-2021.