ஜாவாஸ்கிரிப்ட் ஆப்சனல் செயினிங்: பாதுகாப்பான மற்றும் நேர்த்தியான சொத்து அணுகல்

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

ஆப்சனல் செயினிங் என்றால் என்ன?

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

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

இது எப்படி வேலை செய்கிறது?

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

இந்த உதாரணத்தைக் கவனியுங்கள்:

const user = {
  profile: {
    address: {
      city: "London"
    }
  }
};

// ஆப்சனல் செயினிங் இல்லாமல், user.profile அல்லது user.profile.address வரையறுக்கப்படவில்லை என்றால் இது ஒரு பிழையை ஏற்படுத்தும்
const city = user.profile.address.city; // London

// ஆப்சனல் செயினிங் மூலம், profile அல்லது address இல்லை என்றாலும் நாம் நகரத்தை பாதுகாப்பாக அணுகலாம்
const citySafe = user?.profile?.address?.city; // London

const userWithoutAddress = {
  profile: {},
};

const citySafeUndefined = userWithoutAddress?.profile?.address?.city; // வரையறுக்கப்படாதது (பிழை இல்லை)

முதல் எடுத்துக்காட்டில், ஆப்சனல் செயினிங் இருந்தாலும் இல்லாவிட்டாலும், எல்லா பண்புகளும் இருப்பதால் நமக்கு "London" கிடைக்கிறது.

இரண்டாவது எடுத்துக்காட்டில், userWithoutAddress.profile உள்ளது ஆனால் userWithoutAddress.profile.address இல்லை. ஆப்சனல் செயினிங் இல்லாமல், userWithoutAddress.profile.address.city-ஐ அணுகுவது ஒரு பிழையை ஏற்படுத்தும். ஆப்சனல் செயினிங் உடன், நமக்கு undefined பிழை இல்லாமல் கிடைக்கிறது.

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

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

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

1. API தரவை அணுகுதல்

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

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

  // 'email' பண்பு இல்லை என்றாலும், பயனரின் மின்னஞ்சலை பாதுகாப்பாக அணுகவும்
  const email = data?.profile?.email;
  console.log("Email:", email || "Email not available"); // இயல்புநிலை மதிப்பை வழங்க நலிஷ் கோலெஸ்சிங் பயன்படுத்தவும்

  //பயனரின் முகவரி நகரத்தை பாதுகாப்பாக அணுகவும்
  const city = data?.address?.city;
  console.log("City: ", city || "City not available");


}

fetchData(123); // எடுத்துக்காட்டு பயன்பாடு

2. பயனர் விருப்பங்களுடன் வேலை செய்தல்

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

const userPreferences = {
  theme: {
    color: "dark",
  },
};

// பயனரின் எழுத்துரு அளவை பாதுகாப்பாக அணுகவும், அது அமைக்கப்படவில்லை என்றால் இயல்புநிலை மதிப்பை வழங்கவும்
const fontSize = userPreferences?.font?.size || 16;
console.log("Font Size:", fontSize); // வெளியீடு: 16 (இயல்புநிலை மதிப்பு)

const color = userPreferences?.theme?.color || "light";
console.log("Color Theme:", color); // வெளியீடு: dark

3. நிகழ்வு கேட்பான்களைக் கையாளுதல்

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

document.getElementById('myButton').addEventListener('click', function(event) {
  // இலக்கு உறுப்பின் ஐடியை பாதுகாப்பாக அணுகவும்
  const targetId = event?.target?.id;
  console.log("Target ID:", targetId);
});

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

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

const translations = {
  en: {
    greeting: "Hello",
    farewell: "Goodbye"
  },
  fr: {
    greeting: "Bonjour",
    //farewell: "Au Revoir" - விளக்கத்திற்காக நீக்கப்பட்டது
  }
};

const locale = "fr";

// மொழிபெயர்க்கப்பட்ட வாழ்த்தை பாதுகாப்பாக அணுகவும்
const greeting = translations?.[locale]?.greeting || "Hello";
console.log("Greeting:", greeting); // வெளியீடு: Bonjour

//மொழிபெயர்க்கப்பட்ட விடைபெறுதலை பாதுகாப்பாக அணுகவும்
const farewell = translations?.[locale]?.farewell || "Goodbye";
console.log("Farewell:", farewell); //வெளியீடு: Goodbye (ஆங்கிலத்திற்கு இயல்புநிலையாகிறது)

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

இல்லாத செயல்பாடுகளைப் பாதுகாப்பாக அழைக்கவும் ஆப்சனல் செயினிங் பயன்படுத்தப்படலாம். இதற்காக ?.() தொடரியலைப் பயன்படுத்தவும்.

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

// முறை இருந்தால் பாதுகாப்பாக அழைக்கவும்
myObject?.myMethod?.(); // வெளியீடு: Method called!

const myObject2 = {};

//முறையை பாதுகாப்பாக அழைக்கவும், ஆனால் அது இல்லை
myObject2?.myMethod?.(); // பிழை இல்லை, எதுவும் நடக்காது

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

ஆப்சனல் செயினிங் அணி அணுகலுடனும் பயன்படுத்தப்படலாம், ?.[index] தொடரியலைப் பயன்படுத்தி. காலியாகவோ அல்லது முழுமையாக நிரப்பப்படாத அணிகளுடன் பணிபுரியும்போது இது பயனுள்ளதாக இருக்கும்.

const myArray = ["apple", "banana", "cherry"];

//ஒரு அணி உறுப்பை பாதுகாப்பாக அணுகவும்
const firstElement = myArray?.[0]; // "apple"

const myArray2 = [];

//ஒரு அணி உறுப்பை பாதுகாப்பாக அணுகவும், வரையறுக்கப்படாததாக இருக்கும்.
const firstElement2 = myArray2?.[0]; // undefined

const secondElement = myArray?.[10]; // undefined (பிழை இல்லை)

ஆப்சனல் செயினிங்-ஐ நலிஷ் கோலெஸ்சிங் உடன் இணைத்தல்

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

const user = {};

// பயனரின் பெயரைப் பாதுகாப்பாக அணுகவும், அது அமைக்கப்படவில்லை என்றால் இயல்புநிலை மதிப்பை வழங்கவும்
const name = user?.profile?.name ?? "Unknown User";
console.log("Name:", name); // வெளியீடு: Unknown User

இந்த எடுத்துக்காட்டில், user.profile அல்லது user.profile.name null அல்லது undefined ஆக இருந்தால், name மாறிக்கு "Unknown User" என்ற மதிப்பு ஒதுக்கப்படும்.

உலாவி இணக்கத்தன்மை

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

வரம்புகள்

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

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

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

முடிவுரை

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

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