Map to Array in Javascript

To convert Map to Array in Javascript, first, we need to understand what Map in JS and How it works. The “Map” object is a built-in data structure that allows you to store key-value pairs. It is similar to an object, but it has some key differences.

Once we understand Map in JS, there are three ways to convert MAP to Array in JavaScript.

1. Using from() of the Array : Array.from() function
2. Loop Map and add using Array’s push()
3. Using Spread operator of JavaScript

1. Using from() of the Array : Array.from()

The “Array.from()” method in JavaScript is a static function that helps to a new array object from an array-like or iterable object. It can be used to convert various types of data or object into an array, such as a string, a NodeList, or a Set.

Here is an example of converting a Map to an array using Array.from().

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

const myMap = new Map();

const key1 = "John";
const value1 = { age: 30 };

const key2 = "Jane";
const value2 = { age: 25 };

myMap.set(key1, value1);
myMap.set(key2, value2);

console.log(myMap.get(key1).age); // 30
console.log(myMap.size); // 2

const usersArray = Array.from(myMap, function (entry) {
  return { key: entry[0], value: entry[1] };
});

console.log(usersArray[0].key +" "+ usersArray[0].value.age); // John 30

Use this JavaScript Tester to review the results and update the code as per your requirements. Use Copy button and paste the code to Javascript Tester.

https://codebeautify.org/javascript-tester

Please user the Javascript tester for next JS code too.

2. Loop Map and add using Array’s push()

2.1 Using For Each

In JavaScript, forEach is a higher-order function that is used to loop over arrays and execute an action on each array element.

The forEach function takes a callback function as an argument and calls that function once per element in the array. The callback method can take up to three parameters:

• The current part being processed
• The index of the current element
• The array itself

Here is an example of ForEach for converting Map to Array:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

const myMap = new Map();

const key1 = "John";
const value1 = { age: 30 };

const key2 = "Jane";
const value2 = { age: 25 };

myMap.set(key1, value1);
myMap.set(key2, value2);

const usersArray = [];

myMap.forEach((value, key) => usersArray.push({ key, value }));

console.log(usersArray[0].key +" "+ usersArray[0].value.age); // John 30

The advantage of using forEach is that it allows you to loop through an array without having to manually manage an index variable or use a for a loop. Additionally, because forEach is a higher-order function, it can be mixed with other array functions like map, filter, and reduce to perform complex operations on arrays.

2.2 Using For of

In JavaScript, for…of is a loop statement that is utilized to iterate over iterable objects like arrays, strings, maps, sets, and more. The loop iterates over the values of each element in the iterable rather than the indices like a traditional for loop.

Here is an example of For..of for converting Map to Array:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

const myMap = new Map();

const key1 = "John";
const value1 = { age: 30 };

const key2 = "Jane";
const value2 = { age: 25 };

myMap.set(key1, value1);
myMap.set(key2, value2);

const usersArray = [];

for (const [key, value] of myMap) {
    usersArray.push({ key, value });
}

console.log(usersArray[0].key +" "+ usersArray[0].value.age); // John 30

The benefit of using for…of is that it delivers a simpler syntax for iterating over an iterable object than a classic for loop. It also works with any iterable object, not just arrays, creating it more flexible.

One thing to note is that for…of is not supported in older versions of some browsers, such as Internet Explorer. However, it is supported in all modern browsers and is part of the ECMAScript 2015 (ES6) specification.

3. Using Spread operator of JavaScript

The spread operator in JavaScript allows you to expand an iterable such as an array or a string into individual elements. It is represented by three dots (…) and can be used in several ways, such as concatenate or merge arrays, copy an array, to pass arguments to a function, To convert a string into an array and convert map to array.

Here is an example of spread operator to convert map to an array.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

const myMap = new Map();

const key1 = "John";
const value1 = { age: 30 };

const key2 = "Jane";
const value2 = { age: 25 };

myMap.set(key1, value1);
myMap.set(key2, value2);

const usersArray = [...myMap];

console.log(usersArray[0][0] + " " + usersArray[0][1].age); // John 30

Know More about Array and Map :

Related Links:

• Check if Variable Is a Number in Javascript
• How to Get Last Element of an Array in JavaScript?