How to create a Javascript Map from an Array or an Object and vice versa - Map Part 3

Table of Contents

• Introduction
• Creating a Map using Array
• Creating an Array from Map
• Creating a Map from an Object
• Creating An Object from a Map
• Summary

Introduction

In our previous articles on Map, we learned how to create a Map and use its properties and methods and iterate over it. In this article, we will learn how we can convert a Map to array and object and vice versa. Let’s get started.

Creating a Map using Array

Let’s create a Map using the new keyword and put elements in it using the map.set() method.

let map = new Map();
map.set("1","first element");
map.set(1, "second element");
map.set(true, "hello world");

Instead of adding elements using map.set(), we can pass an array of key-value pairs to initialize a Map.

let map = new Map([
  ["1", "first element"],
  [1, "second element"],
  [true, "hello world"]
]);

If we have to put a large number of elements in a Map, initializing a Map by passing an array of key-value pairs is more intuitive than initializing it with map.set().

Creating an Array from Map

To create an Array from Map, we can use map.entries() method.

let newIterable = map.entries(map);
//return iterable with [key,value] pairs

let newArray = Array.from(newIterable)
// We will get a 2D array having [key, value] pairs.

We can also pass a Map directly to Array.from() as Map returns an iterable of [key,value] pairs by default.

let newArray = Array.from(map)
// We will get a 2D array having [key, value] pairs.

To get an array of Map keys and values, we can use the same approach as above.

let newKeysIterable = map.keys()
let newValuesIterable = map.values()

let keysArray = Array.from(newKeysIterable);
let valuesArray = Array.from(newValuesIterable);

Creating a Map from an Object

To create a Map from Object, we can convert an object into an array of [key, value] pairs and then create a Map using it.

let obj = {
	"name": "hackinbits",
	"type": "website"
}

To get an array of key-value pairs from the above object, we can use Object.entries().

let newArray = Object.entries(obj)

let map = new Map(newArray);

Creating An Object from a Map

If we want to convert the Map in our previous example, back to Object it was created from(obj) we can use Object.fromEntries() method.

Object.fromEntries() takes an array of [key, value] pairs and returns a plain javascript object.

let newArray = map.entries();

let newObject = Object.fromEntries(newArray);

We can pass the Map directly to Object.fromEntries() and we will get the same result Map returns an iterable of [key, value] pairs by default.

let newObject = Object.fromEntries(map);

Summary

In this article, we learned

• How to create a Map using the new keyword and using a [key, value] array.
• How to get a [key, value] 2d array from a Map.
• How to create a Map from a plain Javascript Object.
• How to create a plain javascript Object from a Map.

Thanks for reading. Have a nice day!

If you liked this article, please upvote and recommend it. Feel free to ask any questions in the comments below.

We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels (twitter, Facebook, LinkedIn).