Shartlar, sikllar va funksiyalar

O'tgan darsda JavaScript'da qiymatlarni saqlash va hisoblashni o'rgandik. Endi dasturga «fikrlash»ni o'rgatamiz: shartga qarab qaror qabul qilish, ishni kerakli marta takrorlash va kodni qayta ishlatiladigan bo'laklarga — funksiyalarga ajratish. Bu uchtasi har qanday dasturning, jumladan, har qanday interaktiv sahifaning asosi.

if — «agar»

Algoritm darsida blok-sxemadagi rombni eslang: «Yomg'ir yog'yaptimi? Ha — soyabon ol». Dasturda bunday tanlov if («agar») bilan yoziladi. Shart qavs ichida, shart rost bo'lganda bajariladigan kod esa figurali qavslar { } ichida turadi:

const harorat = 32;

if (harorat > 30) {
  console.log("Bugun juda issiq!");
  console.log("Ko'proq suv iching.");
}

console.log("Ob-havo ma'lumoti tugadi.");

harorat ni 20 ga o'zgartiring — endi faqat oxirgi qator chiqadi, chunki shart false bo'ldi. Figurali qavslar ichidagi qatorlar blok deyiladi. Blok ichidagi qatorlar ikki bo'sh joy ichkariga surib yoziladi — JavaScript buni talab qilmaydi, lekin kod ancha oson o'qiladi.

else — «aks holda»

Shart bajarilmaganda boshqa ish qilish uchun else qo'shiladi. Ikki yo'ldan faqat bittasi bajariladi:

const yosh = 15;

if (yosh >= 18) {
  console.log("Siz saylovda ovoz bera olasiz.");
} else {
  console.log(`Ovoz berishingizga ${18 - yosh} yil qoldi.`);
}

else if — bir nechta variant

Variantlar ikkitadan ko'p bo'lsa, else if («aks holda, agar») ishlatiladi. Shartlar yuqoridan pastga tekshiriladi va birinchi rost shartning bloki bajariladi, qolganlari tekshirilmaydi ham:

const soat = 14;

if (soat < 12) {
  console.log("Xayrli tong!");
} else if (soat < 18) {
  console.log("Xayrli kun!");
} else if (soat < 22) {
  console.log("Xayrli kech!");
} else {
  console.log("Xayrli tun!");
}

14 < 12? Yo'q. 14 < 18? Ha — «Xayrli kun!» chiqadi va shu bilan tamom. Ikkinchi shartda soat >= 12 && soat < 18 deb yozish shart emas: soat 12 dan kichik bo'lganida, birinchi shart allaqachon ishlagan bo'lardi. soat ga turli qiymatlar berib ko'ring.

Mantiqiy amallar: &&, ||, !

Bir nechta shartni birlashtirish uchun mantiqiy amallar ishlatiladi:

Barcha holatlar — rostlik jadvalida:

const yosh = 20;
const chiptaBor = true;
const damOlishKuni = false;

if (yosh >= 18 && chiptaBor) {
  console.log("Kinoga kirishingiz mumkin.");
}

if (yosh < 7 || yosh >= 65) {
  console.log("Sizga chegirma bor!");
} else {
  console.log("Chipta to'liq narxda.");
}

if (!damOlishKuni) {
  console.log("Bugun ish kuni — seans kechqurun.");
}

Ternar operator — qisqa if

Ikki qiymatdan birini tanlash kerak bo'lsa, shart ? agarRost : agarYolgon ko'rinishidagi qisqa yozuv bor. U ternar operator («uch qismli amal») deyiladi:

const son = 7;
const turi = son % 2 === 0 ? "juft" : "toq";
console.log(`${son} — ${turi} son`);

const ball = 64;
console.log(ball >= 60 ? "Imtihondan o'tdingiz" : "Qayta topshirasiz");

Ternar operatorni faqat qisqa va oddiy tanlovlar uchun ishlating. Murakkab shartlar uchun oddiy if...else tushunarliroq.

switch — bitta qiymatni ko'p variant bilan solishtirish

Bitta o'zgaruvchini ko'plab aniq qiymatlar bilan solishtirish kerak bo'lsa, switch ham ishlatiladi. Uni eski kodlarda tez-tez uchratasiz:

const kun = 3;

switch (kun) {
  case 1:
    console.log("Dushanba");
    break;
  case 2:
    console.log("Seshanba");
    break;
  case 3:
    console.log("Chorshanba");
    break;
  default:
    console.log("Boshqa kun");
}

Har bir case oxiridagi break shart: u bo'lmasa, keyingi variantlar ham ketma-ket bajarilib ketadi. default — hech qaysi variant mos kelmaganda. Ko'p hollarda if...else if yetarli.

Sikllar: ishni takrorlash

1 dan 100 gacha sonlarni chiqarish uchun 100 ta console.log yozish shart emas. Sikl (inglizcha loop) — kodni kerakli marta takrorlash usuli. Eng ko'p ishlatiladigani — for.

for sikli

for qavsi ichida nuqta-vergul bilan ajratilgan uchta qism bor:

for (let i = 1; i <= 5; i++) {
  console.log(`${i}-qadam`);
}
console.log("Sikl tugadi!");

Kompyuter bu kodni shunday bajaradi:

1. let i = 1 — hisoblagich yaratiladi (bu faqat bir marta).
2. i <= 5 tekshiriladi: 1 <= 5 rost — sikl tanasi bajariladi va «1-qadam» chiqadi.
3. i++ — i 2 ga teng bo'ladi va yana 2-bandga qaytiladi.
4. Shunday qilib 5 marta aylanadi. i 6 bo'lganda shart yolg'on bo'ladi va sikl tugaydi.

Uchala qismni o'zgartirib, turli sikllar hosil qilish mumkin:

// 7 ga ko'paytirish jadvali
for (let i = 1; i <= 10; i++) {
  console.log(`7 x ${i} = ${7 * i}`);
}

// 10 dan 0 gacha, 2 qadam bilan teskari sanash
for (let i = 10; i >= 0; i -= 2) {
  console.log(i);
}

while sikli

while («...ekan») — shart rost ekan, takrorlayveradi. Necha marta aylanishi oldindan noma'lum bo'lganda qulay. Masalan, omonatga 1 000 000 so'm qo'yildi, bank har yili 20% qo'shib beradi. Pul necha yilda ikki baravar ko'payadi?

let pul = 1000000;
let yil = 0;

while (pul < 2000000) {
  pul = pul * 1.2;   // har yili 20% o'sish
  yil++;
}

console.log(`${yil} yildan keyin pul ikki baravar ko'payadi.`);
console.log(`Hisobda: ${Math.round(pul)} so'm`);

let i = 1;
while (i <= 5) {
  console.log(i);
  // i++ ni unutdik — i doim 1, shart doim rost!
}

for...of — satrni harfma-harf aylanib chiqish

for...of («...ning har biri uchun») satrdagi har bir belgini navbatma-navbat oladi. Hisoblagich kerak emas:

const soz = "Salom";
for (const harf of soz) {
  console.log(harf);
}

// "a" harfi necha marta uchraydi?
const matn = "Andijon, Samarqand, Namangan";
let soni = 0;
for (const harf of matn) {
  if (harf === "a" || harf === "A") {
    soni++;
  }
}
console.log(`"a" harfi ${soni} marta uchradi`);

Keyingi darsda for...of bilan ro'yxatlarni (massivlarni) ham aylanib chiqamiz — Massivlar va obyektlar.

break va continue

break siklni darhol to'xtatadi, continue esa joriy aylanishning qolgan qismini tashlab, keyingisiga o'tadi:

for (let i = 1; i <= 10; i++) {
  if (i % 3 === 0) {
    continue;   // 3, 6, 9 ni tashlab o'tamiz
  }
  if (i > 8) {
    break;      // 8 dan keyin siklni butunlay to'xtatamiz
  }
  console.log(i);
}

Natija: 1, 2, 4, 5, 7, 8. 3, 6 va 9 continue tufayli tashlab o'tildi, 10 da esa break siklni butunlay to'xtatdi.

Funksiyalar

Siz funksiyalarni allaqachon ishlatgansiz: console.log(), Math.round(), Number(). Funksiya (inglizcha function) — nomi bor, qayta-qayta ishlatiladigan kod bo'lagi. Endi o'zimiznikini yaratamiz.

Funksiya yaratish va chaqirish

function salomlash() {
  console.log("Assalomu alaykum!");
  console.log("Saytimizga xush kelibsiz.");
}

salomlash();   // funksiyani chaqirish
salomlash();   // yana bir marta

function kalit so'zidan keyin funksiya nomi, qavslar () va figurali qavslardagi tana yoziladi. Funksiyani yaratish (e'lon qilish) o'zi hech narsa qilmaydi — u faqat nomi va qavslar bilan chaqirilganda ishlaydi: salomlash().

Parametrlar va argumentlar

Funksiyaga qiymat berish uchun qavs ichiga parametr yoziladi. Chaqirishda berilgan aniq qiymat esa argument deyiladi:

function salomlash(ism) {          // ism — parametr
  console.log(`Salom, ${ism}!`);
}

salomlash("Ali");                  // "Ali" — argument
salomlash("Zarina");

function tanishtir(ism, shahar) {  // bir nechta parametr — vergul bilan
  console.log(`${ism} ${shahar}dan.`);
}
tanishtir("Bobur", "Andijon");

return — natijani qaytarish

Ko'pincha funksiya natijani konsolga chiqarmasdan, uni qaytarishi kerak — shunda natijani o'zgaruvchiga saqlash yoki boshqa hisobda ishlatish mumkin. Buning uchun return («qaytar») ishlatiladi:

function kvadrat(son) {
  return son * son;
}

const natija = kvadrat(5);
console.log(natija);                    // 25
console.log(kvadrat(3) + kvadrat(4));   // 9 + 16 = 25

// Taqqoslang: bu funksiya natijani faqat ko'rsatadi
function chiqar(son) {
  console.log(son * son);
}
const x = chiqar(5);   // konsolga 25 chiqadi...
console.log(x);        // ...lekin x — undefined!

Standart qiymatli parametrlar

Parametrga = bilan standart qiymat berish mumkin. Argument berilmasa, shu qiymat ishlatiladi:

function salomlash(ism = "mehmon") {
  console.log(`Salom, ${ism}!`);
}

salomlash("Bobur");   // Salom, Bobur!
salomlash();          // Salom, mehmon!

Strelkali funksiyalar

Zamonaviy JavaScript'da funksiyaning qisqa yozuvi ham bor — strelkali funksiya (inglizcha arrow function). U => belgisi bilan yoziladi:

// Oddiy funksiya
function kvadrat(x) {
  return x * x;
}

// Xuddi shu — strelkali funksiya
const kvadrat2 = (x) => x * x;

const qoshish = (a, b) => a + b;
const salom = () => console.log("Salom!");

// Ko'p qatorli tana bo'lsa — figurali qavs va return kerak
const ortacha = (a, b) => {
  const yigindi = a + b;
  return yigindi / 2;
};

console.log(kvadrat(6), kvadrat2(6));
console.log(qoshish(2, 3));
salom();
console.log(ortacha(4, 9));

Tana bitta ifodadan iborat bo'lsa, figurali qavs va return yozilmaydi — ifodaning qiymati o'zi qaytariladi. Strelkali funksiyalar DOM va hodisalar bilan ishlaganda juda ko'p uchraydi.

Ko'rinish sohasi (scope)

let va const bilan blok yoki funksiya ichida yaratilgan o'zgaruvchi faqat o'sha figurali qavslar ichida «ko'rinadi». Bu ko'rinish sohasi (inglizcha scope) deyiladi. Tashqarida yaratilgan o'zgaruvchi esa ichkarida ham ko'rinadi:

const shahar = "Toshkent";      // tashqarida — hamma joyda ko'rinadi

function tanishtir() {
  const ism = "Jasur";          // faqat funksiya ichida ko'rinadi
  console.log(`${ism} ${shahar}da yashaydi.`);
}

tanishtir();
console.log(shahar);
console.log(ism);   // XATO: ism bu yerda ko'rinmaydi

Oxirgi qatorda ReferenceError: ism is not defined — «ism aniqlanmagan» xatosi chiqdi. Bu foydali cheklov: har bir funksiya o'z «xonasida» ishlaydi va boshqa joydagi bir xil nomli o'zgaruvchilarni tasodifan buzib qo'ymaydi.

Python'ni bilsangiz

Agar Python kursidagi shartlar, while, for va funksiyalar darslarini o'tgan bo'lsangiz, g'oyalar o'sha-o'sha — faqat yozilishi boshqacha:

Mashqlar

for (let i = 1; i <= 15; i++) {
  // shu yerda tekshiring
  console.log(i);
}

for (let i = 1; i <= 15; i++) {
  if (i % 3 === 0 && i % 5 === 0) {
    console.log("UchBesh");
  } else if (i % 3 === 0) {
    console.log("Uch");
  } else if (i % 5 === 0) {
    console.log("Besh");
  } else {
    console.log(i);
  }
}

let yigindi = 0;
// sikl yozing

let yigindi = 0;
for (let i = 1; i <= 100; i++) {
  yigindi += i;
}
console.log(`Yig'indi: ${yigindi}`);

function juftmi(son) {
  // shu yerga yozing
}

console.log(juftmi(4));    // true
console.log(juftmi(7));    // false
console.log(juftmi(0));    // true
console.log(juftmi(-3));   // false

function juftmi(son) {
  return son % 2 === 0;
}

console.log(juftmi(4));    // true
console.log(juftmi(7));    // false
console.log(juftmi(0));    // true
console.log(juftmi(-3));   // false

function baho(ball) {
  // shu yerga yozing
}

console.log(baho(95));   // 5
console.log(baho(86));   // 5
console.log(baho(78));   // 4
console.log(baho(56));   // 3
console.log(baho(30));   // 2

function baho(ball) {
  if (ball >= 86) {
    return 5;
  } else if (ball >= 71) {
    return 4;
  } else if (ball >= 56) {
    return 3;
  } else {
    return 2;
  }
}

console.log(baho(95));   // 5
console.log(baho(86));   // 5
console.log(baho(78));   // 4
console.log(baho(56));   // 3
console.log(baho(30));   // 2

O'zingizni sinang

for (let i = 0; i < 3; i++) {
  console.log(i);
}

function ikkiBaravar(x) {
  console.log(x * 2);
}
const n = ikkiBaravar(5);