DEV Community

_Khojiakbar_
_Khojiakbar_

Posted on • Updated on

🤯Deep vs Shallow cloning ???

Image description

How to determine?

Shallow Copy

Criteria:

  • Only the top-level properties are copied. Nested objects are copied by reference.

Indicators:

  • If modifying a nested object in the copied object also changes the original object's nested object, it is a shallow copy. Both the original and copied objects' nested objects will have the same reference.
let original = {
    name: "Alice",
    address: { city: "Wonderland" }
};

let shallowCopy = { ...original }; // Shallow copy

shallowCopy.address.city = "New Wonderland";

console.log(original.address.city); // Output: "New Wonderland"
console.log(shallowCopy.address.city); // Output: "New Wonderland"
console.log(original.address === shallowCopy.address); // Output: true
Enter fullscreen mode Exit fullscreen mode

Deep Copy

Criteria:

  • All properties, including nested objects, are fully copied. No references to the original nested objects are retained.

Indicators:

  • If modifying a nested object in the copied object does not change the original object's nested object, it is a deep copy.
  • The original and copied objects' nested objects will have different references.
let original = {
    name: "Alice",
    address: { city: "Wonderland" }
};

let deepCopy = JSON.parse(JSON.stringify(original)); // Deep copy

deepCopy.address.city = "New Wonderland";

console.log(original.address.city); // Output: "Wonderland"
console.log(deepCopy.address.city); // Output: "New Wonderland"
console.log(original.address === deepCopy.address); // Output: false
Enter fullscreen mode Exit fullscreen mode

Steps to Check Copy Type

1. Create Original Object:

Define an object with nested properties.

let original = {
    name: "Alice",
    address: { city: "Wonderland" }
};
Enter fullscreen mode Exit fullscreen mode

2. Make a Copy:

Create a copy using your chosen method.

let copy = { ...original }; // For shallow copy
// or
let copy = JSON.parse(JSON.stringify(original)); // For deep copy
Enter fullscreen mode Exit fullscreen mode

3. Modify Nested Property in Copy:

Change a nested property in the copied object.

copy.address.city = "New Wonderland";
Enter fullscreen mode Exit fullscreen mode

4. Check Original Object:

Compare the nested property in the original object.

console.log(original.address.city); // Check if this has changed
Enter fullscreen mode Exit fullscreen mode

5. Compare References:

Check if the nested objects are the same reference.

console.log(original.address === copy.address); // true for shallow, false for deep
Enter fullscreen mode Exit fullscreen mode

Summary

Shallow Copy:

  • Top-level properties are copied.
  • Nested objects are shared (same reference).
  • Modifying nested objects in the copy affects the original.

Deep Copy:

  • All properties, including nested objects, are fully copied.
  • Nested objects are not shared (different references).
  • Modifying nested objects in the copy does not affect the original.

By following these steps and criteria, you can determine whether an object copy is shallow or deep.

Top comments (0)