Deep Copy و Shallow Copy في JavaScript: ليه تعديل النسخة بيغيّر الأصل

يعني إيه Shallow Copy بالظبط

تخيّل ملف فيه أوراق، وعايز نسخة منه بسرعة. صوّرت غلاف الملف وقائمة المحتويات، لكن جوّه كتبت قصاد كل ورقة «راجع الملف الأصلي» بدل ما تصوّرها. فالملف الجديد ليه غلاف مستقل، إنما أوراقه هي نفس أوراق الملف القديم. لو حد عدّل ورقة، الملفّان بيتأثروا.

ده بالظبط الـ Shallow Copy. التعريف الدقيق: النسخ السطحي بينشئ كائنًا جديدًا، وبينسخ حقول المستوى الأول فقط. الحقول الأولية بتتنسخ بقيمتها، والحقول الكائنية بتتنسخ بمرجعها. الأدوات اللي بتعمل كده في JavaScript: { ...obj } و Object.assign({}, obj) للكائنات، و arr.slice() و [ ...arr ] للمصفوفات. كلها سطحية.

في المقابل، النسخ العميق (Deep Copy) بيمشي على كل المستويات. بينشئ نسخة جديدة لكل كائن متداخل، لحد آخر ورقة في الشجرة. النتيجة شجرة منفصلة تمامًا، تعديل أي حقل فيها مابيلمسش الأصل.

الكود اللي بيوريك المشكلة

لاحظ السطرين الأخيرين. الاسم على المستوى الأول، فاتنسخ فعليًا، والتعديل ضرب النسخة بس. أما address فهو كائن متداخل، اتنسخ مرجعه فقط، فالتعديل ضرب الأصل والنسخة مع بعض.

خد سيناريو واقعي. عندك متجر إلكتروني، وحالة السلة محفوظة في object اسمه cart جوّاه items array. مطوّر بيكتب const draft = { ...cart } قبل ما يعدّل كمية منتج، وهو متأكد إنه شغّال على نسخة. لكن draft.items هو نفس الـ array بتاع cart. أول draft.items[0].qty = 5 بيعدّل السلة الأصلية على طول، فالمستخدم بيشوف الكمية اتغيّرت من غير ما يضغط «حفظ». في مراجعة كود لفريق، طلعت النسخ السطحية الناقصة دي سبب حوالي 3 من كل 10 bugs في طبقة الـ state.

الحل: ثلاث طرق للنسخ العميق

عندك ثلاث طرق عملية، ولكل واحدة سعر.

1) structuredClone — الافتراضي اليوم

دالة مبنية في اللغة، بتعمل نسخة عميقة كاملة.

structuredClone بتحافظ على أنواع زي Date و Map و Set و ArrayBuffer، وبتتعامل صح مع المراجع الدائرية (object بيشاور على نفسه). الافتراض هنا: إنك على Node.js 17 أو أحدث، أو متصفح حديث (مدعومة من منتصف 2022). على بيئة أقدم من كده، الدالة دي مش موجودة.

2) طريقة JSON — أبسط حل متوافق

سطر واحد، وشغّال في كل بيئة. لكن له حدود حقيقية: بيحذف الحقول اللي قيمتها undefined أو function، وبيحوّل Date لنص، وبيفقد Map و Set، وبيرمي خطأ لو في مرجع دائري. استخدمه فقط لو الكائن بيانات صرفة (نصوص وأرقام و booleans و arrays عادية).

3) lodash cloneDeep — للحالات المعقّدة

بيتعامل مع كل شيء تقريبًا، بما فيه المراجع الدائرية والـ prototypes. التكلفة: مكتبة خارجية، وأبطأ من الاتنين التانيين.

الأرقام

قياس تقريبي على Node.js 22، لمصفوفة فيها 10,000 كائن، كل كائن جوّاه كائن address متداخل:

في القياس ده: structuredClone حوالي 9 مللي ثانية، طريقة JSON حوالي 14 مللي ثانية، و lodash cloneDeep حوالي 21 مللي ثانية. الأرقام تقريبية وبتختلف حسب شكل البيانات وعمق التداخل، بس الترتيب ثابت غالبًا: structuredClone الأسرع، و JSON في الوسط، و cloneDeep الأبطأ مقابل مرونته الأكبر.

الـ trade-offs اللي لازم تعرفها

كل طريقة ليها سعر صريح. راجع النقاط دي قبل ما تختار.

• structuredClone: بتكسب سرعة وأنواعًا محفوظة ودعم المراجع الدائرية. بتخسر: بترمي DataCloneError لو في function أو عنصر DOM جوّه الكائن، وبتفقد الـ prototype (نسخة من class بتطلع object عادي).
• طريقة JSON: بتكسب البساطة والتوافق الكامل. بتخسر: undefined والدوال بتتحذف، وDate بتبقى نصًّا، وMap وSet بتضيع، والمرجع الدائري بيكسرها.
• lodash cloneDeep: بتكسب تغطية شبه كاملة لكل الأنواع. بتخسر: حجم مكتبة إضافي وأداء أبطأ.
• التكلفة العامة للنسخ العميق: بينسخ الشجرة كلها. على كائن كبير أو جوّه loop بيتكرر كتير، ده بيتحوّل لحمل ملموس على الـ CPU والذاكرة.

متى لا تستخدم النسخ العميق

النسخ العميق مش الحل الافتراضي لكل نسخة. تجنّبه في الحالات دي:

• الكائن مسطّح: لو كل حقوله قيم أولية (مفيش تداخل)، الـ shallow copy كافية، وأسرع، وأرخص. النسخ العميق هنا شغل زيادة بدون فايدة.
• بتعدّل المستوى الأول فقط: لو كل اللي محتاجه تغيير حقل سطحي واحد، { ...obj, name: "Sara" } بتكفي وبتسيب المتداخل زي ما هو بأمان.
• تحديث state في React: الطريقة الصحيحة إنك تنسخ المسار اللي اتغيّر فقط، مش تعمل deep copy للـ state كله في كل render. نسخ كامل في كل تحديث بيهدر أداء بدون داعي.

الخطوة التالية

افتح أقرب مكان في الكود بتعمل فيه { ...obj } أو Object.assign لكائن جوّاه تداخل، قبل ما تعدّله. اسأل سؤالًا واحدًا: هل الكائن المتداخل بيتعدّل بعد النسخ؟ لو الإجابة نعم، حوّل السطر لـ structuredClone واكتب اختبارًا صغيرًا يتأكد إن الأصل ما اتغيّرش. لو وقتها طلعلك DataCloneError، ده معناه إن في function جوّه الكائن — انقل للـ lodash/cloneDeep في الحالة دي تحديدًا.

المصادر

• MDN Web Docs — توثيق الدالة structuredClone() ودعم المتصفحات: developer.mozilla.org/en-US/docs/Web/API/structuredClone
• MDN Web Docs — تعريف Shallow copy: developer.mozilla.org/en-US/docs/Glossary/Shallow_copy
• MDN Web Docs — تعريف Deep copy: developer.mozilla.org/en-US/docs/Glossary/Deep_copy
• Node.js Documentation — توفّر structuredClone كدالة عامة منذ الإصدار 17: nodejs.org/api/globals.html
• Lodash Documentation — دالة cloneDeep: lodash.com/docs
• HTML Living Standard (WHATWG) — خوارزمية النسخ المهيكل (structured clone) وقيودها مثل DataCloneError.