How to Convert a Map to an Array of Key-Value Pairs in JavaScript

How to Convert a Map to an Array of Key-Value Pairs in JavaScript ?

Answer

To convert a map to an array of key-value pairs in JavaScript, you can use the entries() method to get an iterator of key-value pairs and then convert it to an array using the Array.from() method. This provides a convenient way to extract all key-value pairs from the map.

✐ Examples

1 Converting a Map to an Array of Key-Value Pairs Using entries() and Array.from()

We can convert a map to an array of key-value pairs in JavaScript using the entries() method, which provides an iterator of all key-value pairs in the map. We can then convert this iterator to an array using the Array.from() method.

For example,

We start by declaring and initializing a map named myMap with some key-value pairs. In this example, the map has string keys and integer values.
We use the entries method to get an iterator of the key-value pairs in the map.
We convert the iterator to an array using the Array.from method.
We store the array of key-value pairs in a variable named entriesArray.
We print the key-value pairs to the console using the console.log function to verify the conversion.

JavaScript Program

const myMap = new Map([
    ['one', 1],
    ['two', 2],
    ['three', 3]
]);

// Convert map to an array of key-value pairs
const entriesArray = Array.from(myMap.entries());

// Print the key-value pairs
console.log('Key-Value Pairs:', entriesArray);

Output

Key-Value Pairs: [['one', 1], ['two', 2], ['three', 3]]

2 Converting an Empty Map to an Array of Key-Value Pairs

We can also convert an empty map to an array of key-value pairs in JavaScript using the entries() method, which returns an empty array when the map is empty.

For example,

We start by declaring an empty map named emptyMap with string keys and integer values.
We use the entries method to get an iterator of the key-value pairs in the empty map.
We convert the iterator to an array using the Array.from method.
We store the array of key-value pairs in a variable named emptyEntriesArray.
We print the key-value pairs to the console using the console.log function to verify that the array is empty.

JavaScript Program

const emptyMap = new Map();

// Convert empty map to an array of key-value pairs
const emptyEntriesArray = Array.from(emptyMap.entries());

// Print the key-value pairs
console.log('Key-Value Pairs:', emptyEntriesArray);

Output

Key-Value Pairs: []

3 Converting a Map to an Array of Key-Value Pairs After Adding Elements

We can convert a map to an array of key-value pairs in JavaScript after adding elements using the entries() method, which provides an updated iterator of all key-value pairs in the map.

For example,

We start by declaring an empty map named dynamicMap with string keys and integer values.
We add some key-value pairs to the map using the map's set method.
We use the entries method to get an iterator of the key-value pairs in the map after adding elements.
We convert the iterator to an array using the Array.from method.
We store the array of key-value pairs in a variable named dynamicEntriesArray.
We print the key-value pairs to the console using the console.log function to verify the updated list of key-value pairs.

JavaScript Program

const dynamicMap = new Map();

// Add elements to the map
dynamicMap.set('one', 1);
dynamicMap.set('two', 2);
dynamicMap.set('three', 3);

// Convert map to an array of key-value pairs
const dynamicEntriesArray = Array.from(dynamicMap.entries());

// Print the key-value pairs
console.log('Key-Value Pairs:', dynamicEntriesArray);

Output

Key-Value Pairs: [['one', 1], ['two', 2], ['three', 3]]

Summary

In this tutorial, we learned How to Convert a Map to an Array of Key-Value Pairs in JavaScript language with well detailed examples.

◀ Previous Next ▶

JavaScript Tutorials

JavaScript How-Tos

How to Convert a Map to an Array of Key-Value Pairs in JavaScript