JavaScript-இல் Shallow Copy vs Deep Copy

தரவு வகையைப் (data type) பொறுத்து JavaScript நகலெடுப்பினை (copying) இரண்டு வழிகளில் கையாள்கிறது.

Primitive Values (மதிப்பால் நகலெடுத்தல் - Copy by Value)

Primitive வகைகளில் strings, numbers, booleans, symbols, bigInt மற்றும் null ஆகியவை அடங்கும். நீங்கள் ஒரு primitive மதிப்பை நகலெடுக்கும்போது, JavaScript நினைவகத்தில் (memory) ஒரு புதிய தனித்துவமான பதிப்பை உருவாக்குகிறது.

Example:

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

முடிவு: a என்பது 10 ஆகவே இருக்கும்.

Non-Primitive Values (குறிப்பால் நகலெடுத்தல் - Copy by Reference)

Objects மற்றும் arrays வேறுபட்ட முறையில் செயல்படுகின்றன. அவை references-களைப் பயன்படுத்துகின்றன. நீங்கள் ஒரு object-ஐ நகலெடுக்கும்போது, அதன் நினைவக இருப்பிடத்திற்கான (memory location) pointer-ஐ மட்டுமே நகலெடுக்கிறீர்கள்.

Example:

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

முடிவு: original.name இப்போது "NEW" என்று இருக்கும்.

வித்தியாசம்: Shallow vs Deep

ஒரு shallow copy என்பது ஒரு object-இன் மேல் மட்டத்தை (top level) மட்டுமே நகலெடுக்கும். அந்த object-இல் nested objects இருந்தால், அவை இன்னும் அசல் nested references-களைத்தான் சுட்டிக்காட்டும். ஒரு deep copy என்பது அனைத்து புதிய மதிப்புகளுடனும் ஒரு முழுமையான புதிய object-ஐ உருவாக்குகிறது.

இதை ஒரு பீட்சாவைப் போலக் கற்பனை செய்து பாருங்கள்:

  • Shallow Copy: நீங்களும் உங்கள் நண்பரும் ஒரு பீட்சாவைப் பகிர்ந்து கொள்கிறீர்கள். உங்கள் நண்பர் ஒரு துண்டைச் சாப்பிட்டால், உங்களுக்கும் பீட்சாவின் அளவு குறையும்.
  • Deep Copy: உங்கள் இருவரிடமும் தனித்தனி பீட்சாக்கள் உள்ளன. உங்கள் நண்பர் ஒரு துண்டைச் சாப்பிட்டாலும், உங்கள் பீட்சா அப்படியே இருக்கும்.

Shallow Copy முறை

ஒரு shallow copy-ஐ உருவாக்க நீங்கள் spread operator (...) பயன்படுத்தலாம்.

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

எச்சரிக்கை: நீங்கள் original.details.age-ஐ மாற்றினால், copy.details.age-ம் மாறும். இதுதான் shallow copy-இன் சிக்கல் (trap).

Deep Copy முறைகள்

1. structuredClone()

இது நவீன உலாவிகள் (browsers) மற்றும் Node.js-இல் உள்ள ஒரு built-in function ஆகும். இது nested structures-களைச் சரியாகக் கையாளும்.

நன்மைகள்:

  • வேகமானது மற்றும் native ஆனது.
  • Dates, RegExp மற்றும் Maps-களைக் கையாளும்.

தீமைகள்:

  • object-இல் functions அல்லது DOM nodes இருந்தால் இது தோல்வியடையும்.

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

இது ஒரு பழைய நுட்பமாகும், இதில் ஒரு object-ஐ string-ஆக மாற்றி, மீண்டும் ஒரு object-ஆக மாற்றுகிறீர்கள்.

ஏன் இதைத் தவிர்க்க வேண்டும்:

  • undefined, Map, Set அல்லது Infinity போன்ற தரவுகள் இதில் இழக்கப்படும்.
  • இது சில மதிப்புகளைச் சிதைக்கக்கூடும் (corrupt).

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