Create a copy of a Map or a Set in JavaScript

# Table of Contents

1. Create a Deep Copy of a Map in JavaScript
2. Create a Deep Copy of a Map using lodash
3. Create a shallow copy of a Map in JavaScript
4. Create a shallow copy of a Map using Map.forEach
5. Create a shallow Copy of a Set in JavaScript
6. Create a shallow Copy of a Set using a for...of loop
7. Create a deep copy of a Set in JavaScript
8. Create a deep copy of a Set using lodash

# Create a Deep Copy of a Map in JavaScript

To create a deep copy of a Map object:

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 string.
4. Pass the result to the Map() constructor.

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

If you need to create a copy of a Set, click on the following subheading.

• Create a shallow Copy of a Set in JavaScript

We used the Array.from() method to convert the Map object to a two-dimensional array.

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.

Copied!
const existingMap = new Map([
  ['address', {street: 'Example'}],
  ['numbers', [1, 2, 3]],
]);

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

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

Copied!
const existingMap = new Map([
  ['address', {street: 'Example'}],
  ['numbers', [1, 2, 3]],
]);

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

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

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

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.

If you have to create deep copies of Map objects often, define a reusable function.

Copied!
function deepCopyMap(map) {
  return new Map(JSON.parse(JSON.stringify(Array.from(map))));
}

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

const copy = deepCopyMap(existingMap);

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

The function takes a Map object as a parameter and returns a deep copy of the Map.

# Create a Deep Copy of a Map using lodash

You can also use the lodash library to create a deep copy of a Map object.

First, install the lodash module if you haven't already.

Copied!
# 👇️ initialize a package.json file
npm init -y

npm install lodash

You can now import and use the lodash.cloneDeep() method.

Copied!
import _ from 'lodash';

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

const deepCopy = _.cloneDeep(existingMap);

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

The cloneDeep method takes a value and recursively clones it, returning the deep cloned value.

Mutating the array property in the cloned Map doesn't mutate the property in the original Map.

Copied!
import _ from 'lodash';

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

const deepCopy = _.cloneDeep(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.

# Create a shallow copy of a Map in JavaScript

To create a shallow copy of a Map:

1. Pass the existing Map as a parameter to the Map() constructor.
2. The Map() constructor takes an iterable, such as another Map, and adds the key-value pairs of the iterable to the new Map.

Copied!
const oldMap = new Map([
  ['name', 'bobby hadz'],
  ['country', 'Chile'],
]);

// 👇️ Map(2) { 'name' => 'bobby hadz', 'country' => 'Chile' }
console.log(oldMap);

const copy = new Map(oldMap);
// 👇️ Map(2) { 'name' => 'bobby hadz', 'country' => 'Chile' }
console.log(copy);

We used the Map() constructor to create a shallow copy of an existing Map.

The only parameter the constructor takes is an iterable, such as an array, or another Map.

The elements in the iterable should be key-value pairs, e.g. a two-dimensional array or another Map object.

Copied!
const example1 = [
  ['name', 'Tom'],
  ['country', 'Chile'],
];
const example2 = new Map([
  ['name', 'Tom'],
  ['country', 'Chile'],
]);

Each key-value pair gets added to the new Map.

The new Map object has a completely different reference and location in memory.

Adding key-value pairs to it does not interact with the existing Map.

Copied!
const oldMap = new Map([
  ['name', 'bobby hadz'],
  ['country', 'Chile'],
]);

// 👇️ Map(2) { 'name' => 'bobby hadz', 'country' => 'Chile' }
console.log(oldMap);

const copy = new Map(oldMap);
// 👇️ Map(2) { 'name' => 'bobby hadz', 'country' => 'Chile' }
console.log(copy);

copy.set('age', 30);

// 👇️ Map(3) { 'name' => 'bobby hadz', 'country' => 'Chile', 'age' => 30 }
console.log(copy);

// 👇️ Map(2) { 'name' => 'bobby hadz', 'country' => 'Chile' }
console.log(oldMap);

The code sample shows that adding key-value pairs to the copy doesn't add key-value pairs to the original Map object.

You can also use the Map.forEach() method to create a shallow copy of a Map object.

# Create a shallow copy of a Map using Map.forEach

This is a three-step process:

1. Declare a new variable and initialize it to an empty Map.
2. Use the Map.forEach() method to iterate over the existing Map.
3. Use the Map.set() method to add each key-value pair to the new Map.

Copied!
const oldMap = new Map([
  ['name', 'bobby hadz'],
  ['country', 'Chile'],
]);

const copy = new Map();

oldMap.forEach((value, key) => {
  copy.set(key, value);
});

// 👇️ Map(2) { 'name' => 'bobby hadz', 'country' => 'Chile' }
console.log(oldMap);

We used the Map() constructor to create an empty Map object.

The function we passed to the Map.forEach method gets called with each key-value pair of the Map object.

On each iteration, we use the Map.set() method to add the current key-value pair to the new Map object.

# Create a shallow Copy of a Set in JavaScript

To create a shallow copy of a Set, pass the original Set as a parameter to the Set() constructor, e.g. const cloned = new Set(oldSet).

The Set() constructor takes an iterable, such as another Set, and adds all of the elements of the iterable to the new Set.

Copied!
const set1 = new Set(['bobby', 'hadz', 'com']);

const cloned = new Set(set1);
console.log(cloned); // 👉️ Set(3) { 'bobby', 'hadz', 'com' }

We used the Set() constructor to create a shallow copy of a Set.

The only parameter the Set() constructor takes is an iterable, such as an array, string, or another Set.

The new Set object has a completely different location in memory and adding elements to it wouldn't add elements to the original Set.

Copied!
const set1 = new Set(['one', 'two', 'three']);

const cloned = new Set(set1);
console.log(cloned); // 👉️ {'one', 'two', 'three'}


cloned.add('four');
console.log(cloned); // 👉️ {'one', 'two', 'three', 'four'}

console.log(set1); // 👉️ {'one', 'two', 'three'}

The code sample demonstrates that adding elements to the copy doesn't add elements to the original Set object.

You can also use a simple for...of loop to create a shallow copy of a Set.

# Create a shallow Copy of a Set using a for...of loop

To create a shallow copy of a Set:

1. Declare a new variable and initialize it to an empty Set.
2. Use a for...of loop to iterate over the original Set.
3. Use the add() method to add each element to the new Set object.

Copied!
const set1 = new Set(['bobby', 'hadz', 'com']);

const cloned = new Set();

for (const element of set1) {
  cloned.add(element);
}

console.log(cloned); // 👉️ Set(3) { 'bobby', 'hadz', 'com' }

We declared a new variable and initialized it to an empty set using the Set() constructor.

The for...of statement is used to loop over iterable objects like arrays, strings, Map, Set and NodeList objects and generators.

On each iteration, we use the Set.add() method to add the current element to the new Set.

The Set.add() method inserts a new element with the supplied value into a Set object, if the value is not already in the Set.

The new Set object is stored at a completely different location in memory.

# Create a deep copy of a Set in JavaScript

To create a deep copy of a Set:

1. Convert the Set to an array.
2. Use the JSON.stringify() method to stringify the array.
3. Use the JSON.parse() method to parse the string back into an array.
4. Pass the result to the Set() constructor.

Copied!
const existingSet = new Set([[1, 2, 3]]);

const deepCopy = new Set(JSON.parse(
  JSON.stringify(Array.from(existingSet))
));

console.log(deepCopy); // 👉️ {[1, 2, 3]}

We used the Array.from() method to convert the Set to a two-dimensional array.

Copied!
const existingSet = new Set([[1, 2, 3]]);

// 👇️ [ [1, 2, 3] ]
console.log(Array.from(existingSet));

The next step is to use the JSON.stringify() method to convert the array to a JSON string.

Copied!
const existingSet = new Set([[1, 2, 3]]);

// 👇️ '[[1,2,3]]'
console.log(JSON.stringify(Array.from(existingSet)));

Then, we used the JSON.parse method to parse the string back into an array.

Copied!
const existingSet = new Set([[1, 2, 3]]);

// 👇️ [ [ 1, 2, 3 ] ]
console.log(JSON.parse(JSON.stringify(Array.from(existingSet))));

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

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

Copied!
const existingSet = new Set([[1, 2, 3]]);

const deepCopy = new Set(JSON.parse(
  JSON.stringify(Array.from(existingSet))
));

// 👇️ Mutate the nested array
for (const item of deepCopy) {
  item.pop();
}

console.log(deepCopy); // 👉️ {[1, 2]}

console.log(existingSet); // 👉️ {[1, 2, 3]}

We used the pop method to mutate the array in the deep copied Set. However, notice that the array in the existing Set wasn't affected.

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

# Create a deep copy of a Set using lodash

You can also use the lodash library to create a deep copy of a Set object.

First, install the lodash module if you haven't already.

Copied!
# 👇️ initialize a package.json file
npm init -y

npm install lodash

You can now import and use the lodash.cloneDeep() method.

Copied!
import _ from 'lodash';

const existingSet = new Set([[1, 2, 3]]);

const deepCopy = _.cloneDeep(existingSet);

// 👇️ Set(1) { [ 1, 2, 3 ] }
console.log(deepCopy);

The cloneDeep method takes a value and recursively clones it, returning the deep cloned value.

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

Copied!
import _ from 'lodash';

const existingSet = new Set([[1, 2, 3]]);

const deepCopy = _.cloneDeep(existingSet);

for (const item of deepCopy) {
  item.pop();
}

console.log(deepCopy); // 👉️ {[1, 2]}

console.log(existingSet); // 👉️ {[1, 2, 3]}

The nested arrays in the Sets have a different reference and location in memory, so mutating the array in the copy doesn't mutate the array in the original Set.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• How to iterate through a Map object in JavaScript
• How to Initialize a Map with Values in JavaScript
• How to merge Maps in JavaScript or TypeScript
• How to sort a Map in JavaScript
• Get the Sum of all Values in a Map using JavaScript