🤯Deep vs Shallow cloning ???

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

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

Steps to Check Copy Type

1. Create Original Object:

Define an object with nested properties.

let original = {
    name: "Alice",
    address: { city: "Wonderland" }
};

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

3. Modify Nested Property in Copy:

Change a nested property in the copied object.

copy.address.city = "New Wonderland";

4. Check Original Object:

Compare the nested property in the original object.

console.log(original.address.city); // Check if this has changed

5. Compare References:

Check if the nested objects are the same reference.

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

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.