To create a deep copy of a `Map`, convert the `Map` to an array. Use the `JSON.stringify()` method to stringify the array and pass the result to the `Map()` constructor.

How to create a Deep Copy of a Map in JavaScript


## Create a Deep Copy of a Map in JavaScript

**To create a deep copy of a `Map`:**

1. Convert the `Map` to an array.
2. Use the `JSON.stringify()` method to stringify the array.
3. Use the `JSON.parse()` method to parse the JSON.
4. Pass the result to the `Map()` constructor.

```javascript:index.js
const existingMap = new Map([
  ['address', {street: 'Example'}],
  ['numbers', [1, 2, 3]],
]);

const deepCopy = new Map(JSON.parse(
  JSON.stringify(Array.from(existingMap))
));

// 👇️ {'address' => {street: 'Example'}, 'numbers': [1, 2, 3]}
console.log(deepCopy);
```

<InArticleAd />

We used the
[Array.from](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
method to convert the `Map` into a two dimensional array.

```javascript:index.js
const existingMap = new Map([
  ['address', {street: 'Example'}],
  ['numbers', [1, 2, 3]],
]);

// 👇️ [['address', {street: 'Example}], ['numbers', [1, 2, 3]]]
console.log(Array.from(existingMap));
```

The next step is to use the
[JSON.stringify](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)
method to convert the array to a JSON string.

<Alert type="success">
  This makes all the nested arrays and objects lose their reference.
</Alert>

We then used the
[JSON.parse](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)
method to parse the string back into an array.

The last step is to pass the two dimensional array to the
[Map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/Map)
constructor.

<Alert>
  The trick here is to stringify the array, using the{' '}
  <code>JSON.stringify</code> method, so that all nested objects lose their
  reference.
</Alert>

If we then try to mutate the array in the new `Map`, it wouldn't affect the
existing `Map`.

```javascript:index.js
const existingMap = new Map([
  ['address', {street: 'Example'}],
  ['numbers', [1, 2, 3]],
]);

const deepCopy = new Map(JSON.parse(
  JSON.stringify(Array.from(existingMap))
));

deepCopy.get('numbers').pop();

// 👇️ {'address' => {street: 'Example'}, 'numbers' => [1, 2]}
console.log(deepCopy);

// 👇️ {'address' => {'street':'Example'},'numbers' => [1, 2, 3]}
console.log(existingMap);
```

We used the `pop` method to mutate the array in the deep copy, however the array
in the existing `Map` wasn't affected.

The nested arrays in the `Maps` have a different reference and location in
memory, because we used the `JSON.stringify` method.

<InArticleAd />

## Further Reading

- [How to create a Deep Copy of a Set in JavaScript](/blog/javascript-deep-copy-set)
- [How to create a shallow Copy of a Map in JavaScript](/blog/javascript-shallow-copy-map)

<InArticleAd />


How to create a Deep Copy of a Map in JavaScript

Create a Deep Copy of a Map in JavaScript #

Further Reading #

Borislav Hadzhiev

For more articles, navigate to myHome Page

How to create a Deep Copy of a Map in JavaScript

Create a Deep Copy of a Map in JavaScript #

Further Reading #

Join my newsletter

Borislav Hadzhiev

For more articles, navigate to myHome Page