Convert Map Keys and Values to an Array in JavaScript

avatar
Borislav Hadzhiev

Last updated: Dec 29, 2022
3 min

banner

# 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.
index.js
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']

convert map keys and values to an array

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

Convert a Map to an Array of Objects in JavaScript

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

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

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

This is the recommended approach when using TypeScript because the compiler often complains when using the spread syntax (...) with iterators.

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.
index.js
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']

convert map keys and values to array using spread syntax

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

This is the most commonly used approach when converting the keys and values of a Map to an array.

You can also do this with multiple Map objects.

index.js
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.
index.js
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' ]

convert map keys and values to array using map foreach

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:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev