Shallow copy: In the case of shallow copy when we copy the original object into the clone object then the clone object has the copy of the memory address of the original object. Means both points to the same memory address.
Both original object and cloned object internally point to the same referenced object. Since they point to the same memory address so if we changed the cloned object then changes would be reflected back to the original object because they point to the same memory address.
Javascript
<script> var obj1 = { id: 1, company: "GFG"}; var obj2 = obj1; obj2.id = 2; console.log(obj1.id); console.log(obj2.id); </script> |
Output:
2 2
Explanation: In this case, we have cloned the original object obj1 into object obj2. Since they both internally reference to the same memory address if changed id with object obj2 then it would also change the id of object obj1.
obj2.id = 2 will change the id of object obj1 also.
This is called shallow copy. A shallow copy means once we make changes in the clone object it will be reflected back to the original object as well.
But in the case of deep copy, changing the value of the cloned object will not reflect into the original object, because both are pointing to different reference objects. Because the original object has its own reference object and after cloning, the cloned object has its own referenced object. Both are different.
How to avoid shallow copying so that changing the cloned object didn’t affect our original object. We can use the following methods to avoid shallow copy.
- Using spread operator
- Using Object.assign operator
- Using JSON.stringify and JSON.parse
Using spread operator: We can avoid the creation of shallow copies with the help of using the spread operator.
Javascript
<script> var obj1 = { id: 1, company: "GFG" }; var obj2 = { ...obj1 }; obj2.id = 2; console.log(obj1.id); console.log(obj2.id); </script> |
Output:
1 2
Here we are changing the id with object obj2 but it is not changing the id of object obj1.
Using Object.assign operator: It takes the two parameters:
- Empty object and
- Original object
Javascript
<script> var obj1 = { id: 1, company: "GFG" }; var obj2 = Object.assign({}, obj1); obj2.id = 2; console.log(obj1.id); console.log(obj2.id); </script> |
Output:
1 2
But the problem of working with Object.assign operator is that it doesn’t work perfectly in the case of nested objects.
Javascript
<script> var obj1 = { id: 1, company: "GFG", details: { employee_no: 10 } }; var obj2 = Object.assign({}, obj1); obj2.details.employee_no = 20; console.log(obj1.details.employee_no); console.log(obj2.details.employee_no); </script> |
Output:
20 20
In this case, we have a nested object and we are changing the employee_no with the help of obj2. And because of it obj1 employee_no also gets changed. So Object.assign doesn’t work perfectly in the case of nested object.
JSON.stringify and JSON.parse: It works perfectly in the case of nested objects. Unlike Object.assign operator it doesn’t change our original object when we make any changes in the clone object.
Javascript
<script> var obj1 = { id: 1, company: "GFG", details: { employee_no: 10 } }; var obj2 = JSON.parse(JSON.stringify(obj1)) obj2.details.employee_no = 20; console.log(obj1.details.employee_no); console.log(obj2.details.employee_no); </script> |
Output:
10 20
