How to convert a Map to an Array in JavaScript?
Tags: javascript
Published: 2021-11-28 00:00:00

---
  title: How to convert a Map to an Array in JavaScript?
  published: true
  tags: JavaScript
  date: Sun Nov 28 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/convert-map-to-array-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-f22667dfdf55e797d241e6c438585374.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/convert-map-to-array-javascript)
  
To convert the `Map` data structure to an `Array`, you can use the `from()` method from the global `Array` object in JavaScript.

### TL;DR

```js
// Initialise Map to hold roll number
// associated with students name
const rollNumToName = new Map();

// set some values to map
rollNumToName.set(1, "John Doe").set(2, "Lily Roy");

// convert map to array using
// the Array.from() method
const rollNumToNameArr = Array.from(rollNumToName);

console.log(rollNumToNameArr);

/*
OUTPUT:
-------

[
    [1, "John Doe"],
    [2, "Lily Roy"]
]

*/
```

For example, let's say we want to hold all the roll numbers of students and associate them with the student's name.

So a better data structure to use here is to use the [`Map`](https://melvingeorge.me/blog/introduction-map-javascript) data structure in JavaScript.

First, let's initialize a map called `rollNumToName` like this,

```js
// Initialise Map to hold roll number
// associated with students name
const rollNumToName = new Map();
```

Now let's add some values using the `set()` method from the `rollNumToName` map.

It can be done like this,

```js
// Initialise Map to hold roll number
// associated with students name
const rollNumToName = new Map();

// set some values to map data structure
rollNumToName.set(1, "John Doe").set(2, "Lily Roy");
```

Now, We have a valid `Map` data structure.

**To convert the `rollNumToName` map to an array we can use the `Array.from()` method and pass the `rollNumToName` map as an argument to the function. The method returns a new array.**

It can be done like this,

```js
// Initialise Map to hold roll number
// associated with students name
const rollNumToName = new Map();

// set some values to map data structure
rollNumToName.set(1, "John Doe").set(2, "Lily Roy");

// convert map to array using
// the Array.from() method
const rollNumToNameArr = Array.from(rollNumToName);
```

Now if we log the output of the `rollNumToNameArr` array we can see that the `rollNumToName` map data structure is converted to an array.

It will look like this,

```js
// Initialise Map to hold roll number
// associated with students name
const rollNumToName = new Map();

// set some values to map data structure
rollNumToName.set(1, "John Doe").set(2, "Lily Roy");

// convert map to array using
// the Array.from() method
const rollNumToNameArr = Array.from(rollNumToName);

console.log(rollNumToNameArr);

/*
OUTPUT:
-------

[
    [1, "John Doe"],
    [2, "Lily Roy"]
]

*/
```

- Each value in the map is now converted to a nested array inside the main array.

See the above code live in [codesandbox](https://codesandbox.io/s/convert-map-to-array-javascript-vh8rb?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---