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:

Convert the Map to an array.
Use the JSON.stringify() method to stringify the array.
Use the JSON.parse() method to parse the JSON.
Pass the result to the Map() constructor.

index.js

Copied!
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);

We used the Array.from method to convert the Map into a two dimensional array.

index.js

Copied!
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 method to convert the array to a JSON string.

This makes all the nested arrays and objects lose their reference.

We then used the JSON.parse method to parse the string back into an array.

The last step is to pass the two dimensional array to the Map() constructor.

The trick here is to stringify the array, using the JSON.stringify method, so that all nested objects lose their reference.

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

index.js

Copied!
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.

How to create a Deep Copy of a Map in JavaScript

Create a Deep Copy of a Map in JavaScript #

Further Reading #

Borislav Hadzhiev