Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

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 copyshallowCopy.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 modeExit 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 copydeepCopy.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 modeExit 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 modeExit fullscreen mode

2. Make a Copy:

Create a copy using your chosen method.

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

3. Modify Nested Property in Copy:

Change a nested property in the copied object.

copy.address.city = "New Wonderland";
Enter fullscreen modeExit 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 modeExit 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 modeExit 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)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Frontend Developer
  • Location
    Uzbekistan / Tashkent region / Akkurgan district
  • Education
    Najot Ta'lim
  • Pronouns
    I LOVE THE TIME, THAT IS DEDICATED TO LEARNING!
  • Work
    Junior frontend developer
  • Joined

More from_Khojiakbar_

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp