IlmHamroh
JavaScript Full-stack/8-qism. JavaScript asoslari16/61-dars19 daqiqa
Mundarija (33)

JavaScript ternary operatori: vergul, void va operatorlar ustuvorligi

Qisqacha: Ternary operatori shart ? a : b — shart rost bo'lsa a ni, aks holda b ni qaytaradi. Masalan, yosh < 7 ? 0 : 2000 bola uchun 0, kattalar uchun 2000 beradi. Bitta ifodada bir nechta operator bo'lsa, ular ustuvorlik jadvali bo'yicha bajariladi. Shubha bo'lsa — qavs qo'ying.

Bu darsda

  • Ternary operatori bilan ikki qiymatdan birini tanlay olasiz.
  • Ichma-ich ternary nega xavfli ekanini va o'rniga nima yozishni bilasiz.
  • Vergul va void operatorlarini begona kodda taniy olasiz.
  • Ifodada qaysi operator avval bajarilishini jadvaldan aniqlay olasiz.
  • Qavs yordamida kodni har kim bir xil tushunadigan qilib yoza olasiz.

Oldin bilishingiz kerak: Arifmetik va tayinlash operatorlari, Mantiqiy operatorlar va qisqa tutashuv, ??, ?. va mantiqiy tayinlash.

1. Nega bu kerak?

Oldingi darsda ?? bilan zaxira qiymat berishni o'rgandik. Endi boshqa vaziyat.

Siz avtobus chiptasi uchun dastur yozyapsiz. Qoida shunday: 7 yoshgacha bolalar bepul, qolganlar 2 000 so'm to'laydi. Dastur yoshga qarab ikki narxdan birini tanlashi kerak.

Hozircha bizda "shunday bo'lsa — bu, bo'lmasa — u" deydigan vosita yo'q. Bu darsda birinchi shunday vositani o'rganamiz: ternary operatori.

Ikkinchi muammo ham bor. Maktabda 2 + 3 * 4 ni hisoblaganda avval ko'paytirasiz, keyin qo'shasiz. JavaScript'da operatorlar o'nlab. Ular aralashsa, qaysi biri avval bajariladi? Buni bilmasangiz, kod siz o'ylagandan boshqacha ishlaydi. Va xato bermaydi — shunchaki noto'g'ri natija chiqaradi.

2. Ternary operatori: ikki qiymatdan birini tanlash

2.1 Birinchi misol

js
const yosh = 5;
const narx = yosh < 7 ? 0 : 2000;

console.log(narx); // 0

Keling, yosh < 7 ? 0 : 2000 ni qismlarga ajratamiz:

  • yosh < 7 — shart. U true yoki false beradi.
  • ? — "shart rostmi?" degan savol belgisi.
  • 0 — shart rost (true) bo'lsa qaytadigan qiymat.
  • : — "aks holda".
  • 2000 — shart yolg'on (false) bo'lsa qaytadigan qiymat.

Ternary operatori (ternary operator) — shartga qarab ikki qiymatdan birini qaytaradigan operator. "Ternary" — "uchlik" degani: u uchta qismdan iborat. Uni ba'zan shartli operator deb ham atashadi.

Hayotdan o'xshatish: kassir sizdan "Talabamisiz?" deb so'raydi. "Ha" desangiz — chegirmali narx, "yo'q" desangiz — oddiy narx. Savol bitta, javob ikki xil bo'lishi mumkin.

Endi yoshni o'zgartirib ko'ramiz:

js
const yosh = 25;
const narx = yosh < 7 ? 0 : 2000;

console.log(narx); // 2000

25 < 7 — false. Shuning uchun : dan keyingi qiymat tanlandi.

Umumiy shakli:

js
shart ? rost_bolsa_qiymat : yolgon_bolsa_qiymat

Maslahat: O'qishda yordam beradigan usul: ? ni "agar rost bo'lsa", : ni "aks holda" deb o'qing. yosh < 7 ? 0 : 2000 — "yosh 7 dan kichik bo'lsa 0, aks holda 2000".

2.2 Ternary — bu ifoda

Sintaksis darsida ifoda (expression) nima ekanini ko'rgan edik: natija beradigan kod bo'lagi. Ternary ham ifoda. Demak uni qiymat kerak bo'lgan har qanday joyga qo'ysa bo'ladi.

O'zgaruvchiga tayinlash — buni ko'rdik. console.log ichida ham ishlaydi:

js
const ball = 72;

console.log(ball >= 56 ? "O'tdi" : "Yiqildi"); // O'tdi

Boshqa ifodaning bir qismi ham bo'la oladi:

js
const soni = 3;
const yetkazish = true;

const jami = soni * 12000 + (yetkazish ? 10000 : 0);
console.log(jami); // 46000

Bu yerda 3 ta lag'mon (har biri 12 000 so'm) va yetkazib berish narxi hisoblandi. Yetkazish kerak bo'lmasa, qavs ichidagi qism 0 beradi. Qavs nega kerakligini 5-bo'limda ko'ramiz.

2.3 Shart o'rnida istalgan qiymat

? dan oldin true yoki false bo'lishi shart emas. JavaScript u yerdagi qiymatni truthy yoki falsy deb baholaydi:

js
const ism = "";
const salom = ism ? ism : "Mehmon";

console.log(salom); // Mehmon

Bo'sh satr "" — falsy. Shuning uchun "Mehmon" tanlandi.

Bu sizga tanish tuyulyaptimi? To'g'ri, || operatori ham xuddi shu ishni qisqaroq qiladi:

js
const ism = "";

console.log(ism || "Mehmon"); // Mehmon

Qoida: "qiymat bo'lsa o'zi, bo'lmasa zaxira" kerak bo'lsa — || yoki ?? qulayroq. Ternary esa ikki boshqa-boshqa qiymat kerak bo'lganda yaxshi: 0 yoki 2000, "O'tdi" yoki "Yiqildi".

2.4 Faqat bitta tomon bajariladi

Ternary ikki tomonni ham hisoblamaydi. Shart qaysi tomonni tanlasa, faqat o'sha bajariladi:

js
const onlayn = true;

onlayn ? console.log("Xabar yuborildi") : console.log("Kutilmoqda");

Konsolda:

text
Xabar yuborildi

Ikkinchi console.log umuman ishlamadi. Bu qisqa tutashuvga o'xshaydi: keraksiz qism bajarilmaydi.

Diqqat: Yuqoridagi kod ishlaydi, lekin bu yaxshi uslub emas. Ternary qiymat tanlash uchun yaratilgan. "Shunday bo'lsa — buni bajar, bo'lmasa — buni bajar" degan harakatlar uchun if / else bor. Uni if / else darsida o'rganamiz. Hozircha qoida: ternary natijasi biror joyga (o'zgaruvchiga, console.log ga) tushsin.

Tekshirib ko'ring: const x = 0 ? "bor" : "yo'q"; — x nimaga teng?

Javob

"yo'q". 0 — falsy qiymat, shart yolg'on deb baholanadi. Shuning uchun : dan keyingi qiymat tanlanadi.

Tekshirib ko'ring: const balans = 50000; va const narx = 65000; bo'lsa, balans >= narx ? "To'lash mumkin" : "Mablag' yetarli emas" nima qaytaradi?

Javob

"Mablag' yetarli emas". 50000 >= 65000 — false, shuning uchun ikkinchi qiymat tanlanadi.

2.5 Uch va undan ko'p variant: ternary zanjiri

Universitetda baho ball bo'yicha qo'yiladi: 86 va undan yuqori — "a'lo", 71 dan — "yaxshi", 56 dan — "qoniqarli", qolgani — "qoniqarsiz". Bu yerda to'rtta variant bor.

Ternary'ning : dan keyingi qismiga yana bir ternary qo'yish mumkin. Bu ternary zanjiri deyiladi:

js
const ball = 78;

const baho =
  ball >= 86 ? "a'lo"
  : ball >= 71 ? "yaxshi"
  : ball >= 56 ? "qoniqarli"
  : "qoniqarsiz";

console.log(baho); // yaxshi

JavaScript uni yuqoridan pastga tekshiradi. 78 >= 86 — yo'q, keyingi qatorga o'tadi. 78 >= 71 — ha, "yaxshi" tanlanadi. Qolgan qatorlar tekshirilmaydi.

Bu kod o'qiladi, chunki har variant alohida qatorda va hammasi bir yo'nalishda — faqat : tomonga ketadi.

2.6 Ichma-ich ternary — xavfli

Endi xuddi shu mantiqni boshqacha yozilgan holda ko'ring:

js
const ball = 78;
const baho = ball >= 71 ? ball >= 86 ? "a'lo" : "yaxshi"
  : ball >= 56 ? "qoniqarli" : "qoniqarsiz";

console.log(baho); // yaxshi

Natija to'g'ri. Lekin qaysi : qaysi ? ga tegishli ekanini tushunish uchun bir necha marta o'qishga to'g'ri keldi, to'g'rimi? Bu yerda ternary ? dan keyingi qismga — o'rtaga — joylashgan. Bu ichma-ich ternary (nested ternary).

Bunday kodda xato qilish oson, topish esa qiyin. Shuning uchun ko'p jamoalar ichma-ich ternary'ni umuman taqiqlaydi. ESLint degan kod tekshiruvchi vositada buning uchun alohida qoida bor: no-nested-ternary. ESLint'ni kursda keyinroq o'rganamiz, hozir bilish shart emas.

Qoidani eslab qoling:

Variantlar soni Nima ishlating
2 ta Ternary: shart ? a : b
3–4 ta, bitta o'zgaruvchi bo'yicha Ternary zanjiri, har variant alohida qatorda
Undan ko'p yoki murakkab shart if / else yoki switch
? dan keyin yana ternary Hech qachon — qayta yozing

Bo'sh joyni to'ldiring. Taksi tarifi: yo'lovchi "komfort" tanlasa narx 15000, aks holda 10000.

const narx = tarif === "komfort" ? : ;

3. Vergul operatori

3.1 Vergul nima qiladi?

Vergulni siz ko'p ishlatgansiz: console.log("Ali", 25). Lekin JavaScript'da vergul operator ham bo'la oladi. Bu kamdan-kam uchraydi, lekin begona kodda ko'rsangiz, tanishingiz kerak.

Vergul operatori (comma operator) — chapdan o'ngga barcha ifodalarni bajaradi va oxirgisining qiymatini qaytaradi.

js
const natija = (1, 2, 3);

console.log(natija); // 3

1 va 2 hisoblandi, lekin tashlab yuborildi. Faqat oxirgi 3 qaytdi.

Ifodalar haqiqatan bajarilishini ko'ramiz:

js
const x = (console.log("Birinchi"), console.log("Ikkinchi"), 10);

console.log(x);

Konsolda:

text
Birinchi
Ikkinchi
10

Ikkala console.log ishladi, lekin x ga faqat oxirgi qiymat — 10 tushdi.

3.2 Har vergul ham operator emas

Mana eng muhim joyi. Ko'pchilik vergullar ajratuvchi vazifasida keladi:

Qayerda Misol Vazifasi
Funksiyaga qiymat berishda console.log(a, b) Ajratuvchi
Bir nechta o'zgaruvchi e'lonida let a = 1, b = 2; Ajratuvchi
Qavs ichidagi ifodada (a, b) Vergul operatori

Farqni o'z ko'zingiz bilan ko'ring:

js
console.log(1, 2);
console.log((1, 2));

Konsolda:

text
1 2
2

Birinchi qatorda console.log ga ikkita qiymat berildi. Ikkinchisida qo'shimcha qavs bor — ichida vergul operatori ishladi va faqat 2 berildi.

3.3 Qayerda uchraydi?

  • for siklida — ikkita hisoblagichni birga o'zgartirish uchun: i++, j--. for siklini alohida darsda o'rganamiz.
  • Siqilgan (minified) kodda — saytlarga yuklanadigan kod hajmini kamaytirish uchun vositalar ko'p qatorni vergul bilan bitta qatorga "siqadi".

O'zingiz yozadigan kodda vergul operatori deyarli kerak bo'lmaydi. Uni tanib olish yetarli.

Tekshirib ko'ring: const y = (5 + 5, 2 * 3); — y nimaga teng?

Javob

6. Vergul operatori ikkala ifodani hisoblaydi (10 va 6), lekin faqat oxirgisini qaytaradi.

4. void operatori

void operatori — o'ng tomonidagi ifodani bajaradi va natijasidan qat'i nazar, doim undefined qaytaradi. Xuddi qog'ozga yozib, darhol yirtib tashlagandek: yozish jarayoni bo'ldi, lekin qo'lingizda hech narsa qolmadi.

js
console.log(void 0);
console.log(void "salom");
console.log(void (2 + 3));

Konsolda:

text
undefined
undefined
undefined

void — funksiya emas, operator, xuddi typeof kabi. Shuning uchun void 0 deb qavssiz yoziladi. void(0) dagi qavs esa shunchaki guruhlash.

Qayerda uchraydi?

  • void 0 — eski va siqilgan kodda undefined o'rniga. U qisqaroq va juda eski brauzerlarda xavfsizroq edi. Siz esa to'g'ridan-to'g'ri undefined yozing.
  • <a href="javascript:void(0)"> — eski HTML'da "hech qayerga olib bormaydigan havola" yasash uchun. Bu yomon amaliyot. Bosiladigan, lekin boshqa sahifaga olib bormaydigan element kerak bo'lsa — <button> ishlating (Tugma yoki havola darsida buni ko'rgansiz).
  • Zamonaviy kodda — ba'zan "bu natija menga ataylab kerak emas" deb belgilash uchun. Buni asinxron JavaScript qismida ko'rasiz.

Tekshirib ko'ring: typeof void 100 nima qaytaradi?

Javob

"undefined". Avval void 100 bajariladi va undefined beradi. Keyin typeof undefined — "undefined" satri.

5. Operatorlar ustuvorligi (precedence)

5.1 Maktabdagi qoida JavaScript'da ham bor

js
console.log(2 + 3 * 4); // 14
console.log((2 + 3) * 4); // 20

Birinchi qatorda avval 3 * 4 = 12, keyin 2 + 12 = 14. Ko'paytirish qo'shishdan "kuchliroq".

Operatorlar ustuvorligi (operator precedence) — bitta ifodada bir nechta operator bo'lsa, qaysi biri avval bajarilishini belgilaydigan qoida. Ustuvorligi yuqori operator o'z qo'shnilarini birinchi bo'lib "ushlab oladi".

Hayotdan o'xshatish: shifoxonadagi navbat. Hamma navbatda turadi, lekin tez yordam mashinasida kelgan bemor birinchi qabul qilinadi. Operatorlarda ham shunday "imtiyozli navbat" bor.

Qavs ( ) — eng yuqori ustuvorlik. Qavs ichidagi narsa har doim birinchi hisoblanadi.

5.2 Ustuvorlik jadvali

Quyida siz bilgan operatorlar yuqoridan pastga — eng kuchlidan eng kuchsizga qarab. Bir qatordagilar teng kuchli.

# Operatorlar Nima Yo'nalish
1 ( ) Guruhlash (qavs) —
2 . ?. [ ] f() Xususiyat, chaqiruv chapdan
3 x++ x-- Postfiks —
4 ! +x -x ++x typeof void Unar o'ngdan
5 ** Daraja o'ngdan
6 * / % Ko'paytirish chapdan
7 + - Qo'shish chapdan
8 < <= > >= Taqqoslash chapdan
9 === !== == != Tenglik chapdan
10 && Mantiqiy VA chapdan
11 || ?? YOKI, zaxira chapdan
12 ? : Ternary o'ngdan
13 = += ??= va boshqalar Tayinlash o'ngdan
14 , Vergul chapdan

To'liq jadval MDN'da bor — u yerda 20 ga yaqin daraja. Lekin kundalik ish uchun shu 14 tasi yetarli. Bitwise darsida o'rganadigan bitli operatorlar ham shu jadvalda o'z o'rniga ega.

Tartibni eslab qolish uchun oddiy zanjir: hisob → taqqoslash → mantiq → tanlash → tayinlash. Ya'ni avval sonlar hisoblanadi, keyin solishtiriladi, keyin && / || bilan birlashtiriladi, keyin ternary tanlaydi va oxirida natija o'zgaruvchiga yoziladi.

Shu zanjirni bitta misolda ko'ramiz:

js
const narx = 30000;
const soni = 2;

const chegirma = narx * soni > 50000 && soni >= 2 ? 10 : 0;
console.log(chegirma); // 10

JavaScript uni qavslar bilan shunday o'qiydi: ((narx * soni) > 50000) && (soni >= 2). Avval ko'paytirish (60000), keyin taqqoslash (true va true), keyin && (true), keyin ternary (10) va eng oxirida tayinlash.

5.3 Assotsiativlik: teng kuchli operatorlar

Bir xil kuchli operatorlar yonma-yon kelsa-chi? Masalan, 10 - 5 - 2.

Assotsiativlik (associativity) — teng kuchli operatorlar qaysi tomondan boshlab bajarilishi. Jadvaldagi "Yo'nalish" ustuni aynan shu.

Ko'pchilik operatorlar chapdan o'ngga ishlaydi, xuddi kitob o'qigandek:

js
console.log(10 - 5 - 2); // 3

Bu (10 - 5) - 2 = 3. Agar o'ngdan boshlaganda 10 - (5 - 2) = 7 chiqardi.

Daraja ** esa o'ngdan chapga ishlaydi. Matematikada ham shunday:

js
console.log(2 ** 3 ** 2); // 512

Bu 2 ** (3 ** 2) = 2 ** 9 = 512. Chapdan boshlaganda (2 ** 3) ** 2 = 64 chiqardi.

Tayinlash ham o'ngdan ishlaydi. Shuning uchun bir nechta o'zgaruvchiga bir qiymatni zanjir qilib berish mumkin:

js
let a;
let b;
a = b = 5;

console.log(a, b); // 5 5

Avval b = 5 bajariladi. Tayinlash ham ifoda — u 5 qaytaradi. Keyin a = 5.

5.4 Ustuvorlik tuzoqlari

Endi ustuvorlikni bilmaslik qayerda "tishlashini" ko'ramiz.

typeof qo'shishdan kuchli:

js
console.log(typeof 5 + 5); // number5

typeof 5 + 5 — bu (typeof 5) + 5. Avval typeof 5 bajariladi va "number" satrini beradi. Keyin "number" + 5 — satrga son qo'shildi, "number5" chiqdi. Yig'indining turini bilmoqchi bo'lsangiz — qavs: typeof (5 + 5).

! taqqoslashdan kuchli:

js
const ball = 40;

console.log(!ball > 50); // false
console.log(!(ball > 50)); // true

Birinchi qatorda avval !ball bajariladi: 40 truthy, demak !40 — false. Keyin false > 50 — bu 0 > 50, ya'ni false. Biz esa "ball 50 dan katta emasmi?" demoqchi edik — bunga ikkinchi qator javob beradi. Bu tuzoqni mantiqiy operatorlar darsida ham ko'rgan edik.

Taqqoslashlar zanjiri: 3 > 2 > 1 — false. Taqqoslash darsida ko'rganimizdek, JavaScript uni chapdan o'qiydi: (3 > 2) > 1 → true > 1 → 1 > 1 → false. Jadvaldagi "chapdan" yo'nalishi aynan shu. Oraliqni && bilan yozing: ball >= 0 && ball <= 100.

5.5 Oltin qoida: shubha bo'lsa — qavs qo'ying

Jadvalni yod olish shart emas. Tajribali dasturchilar ham uni to'liq eslamaydi. Ular boshqa yo'l tutadi: ikkilanishsa, qavs qo'yadi.

js
const narx = 30000;
const soni = 2;

// Ishlaydi, lekin o'quvchi o'ylanib qoladi:
const a = narx * soni > 50000 && soni >= 2 ? 10 : 0;

// Aynan shu narsa, lekin darhol tushuniladi:
const b = ((narx * soni) > 50000 && soni >= 2) ? 10 : 0;

console.log(a, b); // 10 10

Qavs natijani o'zgartirmadi, lekin kodni o'qish osonlashdi. Qavs dastur tezligiga ham ta'sir qilmaydi.

Ba'zi joylarda esa JavaScript'ning o'zi qavsni majburiy qiladi. Ularni 6-bo'limda ko'ramiz.

Tekshirib ko'ring: console.log(2 + 2 * 2 ** 2); nima chiqaradi?

Javob

10. Eng kuchli — **: 2 ** 2 = 4. Keyin *: 2 * 4 = 8. Oxirida +: 2 + 8 = 10.

Tekshirib ko'ring: true || false && false — natija nima va nega?

Javob

true. && kuchliroq, shuning uchun ifoda true || (false && false) deb o'qiladi. Qavs ichi false beradi, lekin true || false — baribir true. Aslida || chapda true ni ko'rib, o'ng tomonni umuman hisoblamaydi.

6. Ko'p uchraydigan xatolar

6.1 Ternary'da : ni unutish

js
const yosh = 20;
const holat = yosh >= 18 ? "katta";
text
SyntaxError: Unexpected token ';'

Tarjimasi: "Kutilmagan belgi: ;". JavaScript ? ni ko'rgach, albatta : va ikkinchi qiymat kelishini kutadi. Uning o'rniga nuqtali vergul keldi. Xato ko'rsatilgan belgi aybdor emas — undan oldin nimadir yetishmayapti. Ternary'da har doim ikkala qiymat bo'lishi shart.

6.2 Ternary va + ni qavssiz aralashtirish

Bu eng ayyor xato, chunki JavaScript hech qanday xabar bermaydi:

js
const chegirma = 0;

console.log("Chegirma: " + chegirma ? "bor" : "yo'q"); // bor

Chegirma 0, lekin "bor" chiqdi. Nega? + ternary'dan ancha kuchli. Shuning uchun JavaScript avval "Chegirma: " + chegirma ni hisoblaydi — "Chegirma: 0" satri chiqadi. Bu bo'sh bo'lmagan satr, demak truthy. Ternary uni shart sifatida oladi va "bor" ni tanlaydi. "Chegirma: " matni esa umuman yo'qolib qoldi.

To'g'risi — ternary'ni qavsga olish:

js
const chegirma = 0;

console.log("Chegirma: " + (chegirma ? "bor" : "yo'q"));
// Chegirma: yo'q

Qoida: ternary boshqa ifodaning ichida bo'lsa — har doim qavsga oling.

6.3 ?? ni || yoki && bilan qavssiz aralashtirish

js
const kiritilgan = null;
const qiymat = kiritilgan ?? 0 || 5;
text
SyntaxError: Unexpected token '||'

Bu xatoni ?? darsida ko'rgan edik: ?? ni || yoki && bilan qavssiz aralashtirish taqiqlangan, chunki kim qaysi tartibni nazarda tutganini bilib bo'lmaydi. Qaysi tartib kerakligini qavs bilan ko'rsating: (kiritilgan ?? 0) || 5.

6.4 Manfiy sonni darajaga ko'tarish

-2 ** 2 ham qavssiz yozib bo'lmaydigan joy — SyntaxError beradi. Buni arifmetik operatorlar darsida ko'rgan edik. Yechim — niyatni qavs bilan aniq yozish: (-2) ** 2 (natija 4) yoki -(2 ** 2) (natija -4).

6.5 Ternary'ni if o'rnida ishlatish

Bu xato bermaydi, lekin kod sifatini buzadi. shart ? console.log(...) : console.log(...) kabi yozuvlarni tajribali dasturchilar kod ko'rigida qaytaradi. Ternary — qiymat tanlash uchun. Harakat bajarish uchun if / else ishlatiladi — uni yaqin darslarda o'rganamiz.

7. Mashqlar

1-mashq (oson): Tungi tarif

Taksi soat 22:00 dan keyin 12 000 so'm, kunduzi 8 000 so'm oladi. soat o'zgaruvchisi (0–23) bo'yicha narx ni ternary bilan hisoblang. soat = 23 va soat = 10 uchun sinab ko'ring.

Ishora: shart — soat >= 22. Ikkala holatni tekshirish uchun ikkita alohida fayl yoki soat qiymatini o'zgartirib ishga tushiring.

Yechim
js
const soat = 23;
const narx = soat >= 22 ? 12000 : 8000;

console.log("Narx:", narx); // Narx: 12000

soat = 10 bo'lsa, 10 >= 22 — false, va Narx: 8000 chiqadi.

2-mashq (o'rta): Qavssiz ifodani o'qing

Har bir qator nima chiqarishini avval daftarga yozing, keyin ishga tushirib tekshiring. So'ng har biriga JavaScript qo'yadigan qavslarni yozing.

js
console.log(10 - 4 - 3);
console.log(2 + 3 * 2 ** 2);
console.log(typeof 10 + 5);
console.log(20 > 10 > 5);
console.log(false || true && false);
Yechim
js
console.log(10 - 4 - 3); // 3
console.log(2 + 3 * 2 ** 2); // 14
console.log(typeof 10 + 5); // number5
console.log(20 > 10 > 5); // false
console.log(false || true && false); // false

JavaScript qo'yadigan qavslar:

  • (10 - 4) - 3 — ayirish chapdan o'ngga.
  • 2 + (3 * (2 ** 2)) — avval daraja, keyin ko'paytirish, oxirida qo'shish.
  • (typeof 10) + 5 — "number" + 5 → "number5".
  • (20 > 10) > 5 — true > 5 → 1 > 5 → false.
  • false || (true && false) — && kuchliroq: false || false → false.

3-mashq (qiyin): Xatoni toping

Ali talabalar natijasini chiqaradigan kod yozdi. Ball 70, demak talaba o'tishi kerak. Lekin konsolda boshqa narsa chiqdi:

js
const ball = 70;

console.log("Holat: " + ball >= 56 ? "o'tdi" : "yiqildi");
// yiqildi

Nega "yiqildi" chiqdi va nega "Holat:" so'zi yo'qoldi? Kodni tuzating. Ishora: ustuvorlik jadvalida +, >= va ? : qaysi qatorda turganiga qarang.

Bonus: 4 xil baho ("a'lo", "yaxshi", "qoniqarli", "qoniqarsiz") chiqaradigan ternary zanjirini qo'shing (chegaralar: 86, 71, 56).

Yechim

JavaScript ifodani shunday o'qiydi: (("Holat: " + ball) >= 56) ? "o'tdi" : "yiqildi".

  1. + eng kuchli: "Holat: " + 70 → "Holat: 70" satri.
  2. Keyin >=: "Holat: 70" >= 56. Satr songa aylantirilmoqchi bo'ladi, lekin "Holat: 70" son emas — NaN chiqadi. NaN bilan har qanday taqqoslash false.
  3. Ternary false ni oladi va "yiqildi" ni tanlaydi.

Tuzatilgani — ternary qavs ichida:

js
const ball = 70;

console.log("Holat: " + (ball >= 56 ? "o'tdi" : "yiqildi"));
// Holat: o'tdi

Bonus bilan:

js
const ball = 70;

const baho =
  ball >= 86 ? "a'lo"
  : ball >= 71 ? "yaxshi"
  : ball >= 56 ? "qoniqarli"
  : "qoniqarsiz";

console.log("Holat:", ball >= 56 ? "o'tdi" : "yiqildi");
console.log("Baho:", baho);

Konsolda:

text
Holat: o'tdi
Baho: qoniqarli

console.log ga vergul bilan ikki qiymat berganimiz uchun + va qavsga umuman ehtiyoj qolmadi. Bu ham ustuvorlik muammosidan qochishning bir yo'li.

4-mashq (qiyin): Vergul va void

Quyidagi kod nima chiqaradi? Avval o'ylang, keyin ishga tushiring.

js
const a = (console.log("Salom"), 7);
const b = void a;

console.log(a, b);
Yechim
js
const a = (console.log("Salom"), 7);
const b = void a;

console.log(a, b);

Konsolda:

text
Salom
7 undefined

Vergul operatori avval console.log("Salom") ni bajaradi, keyin 7 ni qaytaradi — a = 7. void a esa a ni o'qiydi, lekin doim undefined qaytaradi.

8. Real ishda

  • React'da (sayt interfeysini yasash uchun eng mashhur kutubxona, kursda alohida qism bor) ternary har kuni ishlatiladi: "foydalanuvchi kirgan bo'lsa — profil, aks holda — kirish tugmasi". Bu joyda if ishlamaydi. Ternary esa ifoda bo'lgani uchun ishlaydi.
  • Kod ko'rigida (code review) ichma-ich ternary va + bilan qavssiz aralashgan ternary eng ko'p qaytariladigan kodlardan. ESLint'ning no-nested-ternary va no-mixed-operators qoidalari aynan shular uchun.
  • Siqilgan kodda void 0 va vergul operatori juda ko'p. Brauzerda sayt kodini ochsangiz, shularni ko'rasiz.
  • Intervyuda 3 > 2 > 1 yoki typeof 5 + 5 kabi savollar tez-tez beriladi. Javobni jadval orqali tushuntirib bera olsangiz — kuchli taassurot qoldirasiz.

Xulosa

  • shart ? a : b — shart truthy bo'lsa a, falsy bo'lsa b qaytadi. Faqat tanlangan tomon bajariladi.
  • Ternary — ifoda: uni o'zgaruvchiga, console.log ga, boshqa ifodaga qo'yish mumkin.
  • Uch-to'rt variant uchun ternary zanjiri, har biri alohida qatorda. Ichma-ich ternary — yo'q.
  • Vergul operatori barcha ifodalarni bajarib, oxirgisini qaytaradi. void esa doim undefined beradi.
  • Ustuvorlik: hisob → taqqoslash → mantiq → tanlash → tayinlash. ** va tayinlash o'ngdan, qolganlar chapdan.
  • Shubha bo'lsa — qavs qo'ying. Ternary boshqa ifoda ichida bo'lsa — har doim qavsda.

Keyingi dars: Turlarni aniq (explicit) o'zgartirish — satrni songa, sonni satrga o'zingiz aylantirishni o'rganamiz, shunda "Holat: 70" >= 56 kabi kutilmagan natijalar bo'lmaydi.

Ulashish:Telegram'da

Izohlar (0)

Izoh yozish uchun kiring.

  • Hozircha izoh yo'q. Birinchi bo'ling!
JavaScript ternary operatori: vergul, void va operatorlar ustuvorligi — IlmHamroh