ما الفرق بين النسخة السطحية والنسخة العميقة؟

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 حيث يجب عدم تعديل الحالة.

الـ Spread جيد عندما تغير فقط الحقول الأعلى مستوى، لكن للتحديثات المتداخلة يجب أن تنسخ المستوى المتداخل أيضاً (`{ ...obj, address: { ...obj.address, city } }`) أو تفعل نسخاً عميقة.