उथले और गहरी कॉपी के बीच क्या अंतर है?

Question

Accepted Answer

ऑब्जेक्ट्स को **संदर्भ के द्वारा** असाइन किया जाता है, इसलिए `b = a` कॉपी नहीं करता है — दोनों एक ही ऑब्जेक्ट की ओर इशारा करते हैं। **उथली** कॉपी शीर्ष स्तर को डुप्लिकेट करती है लेकिन नेस्टेड संदर्भों को साझा करती है; **गहरी** कॉपी सबकुछ डुप्लिकेट करती है, पूरी तरह से स्वतंत्र।

```js
const original = { name: "Ann", address: { city: "NY" } };

// shallow copy: spread / Object.assign
const shallow = { ...original };
shallow.name = "Bob";            // ✅ independent (top-level primitive)
shallow.address.city = "LA";     // ⚠️ ALSO changes original.address.city — shared!

original.address.city; // "LA"  ← mutated through the shallow copy
```

नेस्टेड `address` ऑब्जेक्ट दोनों में **एक ही संदर्भ** है, इसलिए इसे परिवर्तित करने से दोनों प्रभावित होते हैं।

## गहरी कॉपी बनाना

```js
const deep = structuredClone(original); // modern, built-in, handles most types
deep.address.city = "Chicago";          // ✅ original is untouched
```

अन्य विकल्प और उनकी सावधानियाँ:

```js
JSON.parse(JSON.stringify(obj)); // simple, but LOSES functions, Dates → strings, undefined
// lodash: _.cloneDeep(obj)       // robust, for complex cases
```

## यह क्यों मायने रखता है

यह "मेरी state अचानक क्यों बदल गई?" बग का एक प्रमुख स्रोत है, विशेष रूप से React/Redux में जहाँ आप state को mutate नहीं कर सकते।

Spread ठीक है जब आप केवल शीर्ष-स्तरीय फ़ील्ड्स बदलते हैं, लेकिन नेस्टेड अपडेट के लिए आपको नेस्टेड स्तर को भी कॉपी करना चाहिए (`{ ...obj, address: { ...obj.address, city } }`) या गहरा क्लोन करना चाहिए।