ஜாவாஸ்கிரிப்ட் ஆப்சனல் செயினிங் மற்றும் மெத்தட் பைண்டிங்: பாதுகாப்பான மெத்தட் குறிப்புகளுக்கான வழிகாட்டி

நவீன ஜாவாஸ்கிரிப்ட் மேம்பாட்டில், ஆழமாகப் பின்னப்பட்ட ஆப்ஜெக்ட்களில் விடுபட்டிருக்கக்கூடிய பண்புகள் அல்லது மெத்தட்களைக் கையாள்வது ஒரு பொதுவான சவாலாகும். இந்த அமைப்புகளில் செல்லும்போது, சங்கிலியில் உள்ள ஒரு பண்பு null அல்லது undefined ஆக இருந்தால், அது எளிதில் பிழைகளுக்கு வழிவகுக்கும். அதிர்ஷ்டவசமாக, ஜாவாஸ்கிரிப்ட் இந்தச் சூழ்நிலைகளை நேர்த்தியாகக் கையாள சக்திவாய்ந்த கருவிகளை வழங்குகிறது: ஆப்சனல் செயினிங் மற்றும் சிந்தனைமிக்க மெத்தட் பைண்டிங். இந்த வழிகாட்டி இந்த அம்சங்களை விரிவாக ஆராய்ந்து, பாதுகாப்பான, மேலும் வலுவான, மற்றும் பராமரிக்கக்கூடிய குறியீட்டை எழுத உங்களுக்குத் தேவையான அறிவை வழங்கும்.

ஆப்சனல் செயினிங்கைப் புரிந்துகொள்ளுதல்

ஆப்சனல் செயினிங் (?.) என்பது ஒரு ஆப்ஜெக்டின் பண்புகளை, சங்கிலியில் உள்ள ஒவ்வொரு குறிப்பும் நலிஷ் இல்லாதது (null அல்லது undefined இல்லை) என்பதை வெளிப்படையாக சரிபார்க்காமல் அணுக அனுமதிக்கும் ஒரு தொடரியல் ஆகும். சங்கிலியில் உள்ள ஏதேனும் ஒரு குறிப்பு null அல்லது undefined என மதிப்பிடப்பட்டால், அந்த வெளிப்பாடு குறுகிய சுற்றாகி, பிழையை உண்டாக்காமல் undefined என்பதைத் திருப்பியளிக்கும்.

அடிப்படைப் பயன்பாடு

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

            const user = {
  profile: {
    address: {
      street: '123 Main St'
    }
  }
};

let street;
if (user && user.profile && user.profile.address) {
  street = user.profile.address.street;
}

console.log(street); // Output: 123 Main St

            

              
                Copy
              
            
          

இது விரைவில் சிக்கலானதாகவும், படிக்கக் கடினமாகவும் ஆகிவிடும். ஆப்சனல் செயினிங் மூலம், இதே தர்க்கத்தை மிகவும் சுருக்கமாக வெளிப்படுத்தலாம்:

            const user = {
  profile: {
    address: {
      street: '123 Main St'
    }
  }
};

const street = user?.profile?.address?.street;

console.log(street); // Output: 123 Main St

            

              
                Copy
              
            
          

பண்புகளில் (user, profile, address) ஏதேனும் null அல்லது undefined ஆக இருந்தால், முழு வெளிப்பாடும் பிழையைத் தராமல் undefined என மதிப்பிடப்படும்.

நிஜ உலக எடுத்துக்காட்டுகள்

• ஏபிஐ தரவை அணுகுதல்: பல ஏபிஐ-கள் வெவ்வேறு அளவிலான உட்பொதிவுகளுடன் தரவைத் தருகின்றன. ஆப்சனல் செயினிங், இடைப்பட்ட அனைத்து ஆப்ஜெக்ட்களும் இருக்கின்றனவா என்று கவலைப்படாமல் குறிப்பிட்ட புலங்களை பாதுகாப்பாக அணுக உங்களை அனுமதிக்கிறது. உதாரணமாக, ஒரு சமூக ஊடக ஏபிஐ-யிலிருந்து ஒரு பயனரின் நகரத்தைப் பெறுதல்: const city = response?.data?.user?.location?.city;
• பயனர் விருப்பங்களைக் கையாளுதல்: பயனர் விருப்பங்கள் ஆழமாகப் பின்னப்பட்ட ஆப்ஜெக்டில் சேமிக்கப்படலாம். ஒரு குறிப்பிட்ட விருப்பம் அமைக்கப்படவில்லை என்றால், இயல்புநிலை மதிப்பை வழங்க ஆப்சனல் செயினிங்கைப் பயன்படுத்தலாம்: const theme = user?.preferences?.theme || 'light';
• கட்டமைப்பு ஆப்ஜெக்ட்களுடன் வேலை செய்தல்: கட்டமைப்பு ஆப்ஜெக்ட்கள் பல நிலை அமைப்புகளைக் கொண்டிருக்கலாம். ஆப்சனல் செயினிங் குறிப்பிட்ட அமைப்புகளை அணுகுவதை எளிதாக்கும்: const apiEndpoint = config?.api?.endpoints?.users;

செயல்பாட்டு அழைப்புகளுடன் ஆப்சனல் செயினிங்

ஆப்சனல் செயினிங்கை செயல்பாட்டு அழைப்புகளுடனும் பயன்படுத்தலாம். இது குறிப்பாக, எப்போதும் வரையறுக்கப்படாத கால்பேக் செயல்பாடுகள் அல்லது மெத்தட்களைக் கையாளும்போது பயனுள்ளதாக இருக்கும்.

            const obj = {
  myMethod: function() {
    console.log('Method called!');
  }
};

obj.myMethod?.(); // Calls myMethod if it exists

const obj2 = {};

obj2.myMethod?.(); // Does nothing; no error thrown

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், obj.myMethod?.() ஆனது, obj ஆப்ஜெக்டில் myMethod இருந்தால் மட்டுமே அதை அழைக்கிறது. myMethod வரையறுக்கப்படவில்லை என்றால் (obj2 இல் உள்ளது போல), வெளிப்பாடு நேர்த்தியாக எதையும் செய்யாது.

வரிசை அணுகலுடன் ஆப்சனல் செயினிங்

ஆப்சனல் செயினிங்கை பிராக்கெட் குறியீட்டைப் பயன்படுத்தி வரிசை அணுகலுடனும் பயன்படுத்தலாம்.

            const arr = ['a', 'b', 'c'];

const value = arr?.[1]; // value is 'b'
const value2 = arr?.[5]; // value2 is undefined

console.log(value);
console.log(value2);

            

              
                Copy
              
            
          

மெத்தட் பைண்டிங்: சரியான this சூழலை உறுதி செய்தல்

ஜாவாஸ்கிரிப்ட்டில், this என்ற முக்கியச்சொல் ஒரு செயல்பாடு செயல்படுத்தப்படும் சூழலைக் குறிக்கிறது. this எவ்வாறு பிணைக்கப்பட்டுள்ளது என்பதைப் புரிந்துகொள்வது முக்கியமானது, குறிப்பாக ஆப்ஜெக்ட் மெத்தட்கள் மற்றும் நிகழ்வு கையாளுநர்களுடன் கையாளும்போது. இருப்பினும், ஒரு மெத்தடை ஒரு கால்பேக்காக அனுப்பும்போது அல்லது அதை ஒரு மாறிக்கு ஒதுக்கும்போது, this சூழல் இழக்கப்படலாம், இது எதிர்பாராத நடத்தைக்கு வழிவகுக்கும்.

சிக்கல்: this சூழலை இழப்பது

எண்ணிக்கையை அதிகரித்து அதைக் காட்டும் ஒரு மெத்தட் கொண்ட ஒரு எளிய கவுண்டர் ஆப்ஜெக்டைக் கவனியுங்கள்:

            const counter = {
  count: 0,
  increment: function() {
    this.count++;
    console.log(this.count);
  }
};

counter.increment(); // Output: 1

const incrementFunc = counter.increment;
incrementFunc(); // Output: NaN (because 'this' is undefined in strict mode, or refers to the global object in non-strict mode)

            

              
                Copy
              
            
          

இரண்டாவது எடுத்துக்காட்டில், counter.increment-ஐ incrementFunc-க்கு ஒதுக்கி பின்னர் அதை அழைப்பது, this ஆனது counter ஆப்ஜெக்டைக் குறிக்காத நிலைக்கு வழிவகுக்கிறது. அதற்கு பதிலாக, அது undefined (ஸ்ட்ரிக்ட் மோடில்) அல்லது குளோபல் ஆப்ஜெக்ட்டை (நான்-ஸ்ட்ரிக்ட் மோடில்) சுட்டிக்காட்டுகிறது, இதனால் count பண்பு கண்டுபிடிக்கப்படாமல் NaN ஆகிறது.

மெத்தட் பைண்டிங்கிற்கான தீர்வுகள்

மெத்தட்களுடன் வேலை செய்யும்போது this சூழல் சரியாகப் பிணைக்கப்பட்டுள்ளதை உறுதிப்படுத்த பல நுட்பங்களைப் பயன்படுத்தலாம்:

1. bind()

bind() மெத்தட் ஒரு புதிய செயல்பாட்டை உருவாக்குகிறது, அது அழைக்கப்படும்போது, அதன் this முக்கியச்சொல் வழங்கப்பட்ட மதிப்புக்கு அமைக்கப்படும். இது பிணைப்பிற்கான மிகவும் வெளிப்படையான மற்றும் பெரும்பாலும் விரும்பப்படும் முறையாகும்.

            const counter = {
  count: 0,
  increment: function() {
    this.count++;
    console.log(this.count);
  }
};

const incrementFunc = counter.increment.bind(counter);
incrementFunc(); // Output: 1
incrementFunc(); // Output: 2

            

              
                Copy
              
            
          

bind(counter)-ஐ அழைப்பதன் மூலம், நாம் ஒரு புதிய செயல்பாட்டை (incrementFunc) உருவாக்குகிறோம், அதில் this நிரந்தரமாக counter ஆப்ஜெக்ட்டுடன் பிணைக்கப்படுகிறது.

2. ஏரோ செயல்பாடுகள்

ஏரோ செயல்பாடுகளுக்கு சொந்தமாக this சூழல் இல்லை. அவை சூழ்ந்துள்ள ஸ்கோப்பிலிருந்து this மதிப்பை லெக்சிக்கலாகப் பெறுகின்றன. இது பல சூழ்நிலைகளில் சரியான சூழலைப் பாதுகாக்க அவற்றை சிறந்ததாக்குகிறது.

            const counter = {
  count: 0,
  increment: () => {
    this.count++; // 'this' refers to the enclosing scope
    console.log(this.count);
  }
};

//IMPORTANT: In this specific example, because the enclosing scope is the global scope, this won't work as intended.
//Arrow functions work well when the `this` context is already defined within an object's scope.
//Below is the correct way to use arrow function for method binding

const counter2 = {
  count: 0,
  increment: function() {
    // Store 'this' in a variable
    const self = this;
    setTimeout(() => {
      self.count++;
      console.log(self.count); // 'this' correctly refers to counter2
    }, 1000);
  }
};

counter2.increment();

            

              
                Copy
              
            
          

முக்கிய குறிப்பு: ஆரம்ப தவறான எடுத்துக்காட்டில், ஏரோ செயல்பாடு 'this' க்காக குளோபல் ஸ்கோப்பைப் பெற்றதால், தவறான நடத்தைக்கு வழிவகுத்தது. ஏரோ செயல்பாடுகள் மெத்தட் பைண்டிங்கிற்கு மிகவும் பயனுள்ளதாக இருக்கும், விரும்பிய 'this' சூழல் ஏற்கனவே ஒரு ஆப்ஜெக்டின் ஸ்கோப்பிற்குள் நிறுவப்பட்டிருக்கும்போது, இரண்டாவது சரிசெய்யப்பட்ட எடுத்துக்காட்டில் setTimeout செயல்பாட்டிற்குள் நிரூபிக்கப்பட்டுள்ளது.

3. call() மற்றும் apply()

call() மற்றும் apply() மெத்தட்கள் ஒரு குறிப்பிட்ட this மதிப்புடன் ஒரு செயல்பாட்டை அழைக்க உங்களை அனுமதிக்கின்றன. முக்கிய வேறுபாடு என்னவென்றால், call() தருமதிகளை தனித்தனியாக ஏற்றுக்கொள்கிறது, அதேசமயம் apply() அவற்றை ஒரு வரிசையாக ஏற்றுக்கொள்கிறது.

            const counter = {
  count: 0,
  increment: function(value) {
    this.count += value;
    console.log(this.count);
  }
};

counter.increment.call(counter, 5); // Output: 5
counter.increment.apply(counter, [10]); // Output: 15

            

              
                Copy
              
            
          

call() மற்றும் apply() நீங்கள் மாறும் வகையில் this சூழலை அமைக்கவும், செயல்பாட்டிற்கு தருமதிகளை அனுப்பவும் தேவைப்படும்போது பயனுள்ளதாக இருக்கும்.

நிகழ்வு கையாளுநர்களில் மெத்தட் பைண்டிங்

நிகழ்வு கையாளுநர்களுடன் வேலை செய்யும்போது மெத்தட் பைண்டிங் மிகவும் முக்கியமானது. நிகழ்வு கையாளுநர்கள் பெரும்பாலும் நிகழ்வைத் தூண்டிய DOM உறுப்புடன் this பிணைக்கப்பட்டு அழைக்கப்படுகின்றன. நிகழ்வு கையாளுநருக்குள் ஆப்ஜெக்டின் பண்புகளை நீங்கள் அணுக வேண்டுமானால், நீங்கள் வெளிப்படையாக this சூழலைப் பிணைக்க வேண்டும்.

            class MyComponent {
  constructor(element) {
    this.element = element;
    this.handleClick = this.handleClick.bind(this); // Bind 'this' in the constructor
    this.element.addEventListener('click', this.handleClick);
  }

  handleClick() {
    console.log('Clicked!', this.element); // 'this' refers to the MyComponent instance
  }
}

const myElement = document.getElementById('myButton');
const component = new MyComponent(myElement);

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், கன்ஸ்ட்ரக்டரில் உள்ள this.handleClick = this.handleClick.bind(this), DOM உறுப்பால் நிகழ்வு கையாளுநர் தூண்டப்பட்டாலும், handleClick மெத்தடிற்குள் உள்ள this எப்போதும் MyComponent இன்ஸ்டன்ஸைக் குறிப்பதை உறுதி செய்கிறது.

மெத்தட் பைண்டிங்கிற்கான நடைமுறைப் பரிசீலனைகள்

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

ஆப்சனல் செயினிங் மற்றும் மெத்தட் பைண்டிங்கை இணைத்தல்

ஆப்சனல் செயினிங் மற்றும் மெத்தட் பைண்டிங் ஆகியவற்றை ஒன்றாகப் பயன்படுத்தி இன்னும் பாதுகாப்பான மற்றும் வலுவான குறியீட்டை உருவாக்கலாம். ஒரு ஆப்ஜெக்ட் பண்பில் ஒரு மெத்தடை அழைக்க விரும்பும் ஒரு சூழ்நிலையைக் கவனியுங்கள், ஆனால் அந்தப் பண்பு இருக்கிறதா அல்லது அந்த மெத்தட் வரையறுக்கப்பட்டுள்ளதா என்று உங்களுக்குத் தெரியவில்லை.

            const user = {
  profile: {
    greet: function(name) {
      console.log(`Hello, ${name}!`);
    }
  }
};

user?.profile?.greet?.('Alice'); // Output: Hello, Alice!

const user2 = {};

user2?.profile?.greet?.('Bob'); // Does nothing; no error thrown

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், user?.profile?.greet?.('Alice'), user.profile ஆப்ஜெக்டில் greet மெத்தட் இருந்தால் அதைப் பாதுகாப்பாக அழைக்கிறது. user, profile, அல்லது greet ஆகியவற்றில் ஏதேனும் null அல்லது undefined ஆக இருந்தால், முழு வெளிப்பாடும் பிழையைத் தராமல் நேர்த்தியாக எதையும் செய்யாது. இந்த அணுகுமுறை, இல்லாத ஒரு ஆப்ஜெக்டில் தற்செயலாக ஒரு மெத்தடை அழைத்து, இயக்க நேரப் பிழைகளுக்கு வழிவகுப்பதை உறுதி செய்கிறது. இந்த நிலையில் மெத்தட் பைண்டிங்கும் மறைமுகமாகக் கையாளப்படுகிறது, ஏனெனில் அனைத்து சங்கிலி உறுப்புகளும் இருந்தால் அழைப்புச் சூழல் ஆப்ஜெக்ட் கட்டமைப்பிற்குள் இருக்கும். greet க்குள் `this` சூழலை வலுவாக நிர்வகிக்க, வெளிப்படையாக பிணைப்பது அவசியமாக இருக்கலாம்.

            const user = {
  profile: {
    name: "John Doe",
    greet: function() {
      console.log(`Hello, ${this.name}!`);
    }
  }
};

// Bind the 'this' context to 'user.profile'
user.profile.greet = user.profile.greet.bind(user.profile);

user?.profile?.greet?.(); // Output: Hello, John Doe!

const user2 = {};

user2?.profile?.greet?.(); // Does nothing; no error thrown

            

              
                Copy
              
            
          

நலிஷ் கோலெஸ்சிங் ஆபரேட்டர் (??)

இது நேரடியாக மெத்தட் பைண்டிங்குடன் தொடர்புடையது இல்லை என்றாலும், நலிஷ் கோலெஸ்சிங் ஆபரேட்டர் (??) பெரும்பாலும் ஆப்சனல் செயினிங்கை நிறைவு செய்கிறது. ?? ஆபரேட்டர் அதன் இடது பக்க ஆப்பரெண்ட் null அல்லது undefined ஆக இருக்கும்போது அதன் வலது பக்க ஆப்பரெண்ட்டையும், இல்லையெனில் அதன் இடது பக்க ஆப்பரெண்ட்டையும் திருப்பியளிக்கும்.

            const username = user?.profile?.name ?? 'Guest';
console.log(username); // Output: Guest if user?.profile?.name is null or undefined

            

              
                Copy
              
            
          

இது விடுபட்டிருக்கக்கூடிய பண்புகளைக் கையாளும்போது இயல்புநிலை மதிப்புகளை வழங்குவதற்கான ஒரு சுருக்கமான வழியாகும்.

உலாவி இணக்கத்தன்மை மற்றும் டிரான்ஸ்பிலேஷன்

ஆப்சனல் செயினிங் மற்றும் நலிஷ் கோலெஸ்சிங் ஆகியவை ஜாவாஸ்கிரிப்ட்டில் ஒப்பீட்டளவில் புதிய அம்சங்களாகும். அவை நவீன உலாவிகளில் பரவலாக ஆதரிக்கப்பட்டாலும், பழைய உலாவிகளுக்கு இணக்கத்தன்மையை உறுதிப்படுத்த பேபல் போன்ற கருவிகளைப் பயன்படுத்தி டிரான்ஸ்பிலேஷன் தேவைப்படலாம். டிரான்ஸ்பிலேஷன் குறியீட்டை இலக்கு உலாவி ஆதரிக்கும் ஜாவாஸ்கிரிப்ட்டின் பழைய பதிப்பிற்கு மாற்றுகிறது.

முடிவுரை

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