Optional Chaining va Nullish Coalescing

~10 daq · JavaScript · Ob'ektlar va Massivlar

Muammodan boshlaylik

Server dan foydalanuvchi ma'lumoti keldi. Lekin ba'zi foydalanuvchilarda manzil to'ldirilmagan.

const foydalanuvchi = {
  ism: "Jasur",
  manzil: {
    shahar: "Toshkent",
    tuman: {
      nomi: "Yunusobod"
    }
  }
};

Tumanini olish:

console.log(foydalanuvchi.manzil.tuman.nomi); // "Yunusobod"

Boshqa foydalanuvchida manzil yo'q:

const foydalanuvchi2 = { ism: "Malika" };

console.log(foydalanuvchi2.manzil.tuman.nomi);
// ❌ TypeError: Cannot read properties of undefined (reading 'tuman')

manzil yo'q, manzil.tuman ga murojaat — xato. Eski yechim:

const tuman = foydalanuvchi2.manzil
  && foydalanuvchi2.manzil.tuman
  && foydalanuvchi2.manzil.tuman.nomi;

Bu uzoq va o'qish qiyin. Optional chaining bu muammoni hal qiladi.

Optional Chaining ?.

?. — "oldingi qiymat null yoki undefined bo'lsa, davom etma, undefined qaytar".

const foydalanuvchi2 = { ism: "Malika" };

console.log(foydalanuvchi2?.manzil?.tuman?.nomi); // undefined — xato yo'q ✅
console.log(foydalanuvchi?.manzil?.tuman?.nomi);  // "Yunusobod" ✅

Zanjir o'rtasida null/undefined topilsa — u yerda to'xtaydi, xato bermaydi.

foydalanuvchi2?.manzil  → undefined (manzil yo'q)
                ?.tuman → undefined ga murojaat — to'xtadi
                ?.nomi  → bajarilmadi
Natija: undefined

Metod chaqirishda:

const foydalanuvchi = {
  salomlash() { return "Salom!"; }
};

console.log(foydalanuvchi.salomlash?.());  // "Salom!"
console.log(foydalanuvchi.xayrlash?.());   // undefined — metod yo'q, xato yo'q

Massiv elementida:

const arr = null;
console.log(arr?.[0]); // undefined — xato yo'q

Nullish Coalescing ??

?? — chap tomon null yoki undefined bo'lsa, o'ng tomoni qaytaradi. Aks holda chap tomon.

const ism = null;
console.log(ism ?? "Noma'lum"); // "Noma'lum"

const yosh = 0;
console.log(yosh ?? 18); // 0 ← yosh aniq 0, "yo'q" emas

?? va || farqi — eng muhim

|| — chap tomon falsy bo'lsa (0, "", false, null, undefined) o'ng tomoni qaytaradi.

?? — chap tomon faqat null yoki undefined bo'lsa o'ng tomoni qaytaradi.

const ball = 0; // ← haqiqiy qiymat, lekin falsy

console.log(ball || 100); // 100 ❌ — 0 ni "yo'q" deb hisoblab, 100 berdi
console.log(ball ?? 100); // 0  ✅ — 0 haqiqiy qiymat, saqlanib qoldi

const ism = "";

console.log(ism || "Mehmon"); // "Mehmon" — bo'sh matn falsy
console.log(ism ?? "Mehmon"); // ""       — bo'sh matn null/undefined emas

Qoida: standart qiymat kerak bo'lsa — ??. Agar 0, "", false ham "yo'q" hisoblansa — ||.

Ikkalasini birga ishlatish

const konfiguratsiya = {
  server: {
    port: 0,      // ← aniq 0, standart emas
    host: null,   // ← belgilanmagan
  }
};

const port = konfiguratsiya?.server?.port ?? 3000;
const host = konfiguratsiya?.server?.host ?? "localhost";

console.log(port); // 0         ← ?? 0 ni saqlab qoldi
console.log(host); // "localhost" ← null uchun standart qiymat

Tez-tez uchraydigan xatolar

?. ni keraksiz joyda ishlatish:

// ❌ — foydalanuvchi har doim bor, manzil har doim bor, faqat tuman yo'q bo'lishi mumkin
foydalanuvchi?.manzil?.tuman?.nomi

// ✅ — faqat shubhali joy uchun
foydalanuvchi.manzil.tuman?.nomi

?. ni haddan ko'p ishlatish kodni o'qishni qiyinlashtiradi va haqiqiy xatolarni yashirishi mumkin.

?? o'rniga || — 0 va bo'sh matn yo'qolishi:

// Foydalanuvchi o'z ballini kiritdi: 0
const kiritilgan = 0;

// ❌ — 0 ni "kiritilmagan" deb hisoblab, standart qiymat berdi
const ball = kiritilgan || 50; // 50

// ✅
const ball = kiritilgan ?? 50; // 0

Xulosa

?. — zanjir o'rtasida null/undefined bo'lsa xato bermaydi, undefined qaytaradi.

?? — faqat null/undefined uchun standart qiymat beradi. 0, "", false ga tegmaydi.

|| — falsy qiymatlar (0, "", false) ham standart qiymatga o'tkaziladi. Faqat shu kerak bo'lganda ishlatiladi.

// Odatiy pattern
const qiymat = ob'ekt?.ichki?.xususiyat ?? "standart";

Keyingi dars

26-dars: String metodlari — split, join, trim, replace, includes, startsWith, endsWith, padStart, padEnd