Convert Map Keys and Values to an Array in JavaScript

# Table of Contents

1. Convert Map Keys and Values to an Array in JavaScript
2. Convert Map Keys and Values to an Array using spread syntax
3. Convert Map Keys and Values to an Array using Map.forEach()

# Convert Map Keys and Values to an Array in JavaScript

To convert the keys and values of a Map to an array:

1. Use the Map.keys() method to get an iterator of the Map's keys.
2. Use the Map.values() method to get an iterator of the Map's values.
3. Use the Array.from() method to convert the iterator objects to arrays.

Copied!
const map = new Map();
map.set('name', 'John');
map.set('age', 30);

// ✅ Convert Map values to an Array
const values = Array.from(map.values());

console.log(values); // 👉️ ['John', 30]
console.log(values.length); // 👉️ 2

// ✅ Convert Map keys to an Array
const keys = Array.from(map.keys()); // 👉️ ['name', 'age']

If you need to convert a Map object to an array of objects, click on the following article:

We used the Map.values() method to get an iterator object that contains the values of the Map.

Copied!
const map = new Map();
map.set('name', 'John');
map.set('age', 30);

const values = Array.from(map.values());
console.log(values); // 👉️ ['John', 30]

The Map.keys() method returns an iterator containing the keys of the Map.

Copied!
const map = new Map();
map.set('name', 'John');
map.set('age', 30);

const keys = Array.from(map.keys());
console.log(keys); // 👉️ ['name', 'age']

The last step is to use the Array.from method to convert the iterator objects to arrays.

The Array.from method converts the supplied iterable to an array and returns the new array instance.

An alternative approach is to use the spread operator (...).

# Convert Map Keys and Values to an Array using spread syntax

This is a three-step process:

1. Use the Map.keys() method to get an iterator of the Map's keys.
2. Use the Map.values() method to get an iterator of the Map's values.
3. Use the spread syntax (...) to convert the iterator objects to arrays.

Copied!
const map = new Map();
map.set('name', 'Tom');
map.set('age', 39);

// ✅ Convert Map values to an array
const values = [...map.values()];

console.log(values); // 👉️ ['Tom', 39]
console.log(values.length); // 👉️ 2

// ✅ Convert Map keys to an array
const keys = [...map.keys()];
console.log(keys); // 👉️ ['name', 'age']

We used the spread syntax (...) to unpack all of the keys and values of the Map into two separate arrays.

You can also do this with multiple Map objects.

Copied!
const map1 = new Map();
map1.set('name', 'Tom');

const map2 = new Map();
map2.set('country', 'Chile');

const values = [...map1.values(), ...map2.values()];
console.log(values); // 👉️ ['Tom', 'Chile']

const keys = [...map1.keys(), ...map2.keys()];
console.log(keys); // 👉️ [ 'name', 'country' ]

The order in which we unpacked the values of the Map objects is preserved in the new array.

You can also use the Map.forEach() method to convert the keys and values of a Map to an array.

# Convert Map Keys and Values to an Array using Map.forEach()

This is a two-step process:

1. Use the Map.forEach() method to iterate over the Map.
2. Use the Array.push() method to push the keys and values of the Map into two separate arrays.

Copied!
const map1 = new Map();
map1.set('name', 'Tom');
map1.set('age', 30);
map1.set('country', 'Chile');

const values = [];

const keys = [];

map1.forEach((value, key) => {
  values.push(value);

  keys.push(key);
});

console.log(values); // 👉️ [ 'Tom', 30, 'Chile' ]

console.log(keys); // 👉️ [ 'name', 'age', 'country' ]

We declared two variables (keys and values) that store empty arrays and used the Map.forEach() method to iterate over the Map object.

The Map.forEach method runs the provided function for each key-value pair.

On each iteration, we push the current key into the keys array and the current value into the values array.

This approach is more verbose and manual than the previous two. However, it is useful when you need to process the keys and values of the Map before pushing them into the arrays.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Convert a Map to an Array of Objects in JavaScript
• How to Convert a Map to JSON in JavaScript
• Convert a Map to an Object in JavaScript
• How to convert an Object to a Map in JavaScript
• How to convert an Array to a Map in JavaScript