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

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

சிக்கலைப் புரிந்துகொள்வது: விடுபட்ட ப்ராப்பர்ட்டிகளின் ஆபத்துகள்

நீங்கள் ஒரு API-இலிருந்து பெறப்பட்ட பயனர் தரவுகளுடன் பணிபுரியும் ஒரு சூழ்நிலையைக் கவனியுங்கள். பயனர் வகை அல்லது கிடைக்கும் தகவலைப் பொறுத்து API வெவ்வேறு கட்டமைப்புகளைத் தரக்கூடும். சரியான சோதனைகள் இல்லாமல் ஆழமாக உள்ள ஒரு ப்ராப்பர்ட்டியை அணுகுவது எளிதில் ஒரு TypeError: Cannot read properties of undefined (reading '...') பிழைக்கு வழிவகுக்கும். நீங்கள் undefined அல்லது null-இன் ஒரு ப்ராப்பர்ட்டியை அணுக முயற்சிக்கும்போது இந்த பிழை ஏற்படுகிறது.

உதாரணமாக:

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

// Accessing the street property
const street = user.profile.address.street; // Works fine
console.log(street); // Output: 123 Main St

// What if the address is missing?
const user2 = {
  profile: {}
};

// This will cause an error!
// const street2 = user2.profile.address.street; // TypeError: Cannot read properties of undefined (reading 'street')

            

              
                Copy
              
            
          

பாரம்பரியமாக, டெவலப்பர்கள் இந்த பிழைகளைத் தடுக்க நிபந்தனைச் சோதனைகளை (if கூற்றுகள் அல்லது && ஆபரேட்டர்) பயன்படுத்தினர். இருப்பினும், இந்தச் சோதனைகள், குறிப்பாக ஆழமான நெஸ்டட் ஆப்ஜெக்ட்களைக் கையாளும்போது, விரைவாக விரிவானதாகவும் படிக்க கடினமானதாகவும் மாறும்.

ஆப்சனல் செயினிங் (?.) அறிமுகம்

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

இது எவ்வாறு செயல்படுகிறது என்பது இங்கே:

            const street2 = user2.profile?.address?.street;
console.log(street2); // Output: undefined (no error!)

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், user2.profile என்பது null அல்லது undefined ஆக இருந்தால், எக்ஸ்பிரஷன் address அல்லது street-ஐ அணுக முயற்சிக்காமல் உடனடியாக undefined-ஐத் தரும். இதேபோல், user2.profile இருந்து, ஆனால் user2.profile.address என்பது null அல்லது undefined ஆக இருந்தாலும், எக்ஸ்பிரஷன் undefined-ஐத் தரும். எந்த பிழைகளும் ஏற்படாது.

தொடரியல் மற்றும் பயன்பாடு

ஆப்சனல் செயினிங்கின் அடிப்படை தொடரியல்:

            object?.property
object?.method()
array?.[index]

            

              
                Copy
              
            
          

இந்த ஒவ்வொரு நிகழ்வுகளையும் விரிவாகப் பார்ப்போம்:

• object?.property: ஒரு ஆப்ஜெக்ட்டின் ப்ராப்பர்ட்டியை அணுகுகிறது. ஆப்ஜெக்ட் null அல்லது undefined ஆக இருந்தால், எக்ஸ்பிரஷன் undefined-ஐத் தரும்.
• object?.method(): ஒரு ஆப்ஜெக்ட்டின் மெத்தடை அழைக்கிறது. ஆப்ஜெக்ட் null அல்லது undefined ஆக இருந்தால், எக்ஸ்பிரஷன் undefined-ஐத் தரும். இது மெத்தட் இருக்கிறதா என்று சோதிக்காது என்பதை நினைவில் கொள்க; இது ஆப்ஜெக்ட் நலிஷ் ஆக உள்ளதா என்பதை மட்டுமே சரிபார்க்கிறது. ஆப்ஜெக்ட் இருந்து மெத்தட் இல்லை என்றால், நீங்கள் இன்னும் ஒரு TypeError பெறுவீர்கள்.
• array?.[index]: ஒரு அரேவின் எலிமெண்ட்டை அணுகுகிறது. அரே null அல்லது undefined ஆக இருந்தால், எக்ஸ்பிரஷன் undefined-ஐத் தரும்.

நடைமுறை எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்

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

1. API பதில்களில் உள்ள நெஸ்டட் ப்ராப்பர்ட்டிகளை அணுகுதல்

முன்னர் குறிப்பிட்டபடி, API பதில்கள் பெரும்பாலும் மாறுபட்ட கட்டமைப்புகளைக் கொண்டுள்ளன. இந்த பதில்களில் உள்ள ப்ராப்பர்ட்டிகளைப் பாதுகாப்பாக அணுகுவதற்கு ஆப்சனல் செயினிங் விலைமதிப்பற்றதாக இருக்கும்.

            async function fetchUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const data = await response.json();

    // Safely access user's city
    const city = data?.profile?.address?.city;
    console.log(`User's city: ${city || 'N/A'}`); // Use nullish coalescing to provide a default value

  } catch (error) {
    console.error('Error fetching user data:', error);
  }
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், API பதிலில் profile அல்லது address ப்ராப்பர்ட்டி இல்லாவிட்டாலும், குறியீடு பிழையை ஏற்படுத்தாது. பதிலாக, city என்பது undefined ஆக இருக்கும், மேலும் நலிஷ் கோலெஸ்சிங் ஆபரேட்டர் (||) 'N/A' என்ற இயல்புநிலை மதிப்பை வழங்கும்.

2. நிபந்தனைக்குட்பட்டு மெத்தட்களை அழைத்தல்

இல்லாதிருக்கக்கூடிய ஆப்ஜெக்ட்களில் மெத்தட்களை அழைக்கவும் ஆப்சனல் செயினிங் பயன்படுத்தப்படலாம்.

            const config = {
  analytics: {
    trackEvent: (eventName) => {
      console.log(`Tracking event: ${eventName}`);
    }
  }
};

// Call the trackEvent method if it exists
config.analytics?.trackEvent('button_click'); // Tracks the event

const config2 = {};

// This won't cause an error, even if analytics is missing
config2.analytics?.trackEvent('form_submission'); // Does nothing (no error)

            

              
                Copy
              
            
          

இந்த வழக்கில், config.analytics என்பது null அல்லது undefined ஆக இருந்தால், trackEvent மெத்தட் அழைக்கப்படாது, மேலும் எந்த பிழையும் ஏற்படாது.

3. அரே எலிமெண்ட்களை பாதுகாப்பாக அணுகுதல்

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

            const myArray = [1, 2, 3];

// Access the element at index 5 (which doesn't exist)
const element = myArray?.[5];
console.log(element); // Output: undefined

// Accessing a property of an element that might not exist
const users = [{
  id: 1,
  name: 'Alice'
}, {
  id: 2
}];

const secondUserName = users?.[1]?.name; // Access the name of the second user
console.log(secondUserName); // Output: Alice

const thirdUserName = users?.[2]?.name; // Access the name of the third user (doesn't exist)
console.log(thirdUserName); // Output: undefined

            

              
                Copy
              
            
          

4. சர்வதேசமயமாக்கலைக் (i18n) கையாளுதல்

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

            const translations = {
  en: {
    greeting: 'Hello, world!',
    farewell: 'Goodbye!'
  },
  fr: {
    greeting: 'Bonjour le monde!',
    farewell: 'Au revoir!'
  }
};

function getTranslation(locale, key) {
  return translations?.[locale]?.[key] || 'Translation not found';
}

console.log(getTranslation('en', 'greeting')); // Output: Hello, world!
console.log(getTranslation('fr', 'farewell')); // Output: Au revoir!
console.log(getTranslation('de', 'greeting')); // Output: Translation not found (German not supported)

            

              
                Copy
              
            
          

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

5. உள்ளமைவு ஆப்ஜெக்ட்களுடன் பணிபுரிதல்

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

            const defaultConfig = {
  apiEndpoint: 'https://default.example.com',
  timeout: 5000,
  features: {
    darkMode: false
  }
};

const userConfig = {
  apiEndpoint: 'https://user.example.com'
};

// Merge the user config with the default config
const mergedConfig = {
  ...defaultConfig,
  ...userConfig
};

// Access a configuration value safely
const apiUrl = mergedConfig?.apiEndpoint;
const darkModeEnabled = mergedConfig?.features?.darkMode;

console.log(`API Endpoint: ${apiUrl}`);
console.log(`Dark Mode Enabled: ${darkModeEnabled}`);

            

              
                Copy
              
            
          

ஆப்சனல் செயினிங்கை நலிஷ் கோலெஸ்சிங்குடன் (??) இணைத்தல்

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

            const user = {
  name: 'John Doe'
};

// Get the user's age, or default to 30 if it's not available
const age = user?.age ?? 30;
console.log(`User's age: ${age}`); // Output: User's age: 30

// Get the user's city, or default to 'Unknown' if it's not available
const city = user?.profile?.address?.city ?? 'Unknown';
console.log(`User's city: ${city}`); // Output: User's city: Unknown

            

              
                Copy
              
            
          

?. உடன் ?? பயன்படுத்துவது, விரிவான நிபந்தனைச் சோதனைகளை நாடாமல் அறிவார்ந்த இயல்புநிலை மதிப்புகளை வழங்க உங்களை அனுமதிக்கிறது.

ஆப்சனல் செயினிங்கைப் பயன்படுத்துவதன் நன்மைகள்

• மேம்படுத்தப்பட்ட குறியீடு வாசிப்புத்திறன்: ஆப்சனல் செயினிங் விரிவான நிபந்தனைச் சோதனைகளின் தேவையைக் குறைப்பதன் மூலம் உங்கள் குறியீட்டைத் தூய்மையாகவும் புரிந்துகொள்ள எளிதாகவும் ஆக்குகிறது.
• மேம்பட்ட குறியீடு பாதுகாப்பு: இது null அல்லது undefined-இன் ப்ராப்பர்ட்டிகளை அணுகுவதால் ஏற்படும் TypeError விதிவிலக்குகளைத் தடுக்கிறது, உங்கள் குறியீட்டை மேலும் வலுவானதாக மாற்றுகிறது.
• பாய்லர்பிளேட் குறியீடு குறைப்பு: இது மீண்டும் மீண்டும் வரும் if கூற்றுகள் மற்றும் && ஆபரேட்டர்களின் தேவையை நீக்குகிறது, இதன் விளைவாக மிகவும் சுருக்கமான குறியீடு கிடைக்கிறது.
• எளிதான பராமரிப்பு: தூய்மையான மற்றும் சுருக்கமான குறியீட்டைப் பராமரிப்பதும் பிழைதிருத்தம் செய்வதும் எளிது.

வரம்புகள் மற்றும் பரிசீலனைகள்

• உலாவி இணக்கத்தன்மை: ஆப்சனல் செயினிங் அனைத்து நவீன உலாவிகளாலும் ஆதரிக்கப்படுகிறது. இருப்பினும், நீங்கள் பழைய உலாவிகளை ஆதரிக்க வேண்டியிருந்தால், உங்கள் குறியீட்டை இணக்கமான ஜாவாஸ்கிரிப்ட் பதிப்பிற்கு மாற்ற Babel போன்ற ஒரு டிரான்ஸ்பைலரைப் பயன்படுத்த வேண்டியிருக்கும்.
• மெத்தட் இருப்பு: ஆப்சனல் செயினிங் நீங்கள் ஒரு மெத்தடை அழைக்கும் ஆப்ஜெக்ட் null அல்லது undefined ஆக உள்ளதா என்பதை மட்டுமே சரிபார்க்கிறது. இது மெத்தட் இருக்கிறதா என்பதை சரிபார்க்காது. ஆப்ஜெக்ட் இருந்து மெத்தட் இல்லை என்றால், நீங்கள் இன்னும் ஒரு TypeError பெறுவீர்கள். நீங்கள் அதை typeof சரிபார்ப்புடன் இணைக்க வேண்டியிருக்கலாம். உதாரணமாக: object?.method && typeof object.method === 'function' ? object.method() : null
• அதிகப்படியான பயன்பாடு: ஆப்சனல் செயினிங் ஒரு சக்திவாய்ந்த கருவியாக இருந்தாலும், அதை நியாயமான முறையில் பயன்படுத்துவது முக்கியம். அதை அதிகமாகப் பயன்படுத்துவது உங்கள் தரவு கட்டமைப்புகள் அல்லது பயன்பாட்டு தர்க்கத்தில் உள்ள அடிப்படை சிக்கல்களை மறைக்கக்கூடும்.
• பிழைதிருத்தம்: ஆப்சனல் செயினிங் காரணமாக ஒரு செயின் `undefined` என மதிப்பிடப்படும்போது, பிழைதிருத்தம் செய்வது சில நேரங்களில் சற்றே சவாலானதாக இருக்கும், ஏனெனில் செயினின் எந்தப் பகுதி `undefined` மதிப்புக்குக் కారణமானது என்பது உடனடியாகத் தெரியாமல் போகலாம். மேம்பாட்டின் போது console.log கூற்றுகளை கவனமாகப் பயன்படுத்துவது இதற்கு உதவும்.

ஆப்சனல் செயினிங்கைப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

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

முடிவுரை

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

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