2.2-bob: Shartli operatorlar va tsikllar (for, while, ...)

2-QISM — JavaScript (0 dan chuqurgacha) · 2-mavzu

1. Kirish va motivatsiya

0.6-bobda barcha dasturlarning uch g'ishti borligini o'rgandik: ketma-ketlik, shart (tanlov) va takror (tsikl). Oldingi bobda 2.1-bob ketma-ketlikni va operatorlarni ko'rdik. Endi qolgan ikki g'ishtni JavaScript'da yozamiz — bularsiz dastur "fikrlay" va "takrorlay" olmaydi.

• Shart dasturga qaror qabul qilish beradi: "agar foydalanuvchi tizimga kirgan bo'lsa — profilni ko'rsat, aks holda — login sahifasiga yo'naltir".
• Tsikl dasturga takrorlash beradi: "1000 ta mahsulotning har birini ko'rsat" — bittadan qo'lda yozmaysiz.

O'xshatish: shart — yo'l ayirg'ichi (svetofor): yashil bo'lsa yur, qizil bo'lsa to'xta. Tsikl — konveyer: bir xil ishni har bir detalga takrorlaydi, ish tugaguncha.

Bu bob — mantiqni kod qilishning yuragi. Bu yerda o'rganasiz: if/else, switch, ternary, va for/while/for...of/for...in tsikllari hamda break/continue.

2. Nazariya — chuqur tushuntirish

2.1. if / else if / else — shart

Eng asosiy qaror tuzilmasi (0.6: selection):

if (shart) {
  // shart TRUE bo'lsa, bu blok ishlaydi
} else if (boshqaShart) {
  // birinchisi false, bu true bo'lsa
} else {
  // hech qaysi shart true bo'lmasa
}

Shart — booleanga aylanadigan ifoda (2.1: ===, &&, ||). Masalan yosh >= 18, ism === "Ali".

2.2. Truthy va falsy — eng muhim tushuncha

JS shart ichida har qanday qiymatni boolean'ga aylantiradi (2.1: coercion). Qaysi qiymatlar "yolg'on" (falsy) hisoblanishini yodlash kerak — atigi 8 ta:

FALSY (yolg'on deb hisoblanadi):
  false    0    -0    0n(bigint)    ""(bo'sh matn)    null    undefined    NaN

TRUTHY (rost — qolgan HAMMASI):
  "0"  "false"  []  {}  -1  "salom"  ... (bo'sh massiv/obyekt ham TRUTHY!)

Eng ko'p uchraydigan tuzoq: bo'sh massiv [] va bo'sh obyekt {} — truthy! if ([]) ishlaydi. Massiv bo'shligini tekshirish uchun arr.length === 0 ishlating.

if (ism) { }           // ism bo'sh bo'lmasa ("" emas, null emas)
if (!user) { }         // user yo'q bo'lsa (null/undefined)
if (arr.length) { }    // massivda element bo'lsa (length > 0  truthy)

2.3. switch — ko'p tarmoqli tanlov

Bitta qiymatni ko'p variant bilan solishtirganda switch o'qishliroq:

switch (kun) {
  case "dushanba":
    console.log("Hafta boshi");
    break;                 //  break SHART — aks holda keyingiga "oqib" o'tadi
  case "shanba":
  case "yakshanba":        // bir nechta case birga (dam olish)
    console.log("Dam olish");
    break;
  default:                 // hech qaysi case mos kelmasa
    console.log("Oddiy kun");
}

breakni unutma! break bo'lmasa, JS keyingi caselarni ham bajaradi ("fall-through"). Bu — klassik xato. switch === (qat'iy tenglik) bilan solishtiradi.

2.4. Ternary va mantiqiy operatorlar bilan qisqartirish

Oddiy shartlarda if o'rniga qisqaroq yozuvlar 2.1-bob:

// ternary — qiymat tanlash
const holat = yosh >= 18 ? "katta" : "kichik";

// && — "agar chap true bo'lsa, o'ngni ber" (qisqa shart)
isLoggedIn && korsatProfil();

// || — standart qiymat (eski usul; zamonaviysi ?? — 2.1)
const ism = kiritilgan || "Mehmon";

2.5. for tsikli — ma'lum marta takror

Eng klassik tsikl — uch qismdan iborat:

for (let i = 0; i < 5; i++) {
  //   │boshlang' │shart  │qadam
  //   (1 marta)  (har    (har iteratsiyadan
  //              tekshir) keyin)
  console.log(i);   // 0, 1, 2, 3, 4
}

Ishlash tartibi: (1) let i = 0 — bir marta; (2) i < 5 tekshiriladi — true bo'lsa tana ishlaydi; (3) i++; (4) yana 2-qadamga. i < 5 false bo'lganda to'xtaydi.

Diqqat — off-by-one 0.6-bob: 5 element bo'lsa, indekslar 0..4, shart i < 5 (<= emas!). Bu — eng ko'p uchraydigan tsikl xatosi.

2.6. while va do...while

Marta noma'lum, shartga bog'liq bo'lganda:

// while — avval tekshiradi, keyin ishlaydi
let n = 5;
while (n > 0) {
  console.log(n);
  n--;          //  o'zgartirmasangiz — cheksiz tsikl (0.6, 0.5: sahifa qotadi)
}

// do...while — avval BIR MARTA ishlaydi, keyin tekshiradi
let javob;
do {
  javob = soraq();   // kamida bir marta so'raydi
} while (javob !== "ha");

Cheksiz tsikldan ehtiyot bo'ling: har whileda "bu qachon TO'XTAYDI?" deb so'rang 0.6-bob. Tsikl o'zgaruvchisi shartni "false"ga olib kelishi shart.

2.7. for...of va for...in — zamonaviy tsikllar

// for...of — massiv/string QIYMATLARI bo'ylab (eng ko'p ishlatiladi)
const mevalar = ["olma", "nok", "uzum"];
for (const meva of mevalar) {
  console.log(meva);    // "olma", "nok", "uzum" (qiymat)
}

// for...in — obyekt KALITLARI (xususiyat nomlari) bo'ylab
const user = { ism: "Ali", yosh: 19 };
for (const kalit in user) {
  console.log(kalit, "=", user[kalit]);  // "ism = Ali", "yosh = 19"
}

Maslahat: massiv uchun for...of (qiymat) yoki Array metodlari (.forEach, .map — 2.7-bob). Obyekt uchun for...in yoki Object.keys(). for...inni massivga ishlatmang (kutilmagan natija beradi).

2.8. break va continue

for (let i = 0; i < 10; i++) {
  if (i === 5) break;      // tsiklni butunlay TO'XTATADI (i=5 da chiqadi)
  if (i % 2 === 0) continue; // shu iteratsiyani O'TKAZADI, keyingisiga o'tadi
  console.log(i);          // 1, 3 (juftlar continue bilan o'tkazildi, 5 da break)
}

• break — tsiklni butunlay to'xtatadi.
• continue — joriy iteratsiyani o'tkazib, keyingisiga o'tadi.

Oddiy break/continue faqat eng yaqin (o'zi turgan) tsiklga ta'sir qiladi. Ichma-ich tsiklda tashqi tsikldan birdan chiqmoqchi bo'lsangiz — belgili (labeled) break/continue ishlatiladi. Tsikl oldiga nom: (yorliq) qo'yiladi, break nom/continue nom esa o'sha yorliqli tsiklga murojaat qiladi:

tashqi:                             //  yorliq (label) — tsikl nomi
for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i + j === 3) {
      console.log(`To'xtatildi: i=${i}, j=${j}`);
      break tashqi;                 // faqat ichkini emas — IKKALA tsiklni to'xtatadi
    }
    console.log(i, j);
  }
}
// `break tashqi` bo'lmaganda, oddiy `break` faqat ichki (j) tsiklni to'xtatardi

Maslahat: belgili break/continue kamdan-kam kerak va kodni o'qishni qiyinlashtiradi. Ko'pincha mantiqni alohida funksiyaga ajratib, return bilan chiqish o'qishliroq (2.3 — funksiyalar).

3. Sintaksis — tez ma'lumotnoma

if (shart) { } else if (shart2) { } else { }       // shart
switch (x) { case a: ...; break; default: ...; }    // ko'p tarmoq
shart ? a : b                                       // ternary

for (let i = 0; i < n; i++) { }                     // klassik for
while (shart) { }                                   // shartli
do { } while (shart);                               // kamida bir marta
for (const x of massiv) { }                         // qiymatlar
for (const k in obyekt) { }                         // kalitlar

break;     // tsiklni to'xtat
continue;  // iteratsiyani o'tkaz
nom: for (...) { break nom; }                       // belgili (labeled) chiqish

4. Batafsil kod namunalari

Misol 1 — if/else va truthy/falsy

const yosh = 19;
const ism = "";   // bo'sh matn — FALSY (2.2)

if (yosh >= 18) {
  console.log("Voyaga yetgan");   // bu ishlaydi
} else {
  console.log("Voyaga yetmagan");
}

// truthy/falsy tekshirish (2.2)
if (!ism) {
  console.log("Ism kiritilmagan");  // "" falsy  !"" true  ishlaydi
}

const arr = [];
if (arr.length === 0) {            //  if(arr) emas — [] truthy! (2.2)
  console.log("Massiv bo'sh");
}

Misol 2 — switch (baho tizimi)

const baho = "B";
switch (baho) {
  case "A":
    console.log("A'lo");
    break;
  case "B":
    console.log("Yaxshi");        // bu ishlaydi
    break;
  case "C":
  case "D":                        // C va D birga (2.3)
    console.log("Qoniqarli");
    break;
  default:
    console.log("Noma'lum baho");
}

Misol 3 — Tsikllar (turli usullar)

// 1) Klassik for — indeks bilan (2.5)
for (let i = 1; i <= 5; i++) {
  console.log(`Qadam ${i}`);
}

// 2) for...of — massiv qiymatlari (2.7)
const ranglar = ["qizil", "yashil", "ko'k"];
for (const rang of ranglar) {
  console.log(rang);
}

// 3) while — shartga bog'liq (2.6)
let balans = 100;
while (balans > 0) {
  balans -= 30;
  console.log(`Qoldiq: ${balans}`);   // 70, 40, 10, -20 (to'xtaydi)
}

// 4) for...in — obyekt kalitlari (2.7)
const user = { ism: "Ali", yosh: 19, shahar: "Toshkent" };
for (const kalit in user) {
  console.log(`${kalit}: ${user[kalit]}`);
}

Misol 4 — break/continue (qidiruv)

const sonlar = [4, 8, 15, 16, 23, 42];
const qidirilgan = 16;

for (let i = 0; i < sonlar.length; i++) {
  if (sonlar[i] === qidirilgan) {
    console.log(`Topildi! Indeks: ${i}`);  // "Topildi! Indeks: 3"
    break;                                  // topildi — to'xtaymiz (2.8)
  }
}

// continue — faqat juft sonlarni chiqarish
for (const son of sonlar) {
  if (son % 2 !== 0) continue;  // toq bo'lsa — o'tkaz
  console.log(son);             // 4, 8, 16, 42
}

5. To'g'ri va noto'g'ri holatlar

1) Massiv/obyekt bo'shligini if(x) bilan tekshirish

//  [] va {} TRUTHY! 2.2-bob — har doim "to'la" deb o'ylaydi
if (arr) { }

//  uzunlik/kalit bilan
if (arr.length > 0) { }
if (Object.keys(obj).length > 0) { }

2) switchda breakni unutish

//  break yo'q — keyingi case'larga "oqib" o'tadi (2.3)
switch (x) { case 1: doA(); case 2: doB(); }

//  har case'da break
switch (x) { case 1: doA(); break; case 2: doB(); break; }

3) Cheksiz tsikl

//  i hech oshmaydi — abadiy (0.5: sahifa qotadi)
for (let i = 0; i < 5;) { console.log(i); }

//  qadam bor
for (let i = 0; i < 5; i++) { console.log(i); }

4) Massivga for...in

//  for...in indekslarni STRING qaytaradi va tartib kafolatsiz (2.7)
for (const i in arr) { }

//  qiymat uchun for...of, indeks uchun klassik for
for (const x of arr) { }

6. Keng tarqalgan xatolar va yechimlari

Xato 1 — Off-by-one (chegaradan oshish)

for (let i = 0; i <= arr.length; i++) { } //  oxirida undefined

Sababi: <= o'rniga < kerak 0.6-bob. Yechimi: i < arr.length; 3 element indeks 0,1,2.

Xato 2 — Cheksiz tsikl (sahifa qotadi)

Sababi: tsikl sharti hech qachon false bo'lmaydi 2.6-bob. Yechimi: o'zgaruvchini har iteratsiyada o'zgartiring; "qachon to'xtaydi?" deb tekshiring.

Xato 3 — switch fall-through

Sababi: break yo'q 2.3-bob. Yechimi: har casega break (yoki return).

Xato 4 — Truthy/falsy chalkashligi

if (son) { }   // son === 0 bo'lsa, 0 FALSY  blok ishlamaydi! (2.2)

Sababi: 0, "" falsy 2.2-bob. Yechimi: aniq tekshiring: if (son !== undefined) yoki if (son != null).

Xato 5 — let o'rniga global o'zgaruvchi (tsiklda)

Sababi: for (i = 0...) (e'lonsiz) — global o'zgaruvchi yaratadi. Yechimi: for (let i = 0...) — block scope (2.1, 2.4-bob).

7. Integratsiya — bu mavzu stack'ning qayerida uchraydi

• Algoritmlar (0.6, 3-QISM): shart + tsikl — barcha algoritmlarning asosi (saralash, qidiruv).
• Array metodlari 2.7-bob: .map, .filter, .forEach — tsikllarning zamonaviy, deklarativ shakli.
• Funksiyalar 2.3-bob: shart + tsikl funksiya ichida mantiqni tashkil qiladi.
• DOM 2.16-bob: elementlar ro'yxati bo'ylab tsikl; hodisaga shartli javob.
• React (11): ro'yxat render (.map), shartli render (ternary, &&).
• Backend (5): so'rovlarni shartli qayta ishlash, ma'lumotlar bo'ylab tsikl.

8. Eng yaxshi amaliyotlar (best practices)

• Truthy/falsy ni yodlang (8 falsy — 2.2); massiv/obyekt uchun .length/Object.keys.
• switchda har case'ga break (yoki return) 2.3-bob.
• Massiv qiymati uchun for...of, indeks kerak bo'lsagina klassik for 2.7-bob.
• Massivga for...in ishlatmang 2.7-bob.
• Har tsiklga "qachon to'xtaydi?" deb so'rang — cheksizdan saqlaydi 2.6-bob.
• Murakkab tsikl o'rniga Array metodlari (.map/.filter — 2.7) — o'qishliroq.
• Chuqur ichma-ich iflardan qoching — erta return/continue bilan tekislang.
• Ternaryni faqat oddiy holatda — murakkab bo'lsa to'liq if.

9. Amaliy loyiha: "Ovqat Buyurtma Mantig'i"

Shart va tsikllarni amalda mustahkamlovchi konsol dasturi.

Maqsad

if/else, switch, tsikllar va break/continueni birlashtirib, real mantiqni kod qilish; truthy/falsy va off-by-one tuzoqlaridan qochish.

Talablar (requirements)

1. Menyu massivi: kamida 6 taom (har biri nom va narx — obyekt). Tsikl bilan butun menyuni chiqaring (for...of — 2.7).
2. Buyurtma jami: tanlangan taomlar narxini tsikl bilan qo'shib, umumiy summani hisoblang.
3. Chegirma mantig'i (if/else): jami > 100 000 10% chegirma; > 50 000 5%; aks holda — yo'q.
4. Yetkazib berish (switch): masofa zonasiga ("yaqin"/"o'rta"/"uzoq") qarab narx qo'sh.
5. Tekshiruv: bo'sh buyurtma (arr.length === 0) bo'lsa — "savat bo'sh" xabari (truthy/falsy to'g'ri — 2.2).
6. Qidiruv: foydalanuvchi izlagan taomni break bilan toping; topilmasa — xabar.
7. Filtr: continue bilan faqat ma'lum narxdan arzon taomlarni chiqaring.
8. (Bonus) Ternary bilan "bepul yetkazib berish" holatini aniqlang (jami > 200 000).

Maslahatlar (hint)

• Menyu: [{ nom: "Lag'mon", narx: 35000 }, ...].
• Jami uchun let jami = 0 va tsiklda jami += taom.narx.
• Chegirmada tartibga e'tibor bering: avval kattaroq shartni tekshiring (0.6: FizzBuzz mantig'i).
• Bo'sh savatni if (savat.length === 0) bilan tekshiring, if (savat) emas 2.2-bob.
• Off-by-one: i < arr.length 0.6-bob.

"Tayyor" mezonlari (acceptance criteria)

• Menyu tsikl bilan to'liq chiqadi.
• Jami summa to'g'ri hisoblanadi.
• Chegirma if/else bilan to'g'ri qo'llanadi (chegaralarda ham).
• Yetkazib berish switch bilan (har case'da break).
• Bo'sh savat to'g'ri aniqlanadi (.length).
• Qidiruv break bilan, filtr continue bilan ishlaydi.
• Hech bir tsikl cheksiz emas; off-by-one yo'q.

Yechim kodi ataylab berilmagan — bu loyihani o'zingiz yozib ko'ring.

10. Xulosa va keyingi bobga ko'prik

Bu bobda mantiqni kod qilishni — shart va tsikllarni o'rgandik:

• if/else if/else va switch (har case'da break!) — qaror qabul qilish.
• Truthy/falsy: 8 ta falsy (false 0 "" null undefined NaN -0 0n); [] va {} truthy — .length/Object.keys bilan tekshiring.
• Tsikllar: for (indeks), while/do...while (shartli), for...of (qiymat), for...in (kalit).
• break (to'xtatish), continue (o'tkazish).
• Tuzoqlar: off-by-one (< vs <=), cheksiz tsikl, switch fall-through, falsy chalkashligi.

Keyingi bob — 2.3-bob: Funksiyalar (parametr, return, scope, arrow functions). Endi kodni qayta ishlatiladigan bloklarga — funksiyalarga — bo'lishni o'rganamiz. Funksiya — dasturlashning eng muhim qurilish bloki: bir marta yoz, ming marta ishlat. Shart va tsikllarni funksiya ichiga joylab, haqiqiy dastur quramiz.

Foydalanilgan rasmiy/ishonchli manbalar

• MDN Web Docs — control flow, if...else, switch, conditional (ternary) operator
• MDN Web Docs — loops and iteration (for, while, for...of, for...in)
• MDN Web Docs — truthy/falsy, break/continue