Shallow Copy and Deep Copy in JavaScript #Salesforce

Kapil July 23, 2023

What is a Shallow Copy in JavaScript?

Using shallow copy you can copy a variable into a new reference variable using the assignment operator. In simple words it will only store the address of the object it refers to. 

In JavaScript, all standard built-in object-copy operations (spread syntax, Array.prototype.concat(), Array.prototype.slice(), Array.from(), Object.assign(), and Object.create()) create shallow copies rather than deep copies.

So basically it's a clone variable with its reference variable memory allocation. 

Shallow Copy Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
let employee = {
  eid:"E1",
  ename:"Kapil",
  eaddress:"Gurgaon",
  esalary:{base:40000, bonus:10000}
}
console.log("###Employee: ", employee);

let copyEmployee = {...employee}; //Shallow copy
console.log("###Copy Employee: ", copyEmployee);

copyEmployee.ename="Jack";
copyEmployee.esalary.base = 50000;
console.log("---------------After Value Change----------------------");
console.log("###Employee: ", employee);
console.log("###Copy Employee: ", copyEmployee);



In above example we have created a Shallow Copy using spread operator. But if you will notice the base salary value in output, it has been updated for the copy and original reference both. How did that happen?

The reason behind it is the Shallow Copy will only maintain the separate copy for the 1st level of Object, but if you will change the nested objects it will effect your original variable values as well. 


What is Deep Copy?

A deep copy is a copy that creates a new object with new memory locations for all of its properties and nested objects or arrays. It means that if you make changes to the copied object or any of its nested objects or arrays, it will not affect the original object.

Deep Copy Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
let employee = {
  eid:"E1",
  ename:"Kapil",
  eaddress:"Gurgaon",
  esalary:{base:40000, bonus:10000}
}
console.log("###Employee: ", employee);

let copyEmployee = JSON.parse(JSON.stringify(employee)); // Deep copy
console.log("###Copy Employee: ", copyEmployee);

copyEmployee.ename="Jack";
copyEmployee.esalary.base = 50000;
console.log("---------------After Value Change----------------------");
console.log("###Employee: ", employee);
console.log("###Copy Employee: ", copyEmployee);


In the above example as it's a Deep Copy and having it's own separate memory allocation space that means it will be affecting the original copy even if you will change the nested objects value. 

Conclusion

Shallow copying can be more efficient in terms of performance, but may result in unexpected behavior if changes to a copied object affect the original object. Deep copying ensures that changes to a copied object do not affect the original object, but may be more expensive in terms of performance.

While using JSON.parse() and JSON.stringify() is an easy way to create a deep copy of an object, it may not work in all cases. If you need to create a deep copy of an object, using JSON.parse() and JSON.stringify() is an easy option. However, if the object being copied contains functions or circular references, a recursive deep copy function may be necessary.


Checkout Complete Video Tutorial Below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)
Tags:

Post a Comment

0 Comments