How to create a Copy of a Set object in JavaScript

Table of Contents #

1. Create a shallow Copy of a Set in JavaScript
2. Create a shallow Copy of a Set using a for...of loop
3. Create a deep copy of a Set in JavaScript
4. Create a deep copy of a Set using lodash

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.