JavaScript-ലെ Shallow Copy vs Deep Copy

ഡാറ്റാ ടൈപ്പിനെ അടിസ്ഥാനമാക്കി JavaScript കോപ്പി ചെയ്യുന്നത് രണ്ട് രീതികളിലാണ്.

പ്രിമിറ്റീവ് വാല്യൂസ് (Copy by Value)

സ്ട്രിംഗുകൾ (strings), നമ്പറുകൾ (numbers), ബൂളിയനുകൾ (booleans), സിംബലുകൾ (symbols), bigInt, പിന്നെ null എന്നിവ പ്രിമിറ്റീവ് ടൈപ്പുകളിൽ ഉൾപ്പെടുന്നു. നിങ്ങൾ ഒരു പ്രിമിറ്റീവ് കോപ്പി ചെയ്യുമ്പോൾ, JavaScript മെമ്മറിയിൽ പുതിയൊരു സ്വതന്ത്ര പതിപ്പ് (independent version) നിർമ്മിക്കുന്നു.

ഉദാഹരണം:

let a = 10;
let b = a;
b = 20;

ഫലം: a എന്നത് 10 ആയി തന്നെ തുടരുന്നു.

നോൺ-പ്രിമിറ്റീവ് വാല്യൂസ് (Copy by Reference)

ഒബ്‌ജക്റ്റുകളും (objects) അറേകളും (arrays) വ്യത്യസ്തമായാണ് പ്രവർത്തിക്കുന്നത്. അവ റഫറൻസുകളാണ് ഉപയോഗിക്കുന്നത്. നിങ്ങൾ ഒരു ഒബ്‌ജക്റ്റ് കോപ്പി ചെയ്യുമ്പോൾ, മെമ്മറിയിലെ അതിന്റെ സ്ഥാനത്തേക്കുള്ള പോയിന്റർ (pointer) മാത്രമാണ് കോപ്പി ചെയ്യുന്നത്.

ഉദാഹരണം:

let original = { name: "YOO" };
let copy = original;
copy.name = "NEW";

ഫലം: original.name ഇപ്പോൾ "NEW" ആണ്.

വ്യത്യാസം: Shallow vs Deep

ഒരു ഷാലോ കോപ്പി (shallow copy) ഒബ്‌ജക്റ്റിന്റെ മുകൾത്തട്ടിലുള്ള (top level) ഭാഗങ്ങൾ മാത്രമേ കോപ്പി ചെയ്യുന്നുള്ളൂ. ഒബ്‌ജക്റ്റിനുള്ളിൽ മറ്റ് ഒബ്‌ജക്റ്റുകൾ (nested objects) ഉണ്ടെങ്കിൽ, അവ ഇപ്പോഴും ഒറിജിനൽ റഫറൻസുകളെയാണ് ചൂണ്ടിക്കാണിക്കുന്നത്. ഒരു ഡീപ്പ് കോപ്പി (deep copy) എല്ലാ പുതിയ വാല്യൂസുകളോടും കൂടി തികച്ചും പുതിയൊരു ഒബ്‌ജക്റ്റ് നിർമ്മിക്കുന്നു.

ഇത് ഒരു പിസ്സയെപ്പോലെ സങ്കൽപ്പിക്കുക:

• Shallow Copy: നിങ്ങളും ഒരു സുഹൃത്തും ഒരു പിസ്സ പങ്കിടുന്നു. നിങ്ങളുടെ സുഹൃത്ത് ഒരു കഷ്ണം കഴിച്ചാൽ, നിങ്ങൾക്ക് ലഭിക്കുന്ന പിസ്സയുടെ അളവും കുറയുന്നു.
• Deep Copy: നിങ്ങൾ രണ്ടുപേർക്കും പ്രത്യേകം പിസ്സകളുണ്ട്. നിങ്ങളുടെ സുഹൃത്ത് ഒരു കഷ്ണം കഴിച്ചാലും നിങ്ങളുടെ പിസ്സയിൽ മാറ്റം വരുന്നില്ല.

ഷാലോ കോപ്പി രീതി (Shallow Copy Method)

ഒരു ഷാലോ കോപ്പി നിർമ്മിക്കാൻ നിങ്ങൾക്ക് സ്പ്രെഡ് ഓപ്പറേറ്റർ (...) ഉപയോഗിക്കാം.

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

മുന്നറിയിപ്പ്: നിങ്ങൾ original.details.age മാറ്റിയാൽ, copy.details.age-ഉം മാറുന്നു. ഇതാണ് ഷാലോ കോപ്പിയിലെ കെണി (trap).

ഡീപ്പ് കോപ്പി രീതികൾ (Deep Copy Methods)

1. structuredClone()

ഇത് ആധുനിക ബ്രൗസറുകളിലും Node.js-ലും ലഭ്യമായ ഒരു ബിൽറ്റ്-ഇൻ ഫംഗ്ഷനാണ്. ഇത് നെസ്റ്റഡ് സ്ട്രക്ചറുകളെ (nested structures) കൃത്യമായി കൈകാര്യം ചെയ്യുന്നു.

ഗുണങ്ങൾ:

• വേഗതയേറിയതും നേറ്റീവ് (native) ആയതും.
• Dates, RegExp, Maps എന്നിവ കൈകാര്യം ചെയ്യുന്നു.

ദോഷങ്ങൾ:

• ഒബ്‌ജക്റ്റിൽ ഫംഗ്ഷനുകളോ DOM നോഡുകളോ ഉണ്ടെങ്കിൽ ഇത് പരാജയപ്പെടും.

2. JSON.parse(JSON.stringify())

ഒരു ഒബ്‌ജക്റ്റിനെ സ്ട്രിംഗാക്കി മാറ്റുകയും പിന്നീട് വീണ്ടും ഒബ്‌ജക്റ്റാക്കി മാറ്റുകയും ചെയ്യുന്ന ഒരു പഴയ രീതിയാണിത്.

എന്തുകൊണ്ട് ഇത് ഒഴിവാക്കണം:

• undefined, Map, Set, അല്ലെങ്കിൽ Infinity പോലുള്ള ഡാറ്റകൾ ഇത് നഷ്ടപ്പെടുത്തുന്നു.
• ഇത് ചില വാല്യൂസുകളെ തെറ്റായ രീതിയിൽ മാറ്റിയേക്കാം (corrupt).

Source: https://dev.to/yogesh_992/shallow-copy-vs-deep-copy-in-java-script-explained-in-easiest-way-3dg5