There are two types of clones of objects\arrays, one of them being shallow clones and the other one being deep clones.
Shallow Clones vs Deep Clones
Whenever an array\object containing another array\object inside it is copied from one variable to another variable, the elements of that array\object are not copied; rather a reference pointer is copied to the new variable which points at the old variable. Such copies are known as shallow copies or shallow clones
Whereas, when the elements of an array\object are copied directly (not their reference pointer) to a new variable along with the nested array\object then that copy is known as deep clones or deep copies.
Now, there are two ways of cloning this array:
- By using the slice method
- By using the spread operator
To create a clone using the slice method use the following line:
And to create a clone using the spread operator use the following line:
To test if our elements were copied or not we can use the console log function to print out the original array as well as both of our clones:
We get the following output on our console:
To prove these are actual clones, and not references of the original array passed inside these variables we are going to make some changes in the clones and check if these changes affect the original array or not.
clone2 = "Hello";
Print all the arrays onto the console once again to examine the changes with the following lines:
You will observe the following output:
As you can see, changes in the clone arrays didn’t affect the original array which means that other arrays didn’t copy the reference of the original array.
Shallow clones verification
We have seen how to clone simple arrays, but what if we have an array or object that contains another array inside it, consider the following array:
As you can see, we have an array inside another array, let’s try to make a clone of this array using the slice method that we have already used in the above example:
We have made a clone of this array in the variable “clone”, print out both of these arrays using the console log function:
You should see the following result on the console of your screen:
Let’s try making some changes in the cloned array with the following line of code:
This should make changes in only the “clone” array and not in the original array, but this is where things get interesting. Print out both the arrays using the console log function:
You should see the following result on your console:
You can easily observe from the image above that changes in the cloned array caused changes in the original array. This means that if our object\array contains object\arrays then the cloning passes reference to the nested objects thus creating a shallow clone.
Use a combination of JSON parse and JSON stringify() with the following line:
Now, that we have made our clone we need to verify it by printing it out onto the console by using the console log function:
You will get the following result on the console:
Now, let’s try changing the elements of the cloned array using the following line:
The last thing that is left is to observe both the arrays on the console to determine whether changing the cloned array changed the original array or not:
You will get the following result on your console:
In the above image, you can observe that changes in the cloned array didn’t cause any change in the original array. This means that the nested arrays\objects were also copied rather than their reference being passed to the new variable, and this is why such clones are called the deep clones.