React

React
Fundamental of React Js

Friday, May 12, 2023

Difference between deep copy and shallow copy

 The difference between deep copy and shallow copy lies in how they create and handle copies of objects or data structures:

Shallow Copy:

  • A shallow copy creates a new object or data structure that references the original object’s memory location.
  • The copied object and the original object share the same references to the nested objects or elements. Changes made to nested objects or elements will be reflected in both the copied object and the original object.
  • Shallow copying is a relatively fast operation since it does not create copies of the entire object’s contents.
  • Shallow copying can be achieved using various techniques such as assignment, Object.assign(), or the spread operator (...).

Deep Copy:

  • A deep copy creates a new object or data structure and recursively copies all nested objects or elements.
  • The copied object and the original object are entirely independent, and changes made to one will not affect the other.
  • Deep copying involves creating copies of all the nested objects or elements, which can be a computationally expensive operation, especially for large or complex data structures.
  • Deep copying can be achieved using techniques such as recursion, cloning libraries, or the JSON.parse(JSON.stringify()) method (although it has limitations with certain data types).

To summarize, a shallow copy creates a new object that references the original object’s nested objects or elements, while a deep copy creates a new object with independent copies of all nested objects or elements. It’s important to choose the appropriate copying method based on your requirements to ensure the desired behavior and avoid unintended side effects.

Examples

Example of Shallow Copy:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Original object
const originalObj = {
  name: "Bhuvan",
  age: 25,
  hobbies: ["reading", "coding"]
};
 
// Shallow copy using the spread operator
const shallowCopyObj = { ...originalObj };
 
// Modify the shallow copy
shallowCopyObj.name = "Arjun";
shallowCopyObj.hobbies.push("painting");
 
console.log(originalObj);
console.log(shallowCopyObj);

Output

1
2
3
4
5
6
7
8
9
10
11
12
13
Original Object:
{
  name: "Bhuvan",
  age: 25,
  hobbies: ["reading", "coding", "painting"]
}
 
Shallow Copy Object:
{
  name: "Arjun",
  age: 25,
  hobbies: ["reading", "coding", "painting"]
}

In the example above, we create an original object originalObj with a name, age, and an array of hobbies. Then, we create a shallow copy of this object using the spread operator .... When we modify the name and add a new hobby in the shallow copy object shallowCopyObj, the changes are reflected in both the shallow copy and the original object. This demonstrates that a shallow copy creates a new object with a reference to the original object’s nested array, so modifying the array in one object affects the other.

Example of Deep Copy:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Original object
const originalObj = {
  name: "Bhuvan",
  age: 25,
  hobbies: ["reading", "coding"]
};
 
// Deep copy using JSON.parse and JSON.stringify
const deepCopyObj = JSON.parse(JSON.stringify(originalObj));
 
// Modify the deep copy
deepCopyObj.name = "Arjun";
deepCopyObj.hobbies.push("painting");
 
console.log(originalObj);
console.log(deepCopyObj);

Output

1
2
3
4
5
6
7
8
9
10
11
12
13
Original Object:
{
  name: "Bhuvan",
  age: 25,
  hobbies: ["reading", "coding"]
}
 
Deep Copy Object:
{
  name: "Arjun",
  age: 25,
  hobbies: ["reading", "coding", "painting"]
}

In this example, we use JSON.parse and JSON.stringify to create a deep copy of the original object. When we modify the name and add a new hobby in the deep copy object deepCopyObj, the changes only affect the deep copy, while the original object remains unchanged. This shows that a deep copy creates a completely independent copy of the original object, including all nested objects or arrays.

The choice between shallow copy and deep copy depends on the requirements of your specific use case. Shallow copy can be useful when you want to create a new object that shares some references with the original object. Deep copy is preferable when you need to create a new object with independent copies of all nested objects, ensuring that changes to one object do not affect the other.

0 comments: