DEV Community

_Khojiakbar_
_Khojiakbar_

Posted on • Edited 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.

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay