JavaScript Nullish Coalescing: Sukut bo'yicha Qiymat Belgilash va Yolg'on (Falsy) Qiymatlarga Ishlov Berish

JavaScript dasturchilari ko'pincha asl qiymat mavjud bo'lmaganda yoki yaroqsiz bo'lganda o'zgaruvchilarga sukut bo'yicha qiymatlarni belgilashlari kerak bo'ladi. An'anaga ko'ra, bu maqsadda mantiqiy OR operatori (||) ishlatilgan. Biroq, ECMAScript 2020 da taqdim etilgan nullish coalescing operatori (??), ayniqsa yolg'on (falsy) qiymatlar bilan ishlashda yanada aniqroq va ishonchli yechimni taqdim etadi. Ushbu keng qamrovli qo'llanma nullish coalescing nozikliklarini o'rganadi, uni mantiqiy OR operatori bilan taqqoslaydi va turli stsenariylarda qo'llanilishini namoyish etadi.

Nullish Coalescing (??) ni Tushunish

Nullish coalescing operatori (??) chap operand null yoki undefined bo'lganda o'ng operandni qaytaradi. Aks holda, u chap operandni qaytaradi. Oddiyroq qilib aytganda, u faqat o'zgaruvchi aniq null yoki undefined bo'lgandagina sukut bo'yicha qiymatni taqdim etadi.

Sintaksis:

leftOperand ?? rightOperand

Misol:

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

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

const score = 0 ?? 100;
console.log(score); // Chiqish: 0

            

              
                Copy
              
            
          

Nullish Coalescing (??) ni Mantiqiy OR (||) dan Farqlash

Mantiqiy OR operatori (||) ham sukut bo'yicha qiymatlarni belgilash usulini taqdim etadi. Biroq, u har qanday yolg'on (falsy) qiymatni (false, 0, '', NaN, null, undefined) null yoki undefined ga teng deb hisoblaydi, bu esa kutilmagan xatti-harakatlarga olib kelishi mumkin.

Mantiqiy OR Misoli:

            const quantity = 0 || 10;
console.log(quantity); // Chiqish: 10 (kutilmagan, chunki 0 yolg'on qiymat)

const message = '' || "No message";
console.log(message); // Chiqish: "No message" (kutilmagan, chunki '' yolg'on qiymat)

            

              
                Copy
              
            
          

Nullish Coalescing Misoli:

            const quantity = 0 ?? 10;
console.log(quantity); // Chiqish: 0 (to'g'ri, chunki 0 null yoki undefined emas)

const message = '' ?? "No message";
console.log(message); // Chiqish: "" (to'g'ri, chunki '' null yoki undefined emas)

            

              
                Copy
              
            
          

Ko'rib turganingizdek, nullish coalescing operatori faqat chap tomon aniq null yoki undefined bo'lganda ishga tushadi va 0 hamda '' kabi yolg'on qiymatlarni saqlab qoladi.

Nullish Coalescingni Qo'llash Holatlari

Nullish coalescing ayniqsa, mavjud bo'lmagan qiymat (null yoki undefined) bilan haqiqiy yolg'on qiymatni farqlash kerak bo'lgan holatlarda foydalidir.

1. Konfiguratsiya Parametrlariga Ishlov Berish

Konfiguratsiya parametrlari bilan ishlaganda, aniq belgilanmagan sozlamalar uchun sukut bo'yicha qiymatlarni taqdim etishni xohlashingiz mumkin. ?? dan foydalanish haqiqiy yolg'on qiymatlar (masalan, taymaut qiymati uchun 0) tasodifan standart qiymat bilan almashtirilmasligini ta'minlaydi.

            const config = {
  timeout: 0,
  maxRetries: null,
  apiEndpoint: undefined
};

const timeout = config.timeout ?? 5000; // Agar timeout aniq o'rnatilgan bo'lsa 0 dan foydalaning, aks holda standart 5000
const maxRetries = config.maxRetries ?? 3; // Agar maxRetries null yoki undefined bo'lsa 3 dan foydalaning
const apiEndpoint = config.apiEndpoint ?? "https://example.com/api"; // Agar apiEndpoint null yoki undefined bo'lsa standart endpointdan foydalaning

console.log(`Timeout: ${timeout}, Max Retries: ${maxRetries}, API Endpoint: ${apiEndpoint}`);
// Chiqish: Timeout: 0, Max Retries: 3, API Endpoint: https://example.com/api

            

              
                Copy
              
            
          

2. API Javoblari Bilan Ishlash

API javoblari ko'pincha mavjud bo'lmagan yoki aniq yolg'on qiymatlarga ega maydonlarni o'z ichiga olishi mumkin. Nullish coalescing bu holatlarni osonlik bilan boshqarish imkonini beradi va faqat maydon haqiqatdan ham mavjud bo'lmaganda sukut bo'yicha qiymatlar taqdim etilishini ta'minlaydi.

Misol: Foydalanuvchini ifodalovchi soddalashtirilgan API javobi:

            const user = {
  name: "Alice",
  age: 30,
  countryCode: null,
  acceptedTerms: false,
  profilePictureURL: undefined
};

const displayName = user.name ?? "Unknown User";
const userAge = user.age ?? "Age not available";
const country = user.countryCode ?? "US"; // Agar null/undefined bo'lsa, standart US
const hasAcceptedTerms = user.acceptedTerms ?? true; // Agar null/undefined bo'lsa, standart true
const profilePic = user.profilePictureURL ?? "/default-profile.png"; // Agar null/undefined bo'lsa, standart rasm

console.log(`Name: ${displayName}`); // Chiqish: Name: Alice
console.log(`Age: ${userAge}`); // Chiqish: Age: 30
console.log(`Country: ${country}`); // Chiqish: Country: US
console.log(`Accepted Terms: ${hasAcceptedTerms}`); // Chiqish: Accepted Terms: false
console.log(`Profile Picture: ${profilePic}`); // Chiqish: Profile Picture: /default-profile.png

            

              
                Copy
              
            
          

Ushbu misolda, biz faqat `countryCode` aniq `null` yoki `undefined` bo'lganda "US" ga sukut bo'yicha qaytamiz. Agar API `countryCode: ""` ni qaytargan bo'lsa, bo'sh satr saqlanib qoladi, bu foydalanuvchining haqiqiy (garchi mavjud bo'lmasligi mumkin bo'lsa ham) mamlakat kodini aks ettiradi.

3. Funksiyalarda Zaxira Qiymatlarni Taqdim Etish

Majburiy bo'lmagan parametrlarni qabul qiluvchi funksiyalarni yozishda, nullish coalescing operatoridan yetishmayotgan argumentlar uchun sukut bo'yicha qiymatlarni taqdim etishda foydalanish mumkin.

            function greet(name, greeting) {
  const displayName = name ?? "Guest";
  const salutation = greeting ?? "Hello";
  return `${salutation}, ${displayName}!`;
}

console.log(greet("Bob", "Good morning")); // Chiqish: Good morning, Bob!
console.log(greet(null, undefined)); // Chiqish: Hello, Guest!
console.log(greet("", "")); // Chiqish: , !
console.log(greet("", null)); // Chiqish: Hello, !

            

              
                Copy
              
            
          

Ushbu yondashuv, chaqiruvchi barcha argumentlarni taqdim etmasa ham, funksiyaning ishlashi uchun har doim qiymatga ega bo'lishini ta'minlaydi.

4. Internatsionallashtirish va Mahalliylashtirish (i18n/l10n)

Internatsionallashtirilgan ilovalar bilan ishlaganda, siz ko'pincha turli satrlar uchun har xil tarjimalarga ega bo'lasiz. Nullish coalescing operatoridan ma'lum bir til uchun maxsus tarjima mavjud bo'lmaganda standart tarjimani taqdim etish uchun foydalanish mumkin.

            const translations = {
  en: {
    greeting: "Hello",
    farewell: "Goodbye"
  },
  fr: {
    greeting: "Bonjour"
  }
};

function translate(key, language) {
  return translations[language]?.[key] ?? translations.en[key] ?? `Translation missing for key: ${key}`;
}

console.log(translate("greeting", "fr")); // Chiqish: Bonjour
console.log(translate("farewell", "fr")); // Chiqish: Translation missing for key: farewell
console.log(translate("greeting", "de")); // Chiqish: Hello (ingliz tiliga qaytadi)

            

              
                Copy
              
            
          

Ushbu misolda, biz avval belgilangan til va kalit uchun tarjimani topishga harakat qilamiz. Agar u mavjud bo'lmasa, biz ingliz tilidagi tarjimaga qaytamiz. Agar hatto ingliz tilidagi tarjima ham mavjud bo'lmasa, biz tarjima yo'qligini ko'rsatuvchi xabar qaytaramiz.

5. Formalardagi Foydalanuvchi Kiritmalariga Ishlov Berish

Formalardan foydalanuvchi kiritmalarini qayta ishlashda siz ba'zi maydonlar bo'sh qoldirilgan yoki bo'sh satrlarni o'z ichiga olgan holatlarga duch kelishingiz mumkin. Chuqur joylashgan foydalanuvchi kiritmalari bilan ishlashda nullish coalescing operatorini optional chaining operatori (?.) bilan birgalikda ishlatish juda samarali bo'lishi mumkin.

            const formData = {
  user: {
    name: "",
    address: {
      city: null,
      country: undefined
    }
  }
};

const userName = formData.user.name || "No Name Provided";
const safeUserName = formData?.user?.name ?? "No Name Provided";
const userCity = formData?.user?.address?.city ?? "City Unknown";
const userCountry = formData?.user?.address?.country ?? "Country Unknown";

console.log(userName); // No Name Provided (chunki bo'sh satr yolg'on qiymat)
console.log(safeUserName); // "" (chunki safeUserName aniq null yoki undefined ni tekshiradi)
console.log(userCity); // City Unknown
console.log(userCountry); // Country Unknown

            

              
                Copy
              
            
          

Operatorlar Ustunligi va Boshqa Operatorlar Bilan Birlashtirish

Nullish coalescing operatori nisbatan past operator ustunligiga ega. Bu shuni anglatadiki, uning to'g'ri baholanishini ta'minlash uchun, ayniqsa mantiqiy AND (&&) yoki mantiqiy OR (||) kabi boshqa operatorlar bilan birlashtirilganda, ko'pincha qavslardan foydalanish kerak bo'ladi.

Muhim Eslatma: Siz ?? ni qavslardan foydalanmasdan to'g'ridan-to'g'ri && yoki || bilan birlashtira olmaysiz. Bu amallar bajarilish tartibidagi noaniqlikning oldini olish uchun qilingan.

To'g'ri Foydalanish:

            const value = (someValue ?? 10) && true;
console.log(value); // Chiqish: agar someValue null yoki undefined bo'lmasa true, aks holda false

const result = (null ?? 5) + 10; // Chiqish: 15

            

              
                Copy
              
            
          

Noto'g'ri Foydalanish (Sintaksis Xatoligiga Olib Keladi):

            // const value = someValue ?? 10 && true; // SyntaxError: Unexpected token '&&'

// const result = null ?? 5 + 10; // SyntaxError: Unexpected number

            

              
                Copy
              
            
          

Brauzerlar Bilan Mosligi

Nullish coalescing operatori (??) JavaScript-ga nisbatan yaqinda qo'shilgan. Maqsadli brauzerlaringiz uni qo'llab-quvvatlashiga ishonch hosil qiling. Aksariyat zamonaviy brauzerlar uni qo'llab-quvvatlaydi, ammo eski brauzerlar Babel kabi vositalar yordamida transpilyatsiya qilishni talab qilishi mumkin.

Brauzer mosligini tekshirish uchun MDN Web Docs kabi manbalarga murojaat qilishingiz mumkin.

Nullish Coalescingdan Foydalanishning Eng Yaxshi Amaliyotlari

• Uni mavjud bo'lmagan qiymatlar (null yoki undefined) va haqiqiy yolg'on qiymatlar o'rtasida farqlash kerak bo'lganda ishlating.
• Sintaksis xatolarining oldini olish va to'g'ri baholanishni ta'minlash uchun ?? ni && yoki || bilan birlashtirganda har doim qavslardan foydalaning.
• Brauzer mosligiga e'tibor bering va agar kerak bo'lsa, transpilyatsiyani ko'rib chiqing.
• Kodning o'qilishini yaxshilash uchun ?? dan foydalanishingizni aniq hujjatlashtiring.
• Barcha holatlarda standart qiymatlar to'g'ri tayinlanayotganiga ishonch hosil qilish uchun kodingizni sinchkovlik bilan sinovdan o'tkazing.

Xulosa

Nullish coalescing operatori (??) JavaScript tiliga qo'shilgan kuchli va qimmatli vositadir. U an'anaviy mantiqiy OR operatori (||) ga nisbatan, ayniqsa yolg'on qiymatlar bilan ishlashda sukut bo'yicha qiymatlarni belgilashning aniqroq va ishonchli usulini taqdim etadi. Uning nozikliklari va eng yaxshi amaliyotlarini tushunish orqali siz toza, mustahkamroq va qo'llab-quvvatlash osonroq bo'lgan JavaScript kodini yozishingiz mumkin. Standart qiymatlarni belgilashning aniqligi va ravshanligini oshirish uchun loyihalaringizda ?? ni qo'llashni ko'rib chiqing. Kodingizni turli brauzerlarda sinchkovlik bilan sinab ko'rishni va eski muhitlar uchun transpilyatsiyani hisobga olishni unutmang.

Ushbu qo'llanma keng qamrovli sharhni taqdim etdi. Uning imkoniyatlari va cheklovlarini to'liq tushunish uchun turli kontekstlarda ?? bilan tajriba o'tkazing va amaliy qo'llash orqali o'z tushunchangizni doimiy ravishda takomillashtirib boring.