ஜாவாஸ்கிரிப்ட் Nullish Coalescing: இயல்புநிலை மதிப்பு ஒதுக்கீட்டிற்கான ஒரு விரிவான வழிகாட்டி

ஜாவாஸ்கிரிப்டில், இயல்புநிலை மதிப்புகளை ஒதுக்குவது ஒரு பொதுவான பணியாகும். பாரம்பரியமாக, டெவலப்பர்கள் இந்த நோக்கத்திற்காக OR ஆபரேட்டரை (||) பயன்படுத்தினர். இருப்பினும், ECMAScript 2020-இல் அறிமுகப்படுத்தப்பட்ட nullish coalescing ஆபரேட்டர் (??), குறிப்பாக null அல்லது undefined மதிப்புகளைக் கையாளும் போது, இயல்புநிலை மதிப்பு ஒதுக்கீடுகளைக் கையாள மிகவும் துல்லியமான மற்றும் நம்பகமான வழியை வழங்குகிறது. இந்த வழிகாட்டி nullish coalescing ஆபரேட்டரின் தொடரியல், நடத்தை, OR ஆபரேட்டரிலிருந்து அதன் வேறுபாடுகள் மற்றும் நடைமுறை பயன்பாட்டு நிகழ்வுகளை ஆராய்ந்து ஒரு ஆழமான பார்வையை வழங்குகிறது.

Nullish Coalescing என்றால் என்ன?

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

தொடரியல் (Syntax)

nullish coalescing ஆபரேட்டருக்கான தொடரியல் நேரடியானது:

leftOperand ?? rightOperand

இங்கே, leftOperand என்பது நீங்கள் null அல்லது undefined எனச் சரிபார்க்க விரும்பும் மாறி அல்லது வெளிப்பாடு, மற்றும் rightOperand என்பது leftOperand உண்மையில் null அல்லது undefined ஆக இருந்தால் நீங்கள் ஒதுக்க விரும்பும் இயல்புநிலை மதிப்பாகும்.

உதாரணம்

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

const username = null ?? "Guest";
console.log(username); // வெளியீடு: Guest

const age = undefined ?? 25;
console.log(age); // வெளியீடு: 25

const city = "London" ?? "Unknown";
console.log(city); // வெளியீடு: London

இந்த எடுத்துக்காட்டில், username ஆரம்பத்தில் null ஆக இருப்பதால் அதற்கு இயல்புநிலை மதிப்பாக "Guest" ஒதுக்கப்படுகிறது. இதேபோல், age ஆரம்பத்தில் undefined ஆக இருப்பதால் அதற்கு 25 ஒதுக்கப்படுகிறது. இருப்பினும், city அதன் அசல் மதிப்பான "London"-ஐ தக்க வைத்துக் கொள்கிறது, ஏனெனில் அது null அல்லது undefined அல்ல.

Nullish மற்றும் Falsy மதிப்புகள்

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

• null
• undefined
• 0 (பூஜ்ஜியம்)
• NaN (எண் அல்ல)
• '' (வெற்று சரம்)
• false

முக்கிய வேறுபாடு என்னவென்றால், nullish coalescing ஆபரேட்டர் null அல்லது undefined-ஐ மட்டுமே சரிபார்க்கிறது, அதேசமயம் OR ஆபரேட்டர் (||) எந்தவொரு falsy மதிப்பையும் சரிபார்க்கிறது.

?? மற்றும் || இடையேயான வேறுபாடு

OR ஆபரேட்டர் (||) ஒரு லாஜிக்கல் OR ஆபரேட்டராகும், இது இடது பக்க ஆப்பராண்ட் falsy ஆக இருந்தால் வலது பக்க ஆப்பராண்டை வழங்கும். இது இயல்புநிலை மதிப்புகளை ஒதுக்கப் பயன்படுத்தப்படலாம் என்றாலும், 0 அல்லது ஒரு வெற்று சரம் போன்ற மதிப்புகளைக் கையாளும் போது எதிர்பாராத நடத்தைக்கு வழிவகுக்கும்.

உதாரணம்: || இன் குறைபாடுகள்

const quantity = 0 || 10; // quantity இல்லை எனில் இயல்புநிலையாக 10 என ஒதுக்க விரும்புகிறோம்
console.log(quantity); // வெளியீடு: 10 (எதிர்பாராதது!) ஏனெனில் 0 ஒரு falsy மதிப்பு

const text = '' || 'Default Text'; // text இல்லை எனில் இயல்புநிலை உரையை ஒதுக்க விரும்புகிறோம்
console.log(text); // வெளியீடு: Default Text (எதிர்பாராதது!) ஏனெனில் '' ஒரு falsy மதிப்பு

முதல் எடுத்துக்காட்டில், quantity இல்லை என்றால் (null அல்லது undefined) மட்டுமே இயல்புநிலை அளவாக 10-ஐ ஒதுக்க நினைத்தோம். இருப்பினும், 0 ஒரு falsy மதிப்பாக இருப்பதால், OR ஆபரேட்டர் தவறாக இயல்புநிலை மதிப்பை ஒதுக்கியது. இதேபோல், வெற்று சரம் இருந்தபோதிலும் (ஆனால் காலியாக இருப்பதால்) இயல்புநிலை உரை காட்டப்படுகிறது.

துல்லியத்திற்காக ?? பயன்படுத்துதல்

முந்தைய உதாரணத்தை nullish coalescing ஆபரேட்டரைப் பயன்படுத்தி மீண்டும் எழுதுவோம்:

const quantity = 0 ?? 10;
console.log(quantity); // வெளியீடு: 0 (சரியானது!)

const text = '' ?? 'Default Text';
console.log(text); // வெளியீடு: '' (சரியானது!)

இப்போது, வெளியீடு எதிர்பார்த்தபடியே உள்ளது. nullish coalescing ஆபரேட்டர் null அல்லது undefined-ஐ மட்டுமே சரிபார்க்கிறது, எனவே 0 மற்றும் '' சரியான மதிப்புகளாகக் கருதப்படுகின்றன, மேலும் அவற்றின் அசல் மதிப்புகள் பாதுகாக்கப்படுகின்றன.

Nullish Coalescing-இன் பயன்பாட்டு வழக்குகள்

ஒரு மாறி கண்டிப்பாக null அல்லது undefined ஆக இருக்கும்போது மட்டுமே இயல்புநிலை மதிப்புகளை வழங்க வேண்டிய பல்வேறு சூழ்நிலைகளில் nullish coalescing ஆபரேட்டர் பயனுள்ளதாக இருக்கும். இங்கே சில பொதுவான பயன்பாட்டு வழக்குகள் உள்ளன:

1. விருப்பத்தேர்வு ஃபங்ஷன் பாராமீட்டர்களை கையாளுதல்

விருப்பத்தேர்வு பாராமீட்டர்களுடன் ஒரு ஃபங்ஷனை வரையறுக்கும்போது, பாராமீட்டர்கள் வழங்கப்படாவிட்டால் இயல்புநிலை மதிப்புகளை வழங்க nullish coalescing ஆபரேட்டரைப் பயன்படுத்தலாம்.

function greet(name, greeting) {
  const userName = name ?? "User";
  const userGreeting = greeting ?? "Hello";
  console.log(`${userGreeting}, ${userName}!`);
}

greet(); // வெளியீடு: Hello, User!
greet("Alice"); // வெளியீடு: Hello, Alice!
greet("Bob", "Greetings"); // வெளியீடு: Greetings, Bob!

2. இயல்புநிலை உள்ளமைவு விருப்பங்களை அமைத்தல்

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

const config = {
  timeout: 5000,
  retries: 3
};

function fetchData(options) {
  const timeout = options.timeout ?? 10000; // இயல்புநிலை டைம்அவுட் 10 வினாடிகள்
  const retries = options.retries ?? 5; // இயல்புநிலை 5 முயற்சிகள்
  console.log(`Timeout: ${timeout}, Retries: ${retries}`);
}

fetchData(config); // வெளியீடு: Timeout: 5000, Retries: 3
fetchData({}); // வெளியீடு: Timeout: 10000, Retries: 5
fetchData({timeout:null, retries: undefined}); // வெளியீடு: Timeout: 10000, Retries: 5

3. உட்பொதிந்த ஆப்ஜெக்ட் பண்புகளை அணுகுதல்

உட்பொதிந்த ஆப்ஜெக்ட்களின் பண்புகளை அணுகும்போது, இடைப்பட்ட பண்புகளில் ஏதேனும் null அல்லது undefined ஆக இருந்தால் இயல்புநிலை மதிப்புகளை வழங்க nullish coalescing ஆபரேட்டரை optional chaining (?.) உடன் இணைக்கலாம்.

const user = {
  profile: {
    address: {
      city: "New York"
    }
  }
};

const cityName = user?.profile?.address?.city ?? "Unknown";
console.log(cityName); // வெளியீடு: New York

const unknownUser = {};
const unknownCityName = unknownUser?.profile?.address?.city ?? "Unknown";
console.log(unknownCityName); // வெளியீடு: Unknown

4. API-கள் மற்றும் வெளிப்புற தரவுகளுடன் பணிபுரிதல்

API-கள் அல்லது வெளிப்புற மூலங்களிலிருந்து தரவைப் பெறும்போது, சில தரவுப் புலங்கள் விடுபட்டிருந்தாலோ அல்லது null அல்லது undefined மதிப்புகளைக் கொண்டிருந்தாலோ இயல்புநிலை மதிப்புகளை வழங்க nullish coalescing ஆபரேட்டரைப் பயன்படுத்தலாம். வெவ்வேறு பிராந்தியங்களிலிருந்து பயனர் தரவை மீட்டெடுப்பதைக் கவனியுங்கள். சில பிராந்தியங்கள் தங்கள் பயனர் தரவில் `country` புலத்தைச் சேர்க்காமல் இருக்கலாம் என்று வைத்துக்கொள்வோம்.

async function getUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const data = await response.json();
    const country = data.country ?? "Unknown Country";
    const timezone = data.timezone ?? "UTC";
    console.log(`User is from: ${country}, Timezone: ${timezone}`);
  } catch (error) {
    console.error("Error fetching user data:", error);
  }
}

// வெவ்வேறு API பதில்களை உருவகப்படுத்துதல்:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };

// இதைச் சோதிக்க, உங்களுக்கு ஒரு உண்மையான API அல்லது mock fetch தேவை.
// விளக்க நோக்கங்களுக்காக, பதில்களை உருவகப்படுத்துவோம்:
global.fetch = async (url) => {
    if (url.includes("123")) {
        return { json: async () => userWithCountry };
    } else if (url.includes("456")) {
        return { json: async () => userWithoutCountry };
    }
    throw new Error("Unexpected URL");
};

getUserData(123); // வெளியீடு: User is from: USA, Timezone: EST
getUserData(456); // வெளியீடு: User is from: Unknown Country, Timezone: GMT

ஆபரேட்டர் முன்னுரிமை

nullish coalescing ஆபரேட்டர் ஒப்பீட்டளவில் குறைந்த ஆபரேட்டர் முன்னுரிமையைக் கொண்டுள்ளது. இது OR (||) மற்றும் AND (&&) ஆபரேட்டர்களை விடக் குறைவானது. எனவே, nullish coalescing ஆபரேட்டரை மற்ற லாஜிக்கல் ஆபரேட்டர்களுடன் இணைக்கும்போது, செயல்பாடுகளின் வரிசையை வெளிப்படையாக வரையறுக்க அடைப்புக்குறிகளைப் பயன்படுத்துவது அவசியம். அவ்வாறு செய்யத் தவறினால் தொடரியல் பிழைகள் அல்லது எதிர்பாராத நடத்தை ஏற்படலாம்.

உதாரணம்: தெளிவிற்காக அடைப்புக்குறிகளைப் பயன்படுத்துதல்

// அடைப்புக்குறிகள் இல்லாமல் (SyntaxError)
// const result = false || null ?? "Default"; // SyntaxError: எதிர்பாராத டோக்கன் '??'

// அடைப்புக்குறிகளுடன் (சரியானது)
const result = false || (null ?? "Default");
console.log(result); // வெளியீடு: Default

const anotherResult = (false || null) ?? "Default";
console.log(anotherResult); // வெளியீடு: null

முதல் எடுத்துக்காட்டில், அடைப்புக்குறிகள் இல்லாததால் SyntaxError ஏற்படுகிறது, ஏனெனில் ஜாவாஸ்கிரிப்ட் என்ஜின் செயல்பாடுகளின் நோக்கம் கொண்ட வரிசையைத் தீர்மானிக்க முடியவில்லை. அடைப்புக்குறிகளைச் சேர்ப்பதன் மூலம், nullish coalescing ஆபரேட்டரை முதலில் மதிப்பிடுமாறு என்ஜினுக்கு வெளிப்படையாகக் கூறுகிறோம். இரண்டாவது உதாரணம் செல்லுபடியாகும்; இருப்பினும், || வெளிப்பாடு முதலில் மதிப்பிடப்படுவதால் வெளியீடு வேறுபட்டது.

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

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

• Chrome 80+
• Firefox 72+
• Safari 13.1+
• Edge 80+
• Node.js 14+

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

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

nullish coalescing ஆபரேட்டரைத் திறம்படப் பயன்படுத்துவதற்கான சில சிறந்த நடைமுறைகள் இங்கே:

• Nullish சோதனைகளுக்கு ??-ஐப் பயன்படுத்தவும்: ஒரு மாறி null அல்லது undefined ஆக இருக்கும்போது மட்டுமே ஒரு இயல்புநிலை மதிப்பை வழங்க விரும்பும்போது nullish coalescing ஆபரேட்டரை (??) பயன்படுத்தவும்.
• சிக்கலான வெளிப்பாடுகளுக்கு அடைப்புக்குறிகளைப் பயன்படுத்தவும்: nullish coalescing ஆபரேட்டரை மற்ற லாஜிக்கல் ஆபரேட்டர்களுடன் இணைக்கும்போது, செயல்பாடுகளின் வரிசையைத் தெளிவாக வரையறுக்க அடைப்புக்குறிகளைப் பயன்படுத்தவும்.
• உலாவி இணக்கத்தன்மையைக் கருத்தில் கொள்ளுங்கள்: உலாவி இணக்கத்தன்மையைச் சரிபார்த்து, தேவைப்பட்டால் பழைய உலாவிகளை ஆதரிக்க ஒரு transpiler-ஐப் பயன்படுத்தவும்.
• தொடர்ந்து பயன்படுத்தவும்: திட்டம் முழுவதும் கணிக்கக்கூடிய குறியீட்டு பாணிக்காக பொருத்தமான இடங்களில் ??-ஐ ஏற்றுக்கொள்ளுங்கள்.
• Optional chaining உடன் இணைக்கவும்: உட்பொதிந்த ஆப்ஜெக்ட்களின் பண்புகளைப் பாதுகாப்பாக அணுகவும் மற்றும் இயல்புநிலை மதிப்புகளை ஒதுக்கவும் ?. உடன் ??-ஐப் பயன்படுத்தவும்.

உலகளாவிய கருத்தில் கொள்ள வேண்டியவை

உலகளாவிய பார்வையாளர்களுக்காக உருவாக்கும்போது, இயல்புநிலை மதிப்பு ஒதுக்கீடுகள் தொடர்பான பின்வரும் புள்ளிகளைக் கவனியுங்கள்:

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

உதாரணம்: Nullish Coalescing உடன் உள்ளூர்மயமாக்கல்

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

function getWelcomeMessage(locale) {
  const localizedMessages = {
    en: "Welcome!",
    fr: "Bienvenue !",
    de: "Willkommen!"
  };

  const message = localizedMessages[locale] ?? "Welcome!"; // லோகேல் காணப்படவில்லை எனில் ஆங்கிலத்திற்கு இயல்புநிலையாகும்
  return message;
}

console.log(getWelcomeMessage("fr")); // வெளியீடு: Bienvenue !
console.log(getWelcomeMessage("es")); // வெளியீடு: Welcome! (ஆங்கிலத்திற்கு இயல்புநிலையாகிறது)

முடிவுரை

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

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