🤯Deep vs Shallow cloning ???

_Khojiakbar_ - Jun 17 - - Dev Community

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.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player