Bu modulda JS’ning kundalik ish qurollari o’rganildi: funksiya shakllari, massivlar, objectlar va zamonaviy sintaksis.

Function expression va arrow function

Funksiyani uch shaklda yozish mumkin:

function kvadrat1(x) { return x * x; }        // declaration
const kvadrat2 = function (x) { return x * x; }; // expression
const kvadrat3 = (x) => x * x;                 // arrow

Uchalasi ham bir xil ishlaydi. Arrow — eng qisqasi: tanasi bitta ifoda bo’lsa, return ham, jingalak qavs ham shart emas. Zamonaviy kodda qisqa funksiyalar deyarli doim arrow shaklida.

Massivlar

Massiv — tartiblangan qiymatlar ro’yxati; indeks 0 dan boshlanadi:

const mevalar = ["olma", "anor", "uzum"];
console.log(mevalar[0]);
console.log(mevalar.length);

mevalar.push("shaftoli");
console.log(mevalar);

Natija: olma, 3, so’ng ["olma", "anor", "uzum", "shaftoli"]

push — oxiriga qo’shadi, pop — oxirgisini oladi. E’tibor: const massivning ichini o’zgartirishga xalaqit bermaydi — faqat qayta tayinlashni taqiqlaydi.

slice, splice, filter, find

const sonlar = [4, 9, 16, 25, 36];
const kattalar = sonlar.filter((s) => s > 10);
const birinchi = sonlar.find((s) => s > 10);
console.log(kattalar);
console.log(birinchi);

Natija: [16, 25, 36] va 16

Tipik xato. filter bilan findni almashtirish: filter doim massiv qaytaradi (bo’sh bo’lsa ham), find — bitta element (topilmasa undefined).

Object asoslari

Object — nom-qiymat juftliklari to’plami; massiv "ro’yxat" bo’lsa, object "pasport":

const talaba = {
  ism: "Aziza",
  yosh: 21,
  kurslar: ["HTML", "CSS", "JS"],
};

console.log(talaba.ism);
console.log(talaba["yosh"]);

Natija: Aziza va 21

Nuqta yozuvi — odatiy yo’l; qavsli yozuv kalit o’zgaruvchida turganda yoki nomda bo’shliq bo’lganda kerak.

Amaliyotda massiv va object deyarli doim birga yuradi — "objectlar massivi" web'dagi eng ko’p uchraydigan ma’lumot shakli (mahsulotlar, foydalanuvchilar, darslar ro’yxati):

const kurslar = [
  { nom: "HTML", bepul: true },
  { nom: "CSS", bepul: true },
  { nom: "Video montaj", bepul: false },
];

const bepullari = kurslar.filter((k) => k.bepul);
console.log(bepullari.length);

Natija: 2

Massiv metodlari (filter, find) ayni kuchini ana shunday tuzilmalar ustida ko’rsatadi.

Destructuring

Massiv yoki objectdan qiymatlarni "ochib olish":

const { ism, yosh } = talaba;
const [birinchiKurs, ikkinchiKurs] = talaba.kurslar;
console.log(ism, yosh, birinchiKurs);

Natija: Aziza 21 HTML

Objectda nom mos kelishi shart (ism — talaba.ism), massivda esa tartib hal qiladi.

Spread va rest

Ikkalasi ham ... — vazifasi kontekstga qarab:

const asosiy = [1, 2, 3];
const kengaytma = [...asosiy, 4, 5];      // spread: yoyish
console.log(kengaytma);

const jamla = (...sonlar) =>              // rest: yig'ish
  sonlar.filter((s) => s > 0);
console.log(jamla(3, -1, 7));

Natija: [1, 2, 3, 4, 5] va [3, 7]

Spread mavjudni yoyadi (nusxalash, birlashtirish), rest esa kelayotganlarni yig’adi (cheksiz parametr).

Amaliyot

1. Uchala shaklda (declaration, expression, arrow) bitta "uzunlik hisobla" funksiyasini yozing.
2. Xaridlar ro’yxatini massivda saqlab, push/pop bilan boshqaring; slice bilan birinchi ikkitasini oling.
3. Mahsulotlar massividan narxi 100 000 dan yuqorilarini filter bilan, birinchi arzonini find bilan ajrating.
4. O’zingizni tavsiflovchi object tuzing (ichida massiv ham bo’lsin) va uni destructuring bilan oching.
5. Ikki massivni spread bilan birlashtirib, takrorsiz ro’yxat yasashga urinib ko’ring.

Modul testidan so’ng yakuniy modul: qulay sintaksis va professional odatlar.