JavaScript Object.assign vs Spread: செயல்திறன் ஒப்பீடு & பயன்பாட்டு நிகழ்வுகள்

JavaScript ஆப்ஜெக்ட்களை கையாள பல வழிகளை வழங்குகிறது. இரண்டு பொதுவான முறைகள் Object.assign() மற்றும் ஸ்ப்ரெட் ஆபரேட்டர் (...). இவை இரண்டும் ஒன்று அல்லது அதற்கு மேற்பட்ட மூல ஆப்ஜெக்ட்களிலிருந்து இலக்கு ஆப்ஜெக்டுக்கு பண்புகளை நகலெடுக்க உங்களை அனுமதிக்கின்றன. இருப்பினும், அவை தொடரியல், செயல்திறன் மற்றும் அடிப்படை இயக்கமுறைகளில் வேறுபடுகின்றன. உங்கள் குறிப்பிட்ட பயன்பாட்டு நிகழ்வுக்கு சரியான கருவியைத் தேர்வுசெய்ய உதவும் விரிவான ஒப்பீட்டை இந்த கட்டுரை வழங்குகிறது.

Object.assign() ஐப் புரிந்துகொள்வது

Object.assign() என்பது ஒன்று அல்லது அதற்கு மேற்பட்ட மூல ஆப்ஜெக்ட்களிலிருந்து அனைத்து எண்ணக்கூடிய சொந்த பண்புகளையும் இலக்கு ஆப்ஜெக்ட்டுக்கு நகலெடுக்கும் ஒரு முறையாகும். இது இலக்கு ஆப்ஜெக்டை நேரடியாக மாற்றி அதைத் திருப்பித் தருகிறது. அடிப்படை தொடரியல்:

            Object.assign(target, ...sources)

            

              
                Copy
              
            
          

• target: பண்புகள் நகலெடுக்கப்படும் இலக்கு ஆப்ஜெக்ட். இந்த ஆப்ஜெக்ட் மாற்றப்படும்.
• sources: பண்புகள் நகலெடுக்கப்படும் ஒன்று அல்லது அதற்கு மேற்பட்ட மூல ஆப்ஜெக்ட்கள்.

உதாரணம்:

            const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target); // Output: { a: 1, b: 4, c: 5 }
console.log(returnedTarget === target); // Output: true

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், source இன் பண்புகள் target க்கு நகலெடுக்கப்படுகின்றன. b பண்பு மேலெழுதப்படுகிறது, மற்றும் returnedTarget என்பது target ஆக இருக்கும் அதே ஆப்ஜெக்ட் ஆகும் என்பதை நினைவில் கொள்க.

ஸ்ப்ரெட் ஆபரேட்டரைப் புரிந்துகொள்வது

ஸ்ப்ரெட் ஆபரேட்டர் (...) ஒரு இடர்பேசிளை (array அல்லது object போன்றவை) தனிப்பட்ட கூறுகளாக விரிவாக்க அனுமதிக்கிறது. ஆப்ஜெக்ட்களுடன் பயன்படுத்தும்போது, ​​இது ஆப்ஜெக்டின் பண்புகளின் ஷாலோ காப்பியை புதிய ஆப்ஜெக்டுக்கு உருவாக்குகிறது. தொடரியல் எளிமையானது:

            const newObject = { ...sourceObject };

            

              
                Copy
              
            
          

உதாரணம்:

            const source = { a: 1, b: 2 };
const newObject = { ...source };

console.log(newObject); // Output: { a: 1, b: 2 }
console.log(newObject === source); // Output: false

            

              
                Copy
              
            
          

இங்கே, newObject ஆனது source இன் பண்புகளின் நகலைக் கொண்டுள்ளது. முக்கியமாக, newObject என்பது source இலிருந்து வேறுபட்ட *புதிய* ஆப்ஜெக்ட் ஆகும்.

முக்கிய வேறுபாடுகள்

Object.assign() மற்றும் ஸ்ப்ரெட் ஆபரேட்டர் இரண்டும் ஒரே மாதிரியான முடிவுகளை (ஆப்ஜெக்ட் பண்புகளை நகலெடுத்தல்) அடைந்தாலும், அவை முக்கியமான வேறுபாடுகளைக் கொண்டுள்ளன:

• மாற்றமுடியாத தன்மை: ஸ்ப்ரெட் ஆபரேட்டர் புதிய ஆப்ஜெக்டை உருவாக்குகிறது, மூல ஆப்ஜெக்டை மாற்றாமல் (மாற்றமுடியாதது). Object.assign() இலக்கு ஆப்ஜெக்டை நேரடியாக மாற்றுகிறது (மாற்றக்கூடியது).
• இலக்கு ஆப்ஜெக்ட் கையாளுதல்: Object.assign() இலக்கு ஆப்ஜெக்டைக் குறிப்பிட உங்களை அனுமதிக்கிறது, அதே நேரத்தில் ஸ்ப்ரெட் ஆபரேட்டர் எப்போதும் புதிய ஒன்றை உருவாக்குகிறது.
• பண்பு எண்ணுமை: இரண்டு முறைகளும் எண்ணக்கூடிய பண்புகளை நகலெடுக்கின்றன. எண்ண முடியாத பண்புகள் நகலெடுக்கப்படவில்லை.
• பரம்பரை பண்புகள்: இரண்டு முறைகளும் முன்மாதிரி சங்கிலியிலிருந்து பரம்பரை பண்புகளை நகலெடுப்பதில்லை.
• செட்டர்கள்: Object.assign() இலக்கு ஆப்ஜெக்டில் செட்டர்களை வரவழைக்கிறது. ஸ்ப்ரெட் ஆபரேட்டர் அவ்வாறு செய்வதில்லை; இது நேரடியாக மதிப்புகளை ஒதுக்குகிறது.
• வரையறுக்கப்படாத அல்லது பூஜ்ய மூலங்கள்: Object.assign() null மற்றும் undefined மூல ஆப்ஜெக்ட்களைத் தவிர்க்கிறது. null அல்லது undefined ஐ பரப்புவது ஒரு பிழையை ஏற்படுத்தும்.

செயல்திறன் ஒப்பீடு

குறிப்பாக பெரிய ஆப்ஜெக்ட்கள் அல்லது அடிக்கடி செயல்பாடுகளைக் கையாளும் போது செயல்திறன் ஒரு முக்கியமான கருத்தாகும். மைக்ரோபெஞ்ச்மார்க்ஸ் தொடர்ந்து ஸ்ப்ரெட் ஆபரேட்டர் பொதுவாக Object.assign() ஐ விட வேகமானது என்பதைக் காட்டுகிறது. இந்த வேறுபாடு அவற்றின் அடிப்படை செயலாக்கங்களிலிருந்து உருவாகிறது.

ஸ்ப்ரெட் ஆபரேட்டர் ஏன் வேகமாக உள்ளது?

ஸ்ப்ரெட் ஆபரேட்டர் பெரும்பாலும் JavaScript எஞ்சின்களுக்குள் உகந்த உள் செயலாக்கங்களிலிருந்து பயனடைகிறது. இது குறிப்பாக ஆப்ஜெக்ட் மற்றும் அணிவரிசை உருவாக்கத்திற்காக வடிவமைக்கப்பட்டுள்ளது, இது மிகவும் பொதுவான நோக்கத்திற்கான Object.assign() மூலம் சாத்தியமில்லாத மேம்படுத்தல்களைச் செய்ய எஞ்சின்களை அனுமதிக்கிறது. Object.assign() செட்டர்கள் மற்றும் வெவ்வேறு பண்பு விளக்கங்கள் உட்பட பல்வேறு நிகழ்வுகளைக் கையாள வேண்டும், இது உள்ளார்ந்த முறையில் மிகவும் சிக்கலானது.

பெஞ்ச்மார்க் உதாரணம் (விளக்க):

            // Simplified example (actual benchmarks require more iterations and robust testing)
const object1 = { a: 1, b: 2, c: 3, d: 4, e: 5 };
const object2 = { f: 6, g: 7, h: 8, i: 9, j: 10 };

// Using Object.assign()
console.time('Object.assign');
for (let i = 0; i < 1000000; i++) {
  Object.assign({}, object1, object2);
}
console.timeEnd('Object.assign');

// Using Spread Operator
console.time('Spread Operator');
for (let i = 0; i < 1000000; i++) {
  ({...object1, ...object2 });
}
console.timeEnd('Spread Operator');

            

              
                Copy
              
            
          

குறிப்பு: இது விளக்க நோக்கங்களுக்கான ஒரு அடிப்படை எடுத்துக்காட்டு. உண்மையான உலக பெஞ்ச்மார்க்குகள் துல்லியமான மற்றும் நம்பகமான முடிவுகளுக்கு அர்ப்பணிக்கப்பட்ட பெஞ்ச்மார்க்கிங் லைப்ரரிகளை (Benchmark.js போன்றவை) பயன்படுத்த வேண்டும். JavaScript எஞ்சின், ஆப்ஜெக்ட் அளவு மற்றும் செய்யப்படும் குறிப்பிட்ட செயல்பாடுகளைப் பொறுத்து செயல்திறன் வேறுபாட்டின் அளவு மாறுபடலாம்.

பயன்பாட்டு நிகழ்வுகள்: Object.assign()

ஸ்ப்ரெட் ஆபரேட்டரின் செயல்திறன் நன்மை இருந்தபோதிலும், Object.assign() குறிப்பிட்ட சூழ்நிலைகளில் மதிப்புமிக்கதாக உள்ளது:

• ஏற்கனவே இருக்கும் ஆப்ஜெக்டை மாற்றுதல்: புதிய ஒன்றை உருவாக்குவதை விட, ஒரு ஆப்ஜெக்டை நேரடியாக புதுப்பிக்க (மியூடேஷன்) நீங்கள் எப்போது தேவைப்படுகிறீர்கள். இது மியூட்டபிள் ஸ்டேட் மேனேஜ்மென்ட் லைப்ரரிகளுடன் பணிபுரியும் போது அல்லது செயல்திறன் முற்றிலும் முக்கியமானதாக இருக்கும்போது பொதுவானது, மேலும் புதிய ஆப்ஜெக்ட் ஒதுக்கீட்டைத் தவிர்ப்பது பயனுள்ளது என்பதை உறுதிப்படுத்த உங்கள் குறியீட்டை நீங்கள் உருவாக்கியுள்ளீர்கள்.
• பல ஆப்ஜெக்ட்களை ஒரு இலக்கில் இணைத்தல்: Object.assign() பல மூல ஆப்ஜெக்ட்களிலிருந்து பண்புகளை ஒரு இலக்கில் திறமையாக இணைக்க முடியும்.
• பழைய JavaScript சூழல்களுடன் பணிபுரிதல்: ஸ்ப்ரெட் ஆபரேட்டர் ஒரு ES6 அம்சமாகும். ES6 ஐ ஆதரிக்காத பழைய உலாவிகள் அல்லது சூழல்களை நீங்கள் ஆதரிக்க வேண்டும் என்றால், Object.assign() இணக்கமான மாற்றீட்டை வழங்குகிறது (இருப்பினும் நீங்கள் அதை பாலிஃபில் செய்ய வேண்டியிருக்கலாம்).
• செட்டர்களை வரவழைத்தல்: சொத்து ஒதுக்கீட்டின் போது இலக்கு ஆப்ஜெக்டில் வரையறுக்கப்பட்ட செட்டர்களை நீங்கள் தூண்ட வேண்டும் என்றால், Object.assign() சரியான தேர்வு.

உதாரணம்: மியூட்டபிள் ஃபேஷனில் ஸ்டேட்டை புதுப்பித்தல்

            let state = { name: 'Alice', age: 30 };

function updateName(newName) {
  Object.assign(state, { name: newName }); // Mutates the 'state' object
}

updateName('Bob');
console.log(state); // Output: { name: 'Bob', age: 30 }

            

              
                Copy
              
            
          

பயன்பாட்டு நிகழ்வுகள்: ஸ்ப்ரெட் ஆபரேட்டர்

பெரும்பாலான நவீன JavaScript டெவலப்மென்ட்டில் ஸ்ப்ரெட் ஆபரேட்டர் பொதுவாக அதன் மாற்றமுடியாத தன்மை மற்றும் செயல்திறன் நன்மைகளுக்காக விரும்பப்படுகிறது:

• ஏற்கனவே உள்ள பண்புகளுடன் புதிய ஆப்ஜெக்ட்களை உருவாக்குதல்: மற்றொரு ஆப்ஜெக்டிலிருந்து பண்புகளின் நகலுடன் ஒரு புதிய ஆப்ஜெக்டை உருவாக்க விரும்பும்போது, ​​அடிக்கடி சில மாற்றங்களுடன்.
• செயல்பாட்டு நிரலாக்கம்: ஸ்ப்ரெட் ஆபரேட்டர் செயல்பாட்டு நிரலாக்கக் கொள்கைகளுடன் நன்கு ஒத்துப்போகிறது, இது மாற்றமுடியாத தன்மை மற்றும் பக்க விளைவுகளைத் தவிர்ப்பதை வலியுறுத்துகிறது.
• React ஸ்டேட் புதுப்பிப்புகள்: React இல், காம்போனென்ட் ஸ்டேட்டை மாற்றமுடியாமல் புதுப்பிக்கும்போது ஸ்ப்ரெட் ஆபரேட்டர் பொதுவாக புதிய ஸ்டேட் ஆப்ஜெக்ட்களை உருவாக்க பயன்படுகிறது.
• Redux ரெடியூசர்கள்: Redux ரெடியூசர்கள் செயல்களின் அடிப்படையில் புதிய ஸ்டேட் ஆப்ஜெக்ட்களைத் திருப்பித் தர ஸ்ப்ரெட் ஆபரேட்டரைப் பயன்படுத்துகின்றனர்.

உதாரணம்: React ஸ்டேட்டை மாற்றமுடியாமல் புதுப்பித்தல்

            import React, { useState } from 'react';

function MyComponent() {
  const [state, setState] = useState({ name: 'Charlie', age: 35 });

  const updateAge = (newAge) => {
    setState({ ...state, age: newAge }); // Creates a new state object
  };

  return (
    <div>
      <p>Name: {state.name}</p>
      <p>Age: {state.age}</p>
      <button onClick={() => updateAge(36)}>Increment Age</button>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

ஷாலோ காப்பி vs. டீப் காப்பி

Object.assign() மற்றும் ஸ்ப்ரெட் ஆபரேட்டர் இரண்டும் *ஷாலோ* காப்பியைச் செய்கின்றன என்பதைப் புரிந்துகொள்வது அவசியம். இதன் பொருள் மேல்-நிலை பண்புகள் மட்டுமே நகலெடுக்கப்படுகின்றன. ஒரு ஆப்ஜெக்ட்டில் நெஸ்டட் ஆப்ஜெக்ட்கள் அல்லது அணிவரிசைகள் இருந்தால், அந்த நெஸ்டட் கட்டமைப்புகளுக்கான குறிப்புகள் மட்டுமே நகலெடுக்கப்படுகின்றன, நெஸ்டட் கட்டமைப்புகள் அல்ல.

ஷாலோ காப்பியின் உதாரணம்:

            const original = { a: 1, b: { c: 2 } };
const copy = { ...original };

copy.a = 3; // Modifies 'copy.a', but 'original.a' remains unchanged
copy.b.c = 4; // Modifies 'original.b.c' because 'copy.b' and 'original.b' point to the same object

console.log(original); // Output: { a: 1, b: { c: 4 } }
console.log(copy); // Output: { a: 3, b: { c: 4 } }

            

              
                Copy
              
            
          

*டீப்* காப்பியை உருவாக்க (நெஸ்டட் ஆப்ஜெக்ட்களும் நகலெடுக்கப்படும்), நீங்கள் போன்ற நுட்பங்களைப் பயன்படுத்த வேண்டும்:

• JSON.parse(JSON.stringify(object)): இது ஒரு எளிய ஆனால் மெதுவான முறையாகும். இது செயல்பாடுகள், தேதிகள் அல்லது வட்ட குறிப்புகளுடன் வேலை செய்யாது.
• Lodash இன் _.cloneDeep(): Lodash லைப்ரரி மூலம் வழங்கப்பட்ட பயன்பாட்டு செயல்பாடு.
• தனிப்பயன் திரும்ப அழைப்பு செயல்பாடு: மிகவும் சிக்கலானது ஆனால் டீப் காப்பி செயல்முறையின் மீது அதிக கட்டுப்பாட்டை வழங்குகிறது.
• ஸ்ட்ரக்சர்டு குளோன்: ஆப்ஜெக்ட்களை டீப் காப்பி செய்ய, உலாவிகளுக்கான window.structuredClone() ஐயும், Node.js க்கான structuredClone தொகுப்பையும் பயன்படுத்துகிறது.

சிறந்த நடைமுறைகள்

• மாற்றமுடியாத தன்மைக்கு ஸ்ப்ரெட் ஆபரேட்டரை விரும்பவும்: பெரும்பாலான நவீன JavaScript பயன்பாடுகளில், குறிப்பாக ஸ்டேட் மேனேஜ்மென்ட் அல்லது செயல்பாட்டு நிரலாக்கத்துடன் பணிபுரியும் போது, ​​புதிய ஆப்ஜெக்ட்களை மாற்றமுடியாமல் உருவாக்க ஸ்ப்ரெட் ஆபரேட்டருக்கு ஆதரவு செய்யுங்கள்.
• ஏற்கனவே உள்ள ஆப்ஜெக்ட்களை மாற்றுவதற்கு Object.assign() ஐப் பயன்படுத்தவும்: ஏற்கனவே உள்ள ஆப்ஜெக்டை நேரடியாக மாற்ற வேண்டியிருக்கும் போது Object.assign() ஐத் தேர்வுசெய்யவும்.
• ஷாலோ vs. டீப் காப்பியைப் புரிந்து கொள்ளுங்கள்: இரண்டு முறைகளும் ஷாலோ காப்பிகளைச் செய்கின்றன என்பதை அறிந்து கொள்ளுங்கள். தேவைப்படும் போது டீப் காப்பிக்கு பொருத்தமான நுட்பங்களைப் பயன்படுத்தவும்.
• செயல்திறன் முக்கியமானதாக இருக்கும்போது பெஞ்ச்மார்க்: செயல்திறன் மிக முக்கியமானது என்றால், உங்கள் குறிப்பிட்ட பயன்பாட்டு நிகழ்வில் Object.assign() மற்றும் ஸ்ப்ரெட் ஆபரேட்டரின் செயல்திறனை ஒப்பிட முழுமையான பெஞ்ச்மார்க்குகளை நடத்தவும்.
• குறியீடு படிக்கக்கூடிய தன்மையைக் கவனியுங்கள்: உங்கள் குழுவிற்கு மிகவும் படிக்கக்கூடிய மற்றும் பராமரிக்கக்கூடிய குறியீட்டை வழங்கும் முறையைத் தேர்ந்தெடுக்கவும்.

சர்வதேச பரிசீலனைகள்

Object.assign() மற்றும் ஸ்ப்ரெட் ஆபரேட்டரின் நடத்தை பொதுவாக உலகம் முழுவதும் உள்ள வெவ்வேறு JavaScript சூழல்களில் சீரானதாக இருக்கும். இருப்பினும், பின்வரும் சாத்தியமான பரிசீலனைகளைக் குறிப்பிடுவது மதிப்பு:

• எழுத்து குறியாக்கம்: வெவ்வேறு மொழிகளில் இருந்து எழுத்துகளைக் கொண்ட சரங்களைக் கையாளும் போது, ​​உங்கள் குறியீடு எழுத்து குறியாக்கத்தை சரியாகக் கையாள்கிறதா என்பதை உறுதிப்படுத்தவும். இரண்டு முறைகளும் சரம் பண்புகளை சரியாக நகலெடுக்கின்றன, ஆனால் இந்த சரங்களை செயலாக்கும்போது அல்லது காண்பிக்கும்போது குறியாக்க சிக்கல்கள் ஏற்படலாம்.
• தேதி மற்றும் நேர வடிவங்கள்: தேதிகளைக் கொண்டிருக்கும் ஆப்ஜெக்ட்களை நகலெடுக்கும்போது, ​​நேர மண்டலங்கள் மற்றும் தேதி வடிவங்களைக் கவனத்தில் கொள்ளுங்கள். நீங்கள் தேதிகளை வரிசைப்படுத்தவோ அல்லது வரிசைப்படுத்தவோ தேவைப்பட்டால், வெவ்வேறு பிராந்தியங்களில் நிலைத்தன்மையை உறுதிப்படுத்த பொருத்தமான முறைகளைப் பயன்படுத்தவும்.
• எண் வடிவம்: வெவ்வேறு பிராந்தியங்கள் எண் வடிவத்திற்கு வெவ்வேறு மரபுகளைப் பயன்படுத்துகின்றன (எ.கா., தசம பிரிப்பான்கள், ஆயிரக்கணக்கான பிரிப்பான்கள்). வெவ்வேறு இடங்களில் உள்ள பயனர்களுக்குக் காட்டப்படக்கூடிய எண் தரவைக் கொண்டிருக்கும் ஆப்ஜெக்ட்களை நகலெடுக்கும்போது அல்லது கையாளும் போது இந்த வேறுபாடுகளைப் பற்றி தெரிந்து கொள்ளுங்கள்.

முடிவுரை

Object.assign() மற்றும் ஸ்ப்ரெட் ஆபரேட்டர் JavaScript இல் ஆப்ஜெக்ட் கையாளுதலுக்கான மதிப்புமிக்க கருவிகள். ஸ்ப்ரெட் ஆபரேட்டர் பொதுவாக சிறந்த செயல்திறனை வழங்குகிறது மற்றும் மாற்றமுடியாத தன்மையை ஊக்குவிக்கிறது, இது பல நவீன JavaScript பயன்பாடுகளில் விருப்பமான தேர்வாக அமைகிறது. இருப்பினும், Object.assign() ஏற்கனவே உள்ள ஆப்ஜெக்ட்களை மாற்றுவதற்கும் பழைய சூழல்களை ஆதரிப்பதற்கும் பயனுள்ளதாக உள்ளது. அவற்றின் வேறுபாடுகள் மற்றும் பயன்பாட்டு நிகழ்வுகளைப் புரிந்துகொள்வது, மிகவும் திறமையான, பராமரிக்கக்கூடிய மற்றும் வலுவான JavaScript குறியீட்டை எழுத உதவும்.