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 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.

Javascript

const mapObj = new Map();

mapObj.set(1, 'abc');

mapObj.set(2, 'xyz');

mapObj.set(3, 'pqr');

console.log(mapObj);

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

console.log(arr);

Output

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.

Javascript

const mapObj = new Map();

mapObj.set(1, 'abc');

mapObj.set(2, 'xyz');

mapObj.set(3, 'pqr');

console.log(mapObj);

let arr = Array.from(mapObj);

console.log(arr);

Output

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

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.

Javascript

const mapObj = new Map();

mapObj.set(1, 'abc');

mapObj.set(2, 'xyz');

mapObj.set(3, 'pqr');

console.log(mapObj);

const arr = [];

mapObj.forEach(

(value, key) => arr.push(

{ key, value }));

console.log(arr);

Output

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.

Last Updated :
29 Jun, 2023

Like Article

Save Article

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 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.

Javascript

const mapObj = new Map();

mapObj.set(1, 'abc');

mapObj.set(2, 'xyz');

mapObj.set(3, 'pqr');

console.log(mapObj);

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

console.log(arr);

Output

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.

Javascript

const mapObj = new Map();

mapObj.set(1, 'abc');

mapObj.set(2, 'xyz');

mapObj.set(3, 'pqr');

console.log(mapObj);

let arr = Array.from(mapObj);

console.log(arr);

Output

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

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.

Javascript

const mapObj = new Map();

mapObj.set(1, 'abc');

mapObj.set(2, 'xyz');

mapObj.set(3, 'pqr');

console.log(mapObj);

const arr = [];

mapObj.forEach(

(value, key) => arr.push(

{ key, value }));

console.log(arr);

Output

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

Last Updated :
29 Jun, 2023

Like Article

Save Article

Read original article here

Denial of responsibility! Techno Blender is an automatic aggregator of the all world’s media. In each content, the hyperlink to the primary source is specified. All trademarks belong to their rightful owners, all materials to their authors. If you are the owner of the content and do not want us to publish your materials, please contact us by email – admin@technoblender.com. The content will be deleted within 24 hours.

Map to Array in JavaScript

Methods to convert Map to Array

Javascript

Approach 2: Using Array.from() Method

Javascript

Syntax:

Javascript

Methods to convert Map to Array

Javascript

Approach 2: Using Array.from() Method

Javascript

Syntax:

Javascript

Related Posts