النسخ السطحي مقابل النسخ العميق في JavaScript

تتعامل JavaScript مع عملية النسخ بطريقتين مختلفتين بناءً على نوع البيانات.

القيم الأولية (النسخ بالقيمة) تشمل الأنواع الأولية السلاسل النصية (strings)، والأرقام (numbers)، والقيم المنطقية (booleans)، والرموز (symbols)، والـ bigInt، والقيمة null. عندما تقوم بنسخ قيمة أولية، تقوم JavaScript بإنشاء نسخة جديدة ومستقلة في الذاكرة.

مثال: let a = 10; let b = a; b = 20; النتيجة: تظل قيمة a هي 10.

القيم غير الأولية (النسخ بالمرجع) تعمل الكائنات (Objects) والمصفوفات (arrays) بشكل مختلف، حيث تستخدم المراجع (references). عندما تقوم بنسخ كائن، فإنك تقوم فقط بنسخ المؤشر (pointer) الذي يشير إلى موقعه في الذاكرة.

مثال: let original = { name: "YOO" }; let copy = original; copy.name = "NEW"; النتيجة: أصبحت قيمة original.name الآن "NEW".

الفرق: السطحي مقابل العميق

يقوم النسخ السطحي (Shallow copy) بنسخ المستوى الأول من الكائن فقط. إذا كان الكائن يحتوي على كائنات متداخلة (nested objects)، فإنه سيظل يشير إلى المراجع المتداخلة الأصلية. أما النسخ العميق (Deep copy) فيقوم بإنشاء كائن جديد تماماً مع جميع القيم الجديدة.

تخيل الأمر كأنه بيتزا:

  • النسخ السطحي: أنت وصديقك تتشاركان بيتزا واحدة. إذا أكل صديقك قطعة، فستصغر البيتزا بالنسبة لك أيضاً.
  • النسخ العميق: كلاكما يمتلك بيتزا منفصلة خاصة به. إذا أكل صديقك قطعة، فستبقى بيتزا الخاصة بك كما هي.

طريقة النسخ السطحي يمكنك استخدام عامل الانتشار (spread operator ...) لعمل نسخة سطحية.

let original = { name: "YOO", details: { age: 22 } }; let copy = { ...original };

تحذير: إذا قمت بتغيير original.details.age، فستتغير أيضاً copy.details.age. هذا هو فخ النسخ السطحي.

طرق النسخ العميق

  1. structuredClone() هذه دالة مدمجة في المتصفحات الحديثة و Node.js. وهي تتعامل مع الهياكل المتداخلة بشكل مثالي.

المميزات:

  • سريعة ومدمجة (native).
  • تتعامل مع التواريخ (Dates)، والتعبيرات النمطية (RegExp)، والخرائط (Maps).

العيوب:

  • تفشل إذا كان الكائن يحتوي على دوال (functions) أو عقد DOM.
  1. JSON.parse(JSON.stringify()) هذه حيلة قديمة حيث تقوم بتحويل الكائن إلى سلسلة نصية (string) ثم تعيده إلى كائن مرة أخرى.

لماذا يجب تجنبها:

  • تفقد البيانات مثل undefined أو Map أو Set أو Infinity.
  • قد تؤدي إلى تلف بعض القيم.

المصدر: https://dev.to/yogesh_992/shallow-copy-vs-deep-copy-in-java-script-explained-in-easiest-way-3dg5