Chapter 39 — Optional Chaining & Nullish Coalescing (Chuqur)

Chapter 3'da bu ikki operatorni yuzaki ko'rgan edik. Bu bobda ularni chuqur, amaliy misollar bilan, va ular yechadigan haqiqiy muammoni to'liq tushunish uchun o'rganamiz.

---

39.1 Muammo — Nested Object'larga xavfsiz murojaat

Simple Explanation

Ko'p qavatli (nested) object'lardan ma'lumot olishga urinish — agar oraliq qiymatlardan biri undefined/null bo'lsa, dasturni "yiqitib" qo'yishi mumkin.

Muammoli misol

script.js
JavaScriptNusxalash
01let user = {
02    name: "Ali",
03    address: {
04        city: "Toshkent"
05    }
06};
07 
08console.log(user.address.city);        // "Toshkent" — ishlaydi
09console.log(user.contact.phone);       // ❌ TypeError: Cannot read properties of undefined

Nima uchun bunday bo'ladi? userda contact propertysi umuman mavjud emas (undefined). undefined.phonega murojaat qilish — xatolikka olib keladi, chunki undefinedning hech qanday propertysi yo'q.

Eski (ES6'dan oldingi) yechim — ko'p qavatli tekshirish

script.js
JavaScriptNusxalash
01if (user && user.contact && user.contact.phone) {
02    console.log(user.contact.phone);
03}

Muammo: Bu — juda uzun, va agar zanjir uzunroq bo'lsa (masalan, 5-6 qavat), kod o'qish qiyin bo'lib qoladi.

39.2 Optional Chaining (?.) — Yechim

Simple Explanation

?. — agar chapdagi qiymat null yoki undefined bo'lsa, xatolik berish o'rniga, darhol undefined qaytaradi va zanjirni "xavfsiz to'xtatadi".

Example

script.js
JavaScriptNusxalash
01let user = {
02    name: "Ali",
03    address: {
04        city: "Toshkent"
05    }
06};
07 
08console.log(user.contact?.phone); // undefined (xatolik yo'q!)
09console.log(user.address?.city);  // "Toshkent"

Diagram — qanday ishlaydi

code.text
TEXTNusxalash
01user.contact?.phone
02       │
03       ▼
04user.contact — bu undefined
05       │
06       ▼ ?. buni ko'radi va DARHOL to'xtaydi
07undefined qaytariladi (xatolik EMAS)

Explanation

?. — har safar "keyingi qadamga o'tishdan oldin" chap tomon null/undefined emasligini tekshiradi. Agar shunday bo'lsa, butun ifoda darhol undefinedga aylanadi, qolgan zanjir "bajarilmaydi" (hisoblanmaydi).

39.3 ⚠️ Qiyin mavzu: Optional Chaining metodlar va array'lar bilan

Metodlar bilan

script.js
JavaScriptNusxalash
01let user = {
02    name: "Ali",
03    greet: function () {
04        return "Salom!";
05    }
06};
07 
08console.log(user.greet?.());     // "Salom!" — metod mavjud
09console.log(user.sayBye?.());    // undefined — metod mavjud emas, XATOLIK YO'Q

Explanation
user.sayBye?.() — agar sayBye mavjud bo'lmasa, uni chaqirishga hatto urinib ham ko'rmaydi, to'g'ridan-to'g'ri undefined qaytaradi. Bu — Chapter 6'da o'rgangan "mavjud bo'lmagan functionni chaqirish — xatolik beradi" qoidasidan xavfsiz qochish usuli.

Array'lar bilan

script.js
JavaScriptNusxalash
01let users = null;
02 
03console.log(users?.[0]); // undefined, xatolik yo'q

Jadval — Optional Chaining'ning 3 shakli

🔥 Important
?. — faqat chap tomonni tekshiradi. Agar userning o'zi null bo'lsa-yu, siz user.address.city deb yozsangiz (birinchi ?.siz), baribir xatolik chiqadi. Zanjirning har bir potentsial xavfli nuqtasida ?. qo'yish kerak: user?.address?.city.

39.4 Nullish Coalescing (??) — Default qiymat berish

Simple Explanation

?? — chap tomondagi qiymat faqat null yoki undefined bo'lsa, o'ng tomondagi "zaxira" qiymatni qaytaradi.

Example

script.js
JavaScriptNusxalash
01let username = null;
02let displayName = username ?? "Mehmon";
03 
04console.log(displayName); // "Mehmon"

39.5 ⚠️ Qiyin mavzu: ?? va || orasidagi farq

Simple Explanation

Bu — Chapter 3'da yuzaki tegib o'tilgan, lekin juda muhim farq: || (OR) — barcha falsy qiymatlarni (Chapter 4.4: 0, "", false, null, undefined, NaN) "yomon" deb hisoblaydi, ?? esa faqat null/undefinedni.

Muammoli misol — || bilan

script.js
JavaScriptNusxalash
01let count = 0;
02let quantity = count || 10;
03 
04console.log(quantity); // 10 — LEKIN bu noto'g'ri natija!

Nima uchun bu xato? Dasturchi countning haqiqiy qiymati 0 ekanligini saqlab qolmoqchi edi (0 — to'g'ri, mazmunli qiymat, "yo'qlik" emas). Lekin || — 0ni falsy deb hisoblab, uni "yo'q" deb qabul qildi va 10ni ishlatdi.

To'g'ri yechim — ?? bilan

script.js
JavaScriptNusxalash
01let count = 0;
02let quantity = count ?? 10;
03 
04console.log(quantity); // 0 — to'g'ri natija!

Explanation

?? — 0ni falsy emas, balki mavjud, mazmunli qiymat deb hisoblaydi. U faqat null/undefined bo'lgandagina "zaxira" qiymatni ishlatadi.

Jadval — Solishtirish

💡 Key Idea
Qoida: agar 0, "", false kabi qiymatlar haqiqiy va to'g'ri natija bo'lishi mumkin bo'lsa (masalan, hisoblagich, forma maydoni, checkbox holati), har doim ?? ishlating. ||ni faqat "har qanday falsy qiymat noto'g'ri" degan holatlarda ishlating.

39.6 Optional Chaining va Nullish Coalescing'ni birga ishlatish

Amaliy misol

script.js
JavaScriptNusxalash
01let config = {
02    settings: {
03        theme: null
04    }
05};
06 
07let theme = config.settings?.theme ?? "light";
08let fontSize = config.settings?.fontSize ?? 14;
09 
10console.log(theme);     // "light" (theme null edi)
11console.log(fontSize);  // 14 (fontSize umuman mavjud emas edi)

Explanation

?. — xavfsiz "sayohat qilish" uchun, ?? — agar oxirida natija null/undefined bo'lsa, mos default qiymat berish uchun. Bu ikkisi birgalikda — real loyihalarda konfiguratsiya, API javoblari bilan ishlashda juda ko'p ishlatiladi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
user object'ida address propertysi bo'lmasligi mumkin. ?. yordamida user.address?.streetga xavfsiz murojaat qiling.
Required Concepts:

• Optional Chaining
  Hint:
  console.log(user.address?.street);

🟡 Exercise 2 — Medium

Task:
Foydalanuvchi berilgan discount qiymati 0 bo'lishi mumkin (bu — "chegirma yo'q" degani, to'g'ri qiymat). ?? yordamida, agar discount null/undefined bo'lsagina, uni 5 (default chegirma) bilan almashtiring; 0 bo'lsa, 0 bo'lib qolsin.
Required Concepts:

• Nullish Coalescing vs ||
  Hint:
  let finalDiscount = discount ?? 5;

🔴 Exercise 3 — Hard

Task:
Murakkab, ko'p qavatli API javobini simulyatsiya qiling: response.data?.user?.profile?.avatar?.url ?? "default-avatar.png". Turli holatlar uchun (data yo'q, user yo'q, hammasi bor) sinab ko'ring va natijalarni solishtiring.
Required Concepts:

• Optional Chaining + Nullish Coalescing zanjiri
  Hint:
  Bir nechta turli object tuzilmalarini yarating va bir xil ifodani ularga qo'llang.

🔮 Predict the Output

script.js
JavaScriptNusxalash
01let settings = {
02    volume: 0,
03    brightness: null
04};
05 
06console.log(settings.volume || 50);
07console.log(settings.volume ?? 50);
08console.log(settings.brightness || 80);
09console.log(settings.brightness ?? 80);

🧠 Think first! Javobni ko'rishdan oldin kamida 30 soniya o'ylang.

<details> <summary>Answer</summary> 50 0 80 80

Why?
volume: 0 — || uni falsy deb hisoblab, 50ni beradi (noto'g'ri natija). ?? esa 0ni to'g'ri qiymat deb hisoblab, 0ni qoldiradi. brightness: null uchun — ikkalasi ham (|| va ??) nullni "yo'q" deb hisoblab, 80ni beradi (bu holatda ikkalasi bir xil natija beradi, chunki null — ham falsy, ham nullish).

</details>

🐛 Debugging Challenge

Quyidagi kodda muammo bor:

script.js
JavaScriptNusxalash
01function createUser(name, age) {
02    let finalAge = age || 18;
03    return { name, age: finalAge };
04}
05 
06let user = createUser("Ali", 0); // Yangi tug'ilgan chaqaloq, yosh = 0
07 
08console.log(user.age); // dasturchi 0 kutgan, lekin 18 chiqmoqda

Your Task:

• Nima uchun age 0 bo'lsa ham, natija 18 chiqishini tushuntiring.
• Kodni tuzating.

<details> <summary>Solution</summary> Muammo: age || 18 — age qiymati 0 bo'lganda, || operatori 0ni falsy deb hisoblab, uni 18 bilan almashtiradi, garchi 0 — bu holatda to'g'ri, mazmunli qiymat bo'lsa ham.

Yechim:

script.js
JavaScriptNusxalash
01function createUser(name, age) {
02    let finalAge = age ?? 18;
03    return { name, age: finalAge };
04}
05 
06let user = createUser("Ali", 0);
07 
08console.log(user.age); // 0 — to'g'ri

</details>

📌 Chapter Summary

• Optional Chaining (?.) — nested object'larga xatolik xavfisiz murojaat qilish imkonini beradi.
• ?. — object property, dinamik property, va metod chaqiruvlari uchun ishlatilishi mumkin.
• Nullish Coalescing (??) — faqat null/undefined uchun default qiymat beradi.
• ?? va || orasidagi asosiy farq — 0, "", false kabi "to'g'ri, lekin falsy" qiymatlarga munosabat.
• Ikkalasini birga ishlatish — real loyihalarda konfiguratsiya va API javoblari bilan ishlashda keng tarqalgan.

🎯 Key Takeaways

• ?. — zanjirning istalgan nuqtasida null/undefined uchrasa, xavfsiz "to'xtaydi".
• Default qiymat berish uchun, agar 0/""/false to'g'ri qiymat bo'lishi mumkin bo'lsa, || emas ?? ishlating.
• ?.() — metod mavjudligini oldindan tekshirmasdan, xavfsiz chaqirish imkonini beradi.
• Bu ikki operator — API javoblari, konfiguratsiya object'lari bilan ishlashda "himoyachi kod"ni sezilarli qisqartiradi.
• ?. faqat chap tomonni tekshiradi — zanjirning har bir xavfli bo'g'inida alohida qo'yilishi kerak.

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01obj?.prop;              // xavfsiz property
02obj?.[dynamicKey];       // xavfsiz dinamik property
03obj?.method?.();         // xavfsiz metod chaqiruvi
04 
05value ?? "default";      // faqat null/undefined uchun default
06value || "default";      // barcha falsy qiymatlar uchun default (ehtiyot bo'ling!)

---