JavaScript: How To Convert Map To Array

Reading Time: 2 minutes

To convert Map to Array in JavaScript, there are 3 main methods that are 1 or 2 liner code. They will return an array in the same order during the creation of Map.

In this article, we will use the below input Map achieving 2 formats of output data to illustrate.

// Input Map
const ageMap = new Map([
  ['Person1', 11],
  ['Person2', 33],
  [10000001, 11]
]);

// Output Array Format
const result = [["Person1", 11], ["Person2", 33], [10000001, 11]]
const objectResult = [{ key: "Person1", value: 11 }, { key: "Person2", value: 33 }, { key: 10000001, value: 11 }]

Methods to Convert Map to Array

• Array.from() Method
• Array.prototype.forEach() Method
• Spread Operator/Syntax (...) Method

Array.from() Method

Array.from() is a static method that will create a new array shallow copying the objects from any iterable objects including Map. This method is easy to use if all datatype are primitive.

In the example below, we will pass in the Map object, then the result will be a new array containing all elements in the same order. The inner array will consist of the key and value.

const ageMap = new Map([
  ['Person1', 11],
  ['Person2', 33],
  [10000001, 11]
]);

const result = Array.from(ageMap);

console.log(result);
// [["Person1", 11], ["Person2", 33], [10000001, 11]]

const objectResult = Array.from(ageMap, function (item) {
    return { key: item[0], value: item[1] }
});

console.log(objectResult);
// [{ key: "Person1", value: 11 }, { key: "Person2", value: 33 }, { key: 10000001, value: 11 }]

Array.prototype.forEach() Method

From this guide, we know that forEach() will not return any result. Hence, we will create a new array before executing the method.

In the example below, we will push the element every iteration to the result array.

const ageMap = new Map([
  ['Person1', 11],
  ['Person2', 33],
  [10000001, 11]
]);

const result = [];
ageMap.forEach((value, key) => result.push([ key, value ]));

console.log(result);
// [["Person1", 11], ["Person2", 33], [10000001, 11]]

const objectResult = [];
ageMap.forEach((value, key) => objectResult.push({ key, value }));

console.log(objectResult);
// [{ key: "Person1", value: 11 }, { key: "Person2", value: 33 }, { key: 10000001, value: 11 }]

Spread Operator/Syntax (...) Method

Base on the official documentation of Spread Syntax, we can see that it can expand any iterable. Thus, we can make use of its mechanism to spread out into an array object.

In the example below, we spread the Map iterable object into an array.

const ageMap = new Map([
  ['Person1', 11],
  ['Person2', 33],
  [10000001, 11]
]);

const result = [...ageMap];

console.log(result);
// [["Person1", 11], ["Person2", 33], [10000001, 11]]

const objectResult = [...ageMap].map((item) => {
    return { key: item[0], value: item[1] }
});

console.log(objectResult);
// [{ key: "Person1", value: 11 }, { key: "Person2", value: 33 }, { key: 10000001, value: 11 }]

Conclusion

We look into the 3 methods of converting Map to array in JavaScript.

Array.from() and the spread operator are the easiest to implement when the datatype inside Map are all primitive type.

Array.prototype.forEach() method will be good if you want to perform some operation like deep cloning or other operation every iteration.