JavaScript Nullish Birlashish Operatori: Standart Qiymatlarni Belgilash Bo'yicha To'liq Qo'llanma

JavaScript-da standart qiymatlarni belgilash keng tarqalgan vazifadir. An'anaga ko'ra, dasturchilar bu maqsadda OR operatoridan (||) foydalanishgan. Biroq, ECMAScript 2020 da taqdim etilgan nullish birlashish operatori (??), ayniqsa null yoki undefined qiymatlari bilan ishlaganda standart qiymatlarni belgilash uchun yanada aniqroq va ishonchli usulni taqdim etadi. Ushbu qo'llanma nullish birlashish operatorini chuqur o'rganadi, uning sintaksisi, ishlashi, OR operatoridan farqlari va amaliy qo'llanilish holatlarini ko'rib chiqadi.

Nullish Birlashish Operatori Nima?

Nullish birlashish operatori (??) — bu mantiqiy operator bo'lib, chap tomonidagi operand null yoki undefined bo'lganda o'ng tomonidagi operandni qaytaradi. Aks holda, u chap tomonidagi operandni qaytaradi. Oddiyroq qilib aytganda, u faqat o'zgaruvchi qat'iy null yoki undefined bo'lganda standart qiymatni taqdim etadi.

Sintaksis

Nullish birlashish operatorining sintaksisi juda oddiy:

            chapOperand ?? o'ngOperand
            

              
                Copy
              
            
          

Bu yerda, chapOperand — bu siz null yoki undefined borligini tekshirmoqchi bo'lgan o'zgaruvchi yoki ifoda, va o'ngOperand — bu chapOperand haqiqatan ham null yoki undefined bo'lsa, siz belgilamoqchi bo'lgan standart qiymatdir.

Misol

Quyidagi misolni ko'rib chiqing:

            const username = null ?? "Guest";
console.log(username); // Chiqish: Guest

const age = undefined ?? 25;
console.log(age); // Chiqish: 25

const city = "London" ?? "Unknown";
console.log(city); // Chiqish: London
            

              
                Copy
              
            
          

Ushbu misolda username o'zgaruvchisiga "Guest" standart qiymati berilgan, chunki u dastlab null edi. Xuddi shunday, age o'zgaruvchisiga 25 qiymati berilgan, chunki u undefined bilan boshlangan. Biroq, city o'zining asl qiymati "London"ni saqlab qoladi, chunki u null ham, undefined ham emas.

Nullish va Falsy Qiymatlar

JavaScript-da nullish va falsy qiymatlar o'rtasidagi farqni tushunish juda muhim. Nullish qiymat null yoki undefined dir. Falsy qiymat esa mantiqiy kontekstda 'false' deb hisoblanadigan qiymatdir. Falsy qiymatlarga quyidagilar kiradi:

• null
• undefined
• 0 (nol)
• NaN (Raqam Emas)
• '' (bo'sh satr)
• false

Asosiy farq shundaki, nullish birlashish operatori faqat null yoki undefined ni tekshiradi, OR operatori (||) esa har qanday 'falsy' qiymatni tekshiradi.

?? va || O'rtasidagi Farq

OR operatori (||) — bu mantiqiy OR operatori bo'lib, chap tomonidagi operand 'falsy' bo'lsa, o'ng tomonidagi operandni qaytaradi. U standart qiymatlarni belgilash uchun ishlatilishi mumkin bo'lsa-da, 0 yoki bo'sh satr kabi qiymatlar bilan ishlaganda kutilmagan natijalarga olib kelishi mumkin.

Misol: || Operatorining Kamchiliklari

            const quantity = 0 || 10; // Biz miqdor yo'q bo'lsa standart 10 bo'lishini xohlaymiz
console.log(quantity); // Chiqish: 10 (Kutilmagan!) chunki 0 - falsy

const text = '' || 'Default Text'; // Biz matn yo'q bo'lsa standart matn bo'lishini xohlaymiz
console.log(text); // Chiqish: Default Text (Kutilmagan!) chunki '' - falsy
            

              
                Copy
              
            
          

Birinchi misolda, biz faqat quantity mavjud bo'lmaganda (null yoki undefined) standart miqdor sifatida 10 ni belgilashni niyat qilgan edik. Biroq, 0 'falsy' qiymat bo'lgani uchun, OR operatori noto'g'ri standart qiymatni belgiladi. Xuddi shunday, bo'sh satr ham, satr mavjud bo'lsa-da (lekin bo'sh), standart matnning ko'rsatilishiga sabab bo'ladi.

Aniqroq Natija Uchun ?? dan Foydalanish

Keling, avvalgi misolni nullish birlashish operatoridan foydalanib qayta yozamiz:

            const quantity = 0 ?? 10;
console.log(quantity); // Chiqish: 0 (To'g'ri!)

const text = '' ?? 'Default Text';
console.log(text); // Chiqish: '' (To'g'ri!)
            

              
                Copy
              
            
          

Endi, natija kutilganidek. Nullish birlashish operatori faqat null yoki undefined ni tekshiradi, shuning uchun 0 va '' haqiqiy qiymatlar sifatida qabul qilinadi va ularning asl qiymatlari saqlanib qoladi.

Nullish Birlashish Operatorining Qo'llanilish Holatlari

Nullish birlashish operatori o'zgaruvchi faqat null yoki undefined bo'lganda standart qiymatlarni taqdim etish kerak bo'lgan turli xil stsenariylarda foydalidir. Quyida ba'zi umumiy foydalanish holatlari keltirilgan:

1. Ixtiyoriy Funksiya Parametrlarini Boshqarish

Ixtiyoriy parametrlar bilan funksiya aniqlanayotganda, agar parametrlar taqdim etilmagan bo'lsa, standart qiymatlarni berish uchun nullish birlashish operatoridan foydalanishingiz mumkin.

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

greet(); // Chiqish: Hello, User!
greet("Alice"); // Chiqish: Hello, Alice!
greet("Bob", "Greetings"); // Chiqish: Greetings, Bob!
            

              
                Copy
              
            
          

2. Standart Konfiguratsiya Parametrlarini O'rnatish

Konfiguratsiya obyektlari bilan ishlaganda, agar ma'lum konfiguratsiya parametrlari ko'rsatilmagan bo'lsa, standart qiymatlardan foydalanilishini ta'minlash uchun nullish birlashish operatoridan foydalanishingiz mumkin.

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

function fetchData(options) {
  const timeout = options.timeout ?? 10000; // Standart 10 soniya kutish vaqti
  const retries = options.retries ?? 5; // Standart 5 marta qayta urinish
  console.log(`Timeout: ${timeout}, Retries: ${retries}`);
}

fetchData(config); // Chiqish: Timeout: 5000, Retries: 3
fetchData({}); // Chiqish: Timeout: 10000, Retries: 5
fetchData({timeout:null, retries: undefined}); // Chiqish: Timeout: 10000, Retries: 5
            

              
                Copy
              
            
          

3. Ichki Obyekt Xususiyatlariga Murojaat Qilish

Ichki obyektlarning xususiyatlariga murojaat qilganda, nullish birlashish operatorini ixtiyoriy zanjir (?.) bilan birlashtirib, agar oraliq xususiyatlardan birortasi null yoki undefined bo'lsa, standart qiymatlarni taqdim etish mumkin.

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

const cityName = user?.profile?.address?.city ?? "Unknown";
console.log(cityName); // Chiqish: New York

const unknownUser = {};
const unknownCityName = unknownUser?.profile?.address?.city ?? "Unknown";
console.log(unknownCityName); // Chiqish: Unknown
            

              
                Copy
              
            
          

4. API va Tashqi Ma'lumotlar Bilan Ishlash

API yoki tashqi manbalardan ma'lumotlarni olayotganda, agar ma'lum ma'lumotlar maydonlari yo'q bo'lsa yoki null yoki undefined qiymatlariga ega bo'lsa, standart qiymatlarni taqdim etish uchun nullish birlashish operatoridan foydalanish mumkin. Har xil mintaqalardan foydalanuvchi ma'lumotlarini olishni ko'rib chiqing. Ba'zi mintaqalar foydalanuvchi ma'lumotlariga `country` maydonini qo'shmasligi mumkin deb faraz qilaylik.

            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);
  }
}

// Turli API javoblarini simulyatsiya qilish:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };

// Buni sinab ko'rish uchun sizga haqiqiy API yoki soxta fetch kerak bo'ladi.
// Namoyish maqsadida javoblarni simulyatsiya qilamiz:
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); // Chiqish: User is from: USA, Timezone: EST
getUserData(456); // Chiqish: User is from: Unknown Country, Timezone: GMT
            

              
                Copy
              
            
          

Operatorlar Ustunligi

Nullish birlashish operatori nisbatan past operator ustunligiga ega. U OR (||) va AND (&&) operatorlaridan pastroq. Shuning uchun, nullish birlashish operatorini boshqa mantiqiy operatorlar bilan birlashtirganda, amallar tartibini aniq belgilash uchun qavslardan foydalanish muhim. Buni qilmaslik sintaksis xatolariga yoki kutilmagan natijalarga olib kelishi mumkin.

Misol: Aniqroqlik Uchun Qavslardan Foydalanish

            // Qavslarsiz (SyntaxError)
// const result = false || null ?? "Default"; // SyntaxError: Unexpected token '??'

// Qavslar bilan (To'g'ri)
const result = false || (null ?? "Default");
console.log(result); // Chiqish: Default

const anotherResult = (false || null) ?? "Default";
console.log(anotherResult); // Chiqish: null
            

              
                Copy
              
            
          

Birinchi misolda qavslarning yo'qligi SyntaxError ga olib keladi, chunki JavaScript dvigateli amallarning mo'ljallangan tartibini aniqlay olmaydi. Qavslar qo'shish orqali biz dvigatelga avval nullish birlashish operatorini baholashni aniq aytamiz. Ikkinchi misol to'g'ri; ammo, natija boshqacha, chunki || ifodasi birinchi bo'lib baholanadi.

Brauzerlar Bilan Mosligi

Nullish birlashish operatori (??) nisbatan yangi xususiyat bo'lganligi sababli, brauzerlar bilan mosligini hisobga olish juda muhim, ayniqsa eski brauzerlarni qo'llab-quvvatlash kerak bo'lsa. Ko'pgina zamonaviy brauzerlar nullish birlashish operatorini qo'llab-quvvatlaydi, jumladan:

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

Agar siz eski brauzerlarni qo'llab-quvvatlashingiz kerak bo'lsa, kodingizni JavaScript-ning mos keluvchi versiyasiga o'tkazish uchun Babel kabi transpilerdan foydalanishingiz mumkin. Babel ?? operatorini eski muhitlarda ishlaydigan ekvivalent JavaScript kodiga aylantiradi.

Eng Yaxshi Amaliyotlar

Nullish birlashish operatoridan samarali foydalanish uchun ba'zi eng yaxshi amaliyotlar:

• Nullish tekshiruvlar uchun ?? dan foydalaning: Faqat o'zgaruvchi null yoki undefined bo'lganda standart qiymat berishni xohlasangiz, nullish birlashish operatoridan (??) foydalaning.
• Murakkab ifodalar uchun qavslardan foydalaning: Nullish birlashish operatorini boshqa mantiqiy operatorlar bilan birlashtirganda, amallar tartibini aniq belgilash uchun qavslardan foydalaning.
• Brauzer mosligini hisobga oling: Brauzer mosligini tekshiring va agar kerak bo'lsa, eski brauzerlarni qo'llab-quvvatlash uchun transpilerdan foydalaning.
• Izchillik bilan foydalaning: Loyiha bo'ylab yanada bashorat qilinadigan kodlash uslubi uchun ?? operatorini tegishli joylarda qo'llang.
• Ixtiyoriy zanjir bilan birlashtiring: Obyektlarning ichki xususiyatlariga xavfsiz murojaat qilish va standart qiymatlarni belgilash uchun ?? ni ixtiyoriy zanjir ?. bilan birgalikda ishlating.

Global Jihatlar

Global auditoriya uchun dastur ishlab chiqishda standart qiymatlarni belgilash bilan bog'liq quyidagi jihatlarni hisobga oling:

• Mahalliylashtirish: Standart qiymatlar foydalanuvchining tili yoki mintaqasiga qarab mahalliylashtirilishi kerak bo'lishi mumkin. Masalan, standart valyuta belgisi yoki sana formati.
• Madaniy me'yorlar: Ba'zi standart qiymatlar madaniy me'yorlarga qarab sozlanishi kerak bo'lishi mumkin. Masalan, standart salomlashuv xabari turli madaniyatlarda farq qilishi mumkin.
• Qulaylik: Standart qiymatlar nogironligi bo'lgan foydalanuvchilar uchun qulay va tushunarli bo'lishini ta'minlang. Foydalanuvchi interfeyslarida standart qiymatlar uchun aniq va tavsiflovchi yorliqlarni taqdim eting.
• Vaqt zonalari va sanalar: Sanalar va vaqtlar bilan ishlaganda, standart qiymatlar turli mintaqalardagi foydalanuvchilarga to'g'ri ko'rsatilishini ta'minlash uchun tegishli vaqt zonalari va sana formatlaridan foydalaning.

Misol: Nullish Birlashish Operatori Bilan Mahalliylashtirish

Aytaylik, siz foydalanuvchining til sozlamasiga qarab turli tillarda standart xush kelibsiz xabarini ko'rsatmoqchisiz. Agar mahalliylashtirilgan xabar mavjud bo'lmasa, standart xabarni taqdim etish uchun nullish birlashish operatoridan foydalanishingiz mumkin.

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

  const message = localizedMessages[locale] ?? "Welcome!"; // Agar til topilmasa, ingliz tiliga qaytish
  return message;
}

console.log(getWelcomeMessage("fr")); // Chiqish: Bienvenue !
console.log(getWelcomeMessage("es")); // Chiqish: Welcome! (Ingliz tiliga qaytmoqda)
            

              
                Copy
              
            
          

Xulosa

Nullish birlashish operatori (??) JavaScript tiliga qimmatli qo'shimchadir. U, ayniqsa, 0 yoki bo'sh satrlar kabi qiymatlar bilan ishlaganda, OR operatoriga (||) nisbatan standart qiymatlarni belgilashning aniqroq va ishonchli usulini taqdim etadi. Uning sintaksisi, ishlashi va qo'llanilish holatlarini tushunib, siz standart qiymatlarni belgilashni to'g'ri boshqaradigan toza, yanada qo'llab-quvvatlanadigan kod yozishingiz mumkin. Loyihalaringizda nullish birlashish operatoridan foydalanganda brauzer mosligi, operatorlar ustunligi va global jihatlarni hisobga olishni unutmang.

Ushbu qo'llanmada keltirilgan eng yaxshi amaliyotlarga rioya qilish orqali siz JavaScript kodingizning sifati va ishonchliligini oshirish uchun nullish birlashish operatoridan samarali foydalanishingiz mumkin, bu esa uni yanada mustahkam va tushunishga oson qiladi. Har doim kodingizda aniqlik va qo'llab-quvvatlanuvchanlikka ustuvor ahamiyat berishni unutmang, va nullish birlashish operatori bu maqsadlarga erishishda kuchli vosita bo'lishi mumkin.