Convert map entries to an array of pairs or objects in JavaScript

This post will discuss how to convert Map entries to an array of pairs or objects in JavaScript.

There are several ways to convert a map to an array in JavaScript. A map is a collection of key-value pairs, where each key can only occur once. An array is an ordered list of values, where each value can be accessed by its index. The solution should create a new array that contains the same key-value pairs as the original map, preferably in the same order as they were inserted into the map.

1. Using `Array.from()` function

One way to convert a map to an array is to use the Array.from() function, which can create an array from any iterable object, such as a map. For example, if we have a map of keys and values, we can use the Array.from() function to create an array of pairs:

// create a map of keys and values

let map = new Map().set('a', 1).set('b', 2);

// use the Array.from function to create an array of pairs

const arr = Array.from(map);

// [['a', 1], ['b', 2]]

console.log(arr);

Download Run Code

We can pass a callback function as the second argument to transform the key-value pairs into the desired format. For example, we can use the Array.from() function to create an array of objects with key and value properties as follows:

// create a map of keys and values

let map = new Map().set('a', 1).set('b', 2);

// use the Array.from function with a map function to create an array of objects

const arr = Array.from(map, ([key, value]) => ({key, value}));

// [{key: 'a', value: 1}, {key: 'b', value: 2}]

console.log(arr);

Download Run Code

2. Using spread operator

Another way to convert a map to an array is to use the spread operator (…), which can spread the elements of an iterable object, such as a map, into an array literal. This will create an array of pairs, where each pair is an array of two elements: the key and the value. The following code illustrates this:

let map = new Map().set('a', 1).set('b', 2);

// use the spread operator to create an array of pairs

const array = [...map];

console.log(array); // [['a', 1], ['b', 2]]

Download Run Code

We can use the spread operator with the Array.map() function to transform the key-value pairs into the desired format. The following code illustrates this:

let map = new Map().set('a', 1).set('b', 2);

// use the spread operator with map function to create an array of objects

let array = [...map].map(([key, value]) => ({key, value}));

// [{key: 'a', value: 1}, {key: 'b', value: 2}]

console.log(array);

Download Run Code

3. Using `Map.keys()` or `Map.values()` functions

If we only want to convert the keys or the values of the map to an array, we can use the Map.keys() or Map.values() functions, which return iterator objects that contain the keys or the values of the map. We can then use the Array.from() function or the spread operator to convert the iterator objects to arrays. The following code illustrates this:

// create a map of keys and values

const map = new Map().set('a', 1).set('b', 2);

// use the keys function to get an iterator of the keys

const keys = map.keys(); // [Map Iterator] { 'a', 'b' }

// use the values function to get an iterator of the values

const values = map.values(); // [Map Iterator] { 1, 2 }

// use the Array.from function or the spread operator to convert the iterators to arrays

const arr1 = Array.from(keys);

console.log(arr1); // ['a', 'b']

const arr2 = [...values];

console.log(arr2); // [1, 2]

Download Run Code

That’s all about converting the Map entries to an array of pairs or objects in JavaScript.

Convert map entries to an array of pairs or objects in JavaScript

1. Using Array.from() function

2. Using spread operator

3. Using Map.keys() or Map.values() functions

Share this:

1. Using `Array.from()` function

3. Using `Map.keys()` or `Map.values()` functions