JavaScript Nullish Coalescing: Standart Qiymatlarni Belgilashni O'zlashtirish

Zamonaviy JavaScript dasturlashida mustahkam va kutiladigan kod yozish uchun null va undefined qiymatlarini to'g'ri boshqarish juda muhimdir. ES2020 da taqdim etilgan nullish coalescing operatori (??) o'zgaruvchi aynan null yoki undefined bo'lganda standart qiymatlarni belgilashning ixcham va kuchli usulini taqdim etadi. Ushbu blog posti nullish coalescing operatorining nozik jihatlarini o'rganadi, uni OR operatori (||) bilan taqqoslaydi va turli xil kodlash stsenariylarida qo'llaniladigan amaliy misollar bilan uning afzalliklarini ko'rsatib beradi.

null va undefined: Nullish Qiymatlarni Tushunish

Nullish coalescing operatorini o'rganishdan oldin, JavaScriptdagi null va undefined o'rtasidagi farqni tushunish zarur. Ikkalasi ham qiymatning yo'qligini ifodalaydi, lekin ular turli holatlarda yuzaga keladi.

• null: Qiymatning qasddan yo'qligini anglatadi. Odatda, dasturchi tomonidan o'zgaruvchining hozirda qiymati yo'qligini yoki xususiyat mavjud emasligini bildirish uchun belgilanadi.
• undefined: O'zgaruvchi e'lon qilingan, lekin unga hali qiymat berilmaganligini bildiradi. Shuningdek, obyektning mavjud bo'lmagan xususiyatiga murojaat qilinganda yoki funksiya aniq qiymat qaytarmaganda ham yuzaga kelishi mumkin.

Bu farqni tushunish juda muhim, chunki nullish coalescing operatori aynan shu ikki qiymatga mo'ljallangan.

Nullish Coalescing Operatori (??) bilan Tanishtiruv

Nullish coalescing operatori (??) bu mantiqiy operator bo'lib, uning chap tomonidagi operandi null yoki undefined bo'lsa, o'ng tomonidagi operandni qaytaradi. Aks holda, u chap tomonidagi operandni qaytaradi. Uning sintaksisi juda oddiy:

            const result = value ?? defaultValue;
            

              
                Copy
              
            
          

Ushbu ifodada, agar value null yoki undefined bo'lsa, resultga defaultValue qiymati beriladi. Aks holda, resultga valuening qiymati beriladi.

Nullish Coalescingning Amaliy Misollari

Keling, nullish coalescing operatoridan foydalanishni bir nechta amaliy misollar bilan ko'rib chiqamiz:

1. Foydalanuvchi Sozlamalari uchun Standart Qiymatlarni Belgilash

Tasavvur qiling, siz foydalanuvchilar o'z sozlamalarini moslashtirishi mumkin bo'lgan veb-dastur yaratmoqdasiz. Siz bu sozlamalarni foydalanuvchi profili obyektida saqlashingiz mumkin. Agar foydalanuvchi sozlamani aniq belgilamagan bo'lsa, standart qiymatni taqdim etish uchun nullish coalescing operatoridan foydalanishingiz mumkin.

            const userProfile = {
  username: "johnDoe",
  theme: null // Foydalanuvchi hali mavzu tanlamagan
};

const theme = userProfile.theme ?? "light"; // Standart sifatida yorug' mavzuni tanlash

console.log(theme); // Natija: "light"
            

              
                Copy
              
            
          

Bu misolda, userProfile.theme null bo'lgani uchun, theme o'zgaruvchisiga "light" standart qiymati beriladi. Agar foydalanuvchi mavzuni o'rnatgan bo'lsa, masalan, userProfile.theme = "dark";, unda theme o'zgaruvchisiga "dark" qiymati berilgan bo'lar edi.

2. API'dan Kelgan Yetishmayotgan Ma'lumotlarni Boshqarish

API'dan ma'lumotlarni olayotganda, yetishmayotgan yoki to'liq bo'lmagan ma'lumotlarga duch kelish odatiy hol. Nullish coalescing operatori yetishmayotgan xususiyatlar uchun standart qiymatlar berish uchun ishlatilishi mumkin.

            const apiResponse = {
  data: {
    productName: "Example Product",
    description: undefined // Ta'rif berilmagan
  }
};

const description = apiResponse.data.description ?? "No description available.";

console.log(description); // Natija: "No description available."
            

              
                Copy
              
            
          

Bu yerda, apiResponse.data.description undefined bo'lgani uchun, description o'zgaruvchisiga "No description available." standart xabari beriladi.

3. Dastur Sozlamalarini Konfiguratsiya Qilish

Konfiguratsiya fayllarida ba'zi sozlamalar ixtiyoriy bo'lishi mumkin. Agar bu sozlamalar aniq belgilanmagan bo'lsa, dasturingiz oqilona standart qiymatlardan foydalanishini ta'minlash uchun nullish coalescing operatoridan foydalanishingiz mumkin.

            const config = {
  apiUrl: "https://example.com/api",
  timeout: null // Kutish vaqti belgilanmagan
};

const timeout = config.timeout ?? 5000; // Standart kutish vaqti 5000ms

console.log(timeout); // Natija: 5000
            

              
                Copy
              
            
          

Bu holda, config.timeout null bo'lgani uchun, timeout o'zgaruvchisiga 5000 millisekundlik standart qiymat o'rnatiladi.

Nullish Coalescing va OR Operatori (||): Muhim Farq

Nullish coalescing operatori (??) va OR operatori (||) o'rtasidagi farqni tushunish muhimdir. Ikkalasi ham standart qiymat belgilash uchun ishlatilishi mumkin bo'lsa-da, ular soxta qiymatlarga duch kelganda turlicha ishlaydi.

OR operatori (||) chap tomonidagi operandi har qanday soxta qiymat bo'lganda o'ng tomonidagi operandni qaytaradi. JavaScriptdagi soxta qiymatlar quyidagilarni o'z ichiga oladi:

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

Nullish coalescing operatori (??) *faqatgina* chap tomonidagi operandi null yoki undefined bo'lganda o'ng tomonidagi operandni qaytaradi. U boshqa soxta qiymatlarni hisobga olmaydi.

Farqni Misollar Bilan Ko'rsatish

Keling, nol bo'lishi mumkin bo'lgan o'zgaruvchiga standart qiymat berishni xohlagan stsenariyni ko'rib chiqamiz.

            const quantity = 0;

// OR operatoridan foydalanish
const quantityOR = quantity || 1; // Agar quantity soxta bo'lsa, standart sifatida 1 ni olish

console.log(quantityOR); // Natija: 1 (noto'g'ri, chunki 0 soxta qiymat)

// Nullish coalescing operatoridan foydalanish
const quantityNullish = quantity ?? 1; // Faqat quantity null yoki undefined bo'lsa, standart sifatida 1 ni olish

console.log(quantityNullish); // Natija: 0 (to'g'ri, chunki 0 null yoki undefined emas)
            

              
                Copy
              
            
          

Bu misolda OR operatori 1 standart qiymatini noto'g'ri belgilaydi, chunki 0 soxta qiymatdir. Nullish coalescing operatori esa 0 qiymatini to'g'ri saqlab qoladi, chunki u faqat null yoki undefinedni tekshiradi.

Yana bir keng tarqalgan stsenariy - bu bo'sh satrlarni boshqarish. Aytaylik, siz foydalanuvchi nomini ko'rsatmoqchisiz, lekin agar nom berilmagan bo'lsa, standart xabarni ko'rsatmoqchisiz.

            const userName = ""; // Foydalanuvchi ismini kiritmagan

// OR operatoridan foydalanish
const displayNameOR = userName || "Guest";

console.log(displayNameOR); // Natija: "Guest" (noto'g'ri, chunki "" soxta qiymat)

// Nullish coalescing operatoridan foydalanish
const displayNameNullish = userName ?? "Guest";

console.log(displayNameNullish); // Natija: "" (noto'g'ri, lekin kutilgan xatti-harakatga yaqinroq)
            

              
                Copy
              
            
          

Nullish coalescing operatori bo'sh satr holatini to'liq hal qilmasa-da (chunki u hali ham bo'sh satrni qaytaradi), u ?? va || o'rtasidagi farqni tushunish muhimligini ko'rsatadi. Agar siz *aynan* bo'sh satrlarni null/undefined ga teng deb hisoblashni istasangiz, sizga aniq tekshiruv kerak bo'ladi: const displayName = userName === null || userName === undefined || userName === '' ? 'Guest' : userName;. Biroq, ?? operatori `0` yoki `false` kabi qiymatlar bilan kutilmagan xatti-harakatlarning oldini oladi.

Eng Yaxshi Amaliyotlar va Mulohazalar

Nullish coalescing operatoridan foydalanganda, quyidagi eng yaxshi amaliyotlarni inobatga oling:

• Uni aynan null yoki undefined uchun standart qiymat berishni xohlaganingizda ishlating. Uni umumiy maqsadli standart qiymat belgilash operatori sifatida ishlatishdan saqlaning.
• Soxta qiymatlardan xabardor bo'ling. ?? va || o'rtasidagi farqni tushuning va o'zingizning maxsus ehtiyojlaringizga eng mos keladigan operatorni tanlang.
• Xavfsiz xususiyatlarga kirish uchun uni ixtiyoriy zanjirlash (?.) bilan birlashtiring. Bu sizga oraliq xususiyat null yoki undefined bo'lsa, xatoliklarga olib kelmasdan, ichki xususiyatlarga kirish imkonini beradi.

Nullish Coalescingni Ixtiyoriy Zanjirlash Bilan Birlashtirish

Ixtiyoriy zanjirlash (?.) sizga obyektning xususiyatlariga, hatto ba'zi oraliq xususiyatlar null yoki undefined bo'lsa ham, xavfsiz kirish imkonini beradi. Nullish coalescing operatori bilan birlashtirilganda, siz mavjud bo'lmasligi mumkin bo'lgan xususiyatlar uchun standart qiymatlar berishingiz mumkin.

            const user = {
  profile: {
    address: {
      city: null
    }
  }
};

const city = user.profile?.address?.city ?? "Unknown City";

console.log(city); // Natija: "Unknown City"
            

              
                Copy
              
            
          

Ushbu misolda, agar user.profile yoki user.profile.address null yoki undefined bo'lsa, ixtiyoriy zanjirlash xatoning oldini oladi va nullish coalescing operatori "Unknown City" standart qiymatini belgilaydi.

Global Qo'llanilish: Turli Madaniyatlardagi Turli Xil Stsenariylar

• Raqam Formatlash: Ba'zi hududlarda standart raqam formati `0.00` bo'lishi mumkin bo'lsa, boshqalar o'nlik ajratuvchi sifatida `,` dan foydalanadi. Standart qiymatlaringiz kutilgan foydalanuvchi lokallariga mos kelishiga ishonch hosil qiling.
• Sana Formatlari: `null` qoldirilgan sana maydoni joriy sanaga standartlashtirilishi mumkin. Xalqaro foydalanuvchilaringiz tomonidan ishlatiladigan umumiy sana formatlaridan (masalan, OY/KU/YIL va KU/OY/YIL) xabardor bo'ling.
• Manzil Maydonlari: Manzil tuzilmalari global miqyosda sezilarli darajada farq qiladi. Agar manzil maydoni `null` bo'lsa, "N/A" kabi standart qiymat berish o'rinli bo'lishi mumkin. Potentsial noto'g'ri mintaqaviy ma'lumotlar bilan oldindan to'ldirishdan saqlaning.
• Til Afzalliklari: Agar foydalanuvchining til afzalligi yetishmayotgan bo'lsa, Ingliz tili kabi keng tushuniladigan tilga standartlashtiring yoki brauzer lokalini aniqlashdan foydalaning (foydalanuvchi ruxsati bilan).

Maxsus Imkoniyatlar (Accessibility) Mulohazalari

• Aniq Muloqot: Agar standart qiymat ishlatilsa, bu haqda foydalanuvchiga aniq ko'rsating, ayniqsa forma maydonlarida. Kontekstni ta'minlash uchun yorliqlar va ARIA atributlaridan foydalaning.
• Klaviatura Navigatsiyasi: Foydalanuvchilar klaviatura yordamida standart qiymatlarni osongina kezishi va o'zgartirishi mumkinligiga ishonch hosil qiling.
• Ekran O'quvchi Dasturlariga Moslik: Standart qiymatlar to'g'ri e'lon qilinishini va ularni bekor qilish mumkinligini ta'minlash uchun dasturingizni ekran o'quvchi dasturlari bilan sinab ko'ring.

Xulosa

Nullish coalescing operatori (??) JavaScript tiliga qimmatli qo'shimcha bo'lib, o'zgaruvchi aynan null yoki undefined bo'lganda standart qiymatlarni belgilashning ixcham va ishonchli usulini taqdim etadi. Uning nozik jihatlarini tushunib, uni OR operatori (??) bilan taqqoslab, siz yanada mustahkam, kutiladigan va qo'llab-quvvatlash oson bo'lgan kod yozishingiz mumkin. Eng yaxshi amaliyotlarni inobatga olishni, xavfsiz xususiyatlarga kirish uchun uni ixtiyoriy zanjirlash bilan birlashtirishni va standart qiymatlaringizni global auditoriyaning turli ehtiyojlariga moslashtirishni unutmang. Ushbu operatorni o'zlashtirish, shubhasiz, sizning JavaScript dasturlash ko'nikmalaringizni oshiradi va butun dunyo bo'ylab foydalanuvchilar uchun yaxshiroq dasturiy ta'minot tajribasini yaratishga hissa qo'shadi.