Borislav Hadzhiev
Reading timeยท4 min
Photo from Unsplash
for...of
looplodash
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
.
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
.
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
.
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
.
for...of
loop #To create a shallow copy of a Set
:
Set
.for...of
loop to iterate over the original Set
.add()
method to add each element to the new Set
object.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.
To create a deep copy of a Set
:
Set
to an array.JSON.stringify()
method to stringify the array.JSON.parse()
method to parse the string back into an array.Set()
constructor.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.
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.
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.
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.
JSON.stringify
method, so that all nested objects lose their reference.If we then try to mutate the array in the new Set
, it wouldn't affect the
existing Set
.
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.
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.
# ๐๏ธ initialize a package.json file npm init -y npm install lodash
You can now import and use the lodash.cloneDeep method.
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
.
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
.