অগভীর এবং গভীর অনুলিপির মধ্যে পার্থক্য কী?

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
```

## কেন এটি গুরুত্বপূর্ণ

এটি "আমার অবস্থা অপ্রত্যাশিতভাবে কেন পরিবর্তন হয়েছে?" বাগের শীর্ষ উৎস, বিশেষত React/Redux-এ যেখানে আপনাকে অবস্থা পরিবর্তন করতে হবে না।

স্প্রেড ঠিক আছে যখন আপনি শুধুমাত্র শীর্ষ-স্তরের ক্ষেত্র পরিবর্তন করেন, তবে নেস্টেড আপডেটের জন্য আপনাকে নেস্টেড স্তরটিও অনুলিপি করতে হবে (`{ ...obj, address: { ...obj.address, city } }`) বা একটি গভীর ক্লোন করতে হবে।