Map to Array in JavaScript

In this article, we will convert a Map object to an Array in JavaScript. A Map is a collection of key-value pairs linked with each other. The following are the approaches to Map to Array conversion:

Methods to convert Map to Array

• Using Spread Operator (...) and Array map() Method
• Using Array.from() Method
• Using Map.forEach() Method

Approach 1: Using Spread Operator (...) and Array map() Method

Using the Spread operator(...) and map() method, we can take each entry and convert it into an array of key-value pairs.

Syntax:

let Array = [...value];
// Arrow function
Array.map((e) => e);
Array.map((e, i) => {i,e});

Example: This example illustrates the implementation of the Spread Operator (...) Method and Array map() Method.

const mapObj = new Map();
mapObj.set(1, 'abc');
mapObj.set(2, 'xyz');
mapObj.set(3, 'pqr');

// Return the map
console.log(mapObj);

let arr = [...mapObj].map((e) => e)

// Return the array
console.log(arr);

Map(3) { 1 => 'abc', 2 => 'xyz', 3 => 'pqr' }
[ [ 1, 'abc' ], [ 2, 'xyz' ], [ 3, 'pqr' ] ]

Approach 2: Using Array.from() Method

The Array.from() Method returns a new instance of an array from the object provided in the arguments.

Syntax:

Array.from(object, mapFunction, thisValue);

Example: In this example, we will pass a map object and a function into Array.from() Method to convert it into an array.

const mapObj = new Map();
mapObj.set(1, 'abc');
mapObj.set(2, 'xyz');
mapObj.set(3, 'pqr');

// Return the map
console.log(mapObj);

// Return the array
let arr = Array.from(mapObj);

console.log(arr);

Map(3) { 1 => 'abc', 2 => 'xyz', 3 => 'pqr' }
[ [ 1, 'abc' ], [ 2, 'xyz' ], [ 3, 'pqr' ] ]

Approach 3: Using Map.forEach() Method

JavaScript map.forEach() method is used to iterate the map object and execute the callback function provided in the arguments.

Syntax:

mymap.forEach();

Example: This example illustrates the implementation of the map.forEach() Method.

const mapObj = new Map();
mapObj.set(1, 'abc');
mapObj.set(2, 'xyz');
mapObj.set(3, 'pqr');

// Return the map
console.log(mapObj);

const arr = [];

mapObj.forEach(
    (value, key) => arr.push(
        { key, value }));

// Return the array
console.log(arr);

Map(3) { 1 => 'abc', 2 => 'xyz', 3 => 'pqr' }
[
  { key: 1, value: 'abc' },
  { key: 2, value: 'xyz' },
  { key: 3, value: 'pqr' }
]

There are many inbuilt JavaScript methods that can be used to transform data from one data type to another. Above mentioned are a few of those that can be easily implemented to convert the Map object to an array.