Zamonaviy JavaScript: destructuring va spread

2015-yildan beri JavaScript’ga ko’p qulay yozuvlar qo’shildi. Ular kodni qisqartiradi va zamonaviy loyihalarda hamma joyda uchraydi.

Destructuring — massivdan ajratish

JavaScript

const ranglar = ["qizil", "yashil", "ko'k"];

const [birinchi, ikkinchi] = ranglar;
console.log(birinchi, ikkinchi);

const [, , uchinchi] = ranglar;
console.log(uchinchi);

Eski usul uzunroq edi:

const birinchi = ranglar[0];
const ikkinchi = ranglar[1];

Obyektdan ajratish

JavaScript

const talaba = { ism: "Aziz", yosh: 20, guruh: "IT-21" };

const { ism, yosh } = talaba;
console.log(ism, yosh);

const { guruh: sinf } = talaba;
console.log(sinf);

const { telefon = "yo'q" } = talaba;
console.log(telefon);

Bu yerda uch narsa: xossani ajratish, boshqa nom berish (guruh: sinf) va mavjud bo’lmasa standart qiymat.

Funksiya parametrida

JavaScript

function tanishtir({ ism, yosh }) {
return `${ism}, ${yosh} yoshda`;
}

const talaba = { ism: "Dilnoza", yosh: 22, guruh: "IT-20" };
console.log(tanishtir(talaba));

Funksiya obyektning faqat kerakli qismini oladi — nima ishlatilishi darhol ko’rinadi.

Spread — yoyish

JavaScript

const a = [1, 2, 3];
const b = [4, 5];

const birga = [...a, ...b];
console.log(birga);

const nusxa = [...a];
nusxa.push(99);
console.log(a);
console.log(nusxa);

... massiv elementlarini “yoyadi”. Bu nusxa olishning eng qulay usuli — nusxa o’zgarganda asl massiv tegilmadi.

Obyektlar uchun ham ishlaydi:

JavaScript

const asos = { ism: "Aziz", yosh: 20 };

const toliq = { ...asos, shahar: "Toshkent" };
console.log(toliq);

const yangilangan = { ...asos, yosh: 21 };
console.log(yangilangan);
console.log(asos);

Keyin kelgan xossa oldingisini almashtiradi — shuning uchun yosh: 21 ustun chiqdi.

Sayoz nusxa

Spread bir qavat nusxa oladi. Ichma-ich obyekt bo’lsa, ichkarisi baribir umumiy qoladi:

const a = { manzil: { shahar: "Toshkent" } };
const b = { ...a };
b.manzil.shahar = "Buxoro";
console.log(a.manzil.shahar); // "Buxoro" — o'zgardi!

Chuqur nusxa uchun structuredClone(a) ishlatiladi.

Rest — yig’ish

Xuddi shu ... teskari vazifani ham bajaradi:

JavaScript

const [birinchi, ...qolgani] = [1, 2, 3, 4, 5];
console.log(birinchi);
console.log(qolgani);

function yigindi(...sonlar) {
return sonlar.reduce((a, b) => a + b, 0);
}

console.log(yigindi(1, 2, 3));
console.log(yigindi(10, 20, 30, 40));

Chap tomonda (o’zlashtirishda) — yig’adi; o’ng tomonda (chaqiruvda) — yoyadi.

Qisqa xossa nomi

JavaScript

const ism = "Aziz";
const yosh = 20;

const talaba = { ism, yosh };
console.log(talaba);

O’zgaruvchi nomi bilan xossa nomi bir xil bo’lsa, bir marta yozish kifoya.

Nullish operatorlari

JavaScript

const a = null;
const b = 0;

console.log(a ?? "standart");
console.log(b ?? "standart");
console.log(b || "standart");

?? faqat null va undefined da standart qiymatga o’tadi;
|| esa har qanday falsy qiymatda (0, "" ham).

Shuning uchun son yoki bo’sh matn haqiqiy qiymat bo’lishi mumkin bo’lgan joyda ?? xavfsizroq.

Amaliy mashq

Zamonaviy sintaksisni qo’llang:

Massivdan birinchi ikki elementni destructuring bilan ajrating;
obyektdan ikki xossani ajrating va bittasiga yangi nom bering;
spread bilan ikkita massivni birlashtiring;
obyekt nusxasini olib, bitta xossasini o’zgartiring — asli tegilmadimi?
rest bilan istalgancha argument oladigan funksiya yozing;
?? va || ni 0 qiymatda solishtiring.

6-qadam ikkalasining farqini aniq ko’rsatadi.

Qisqacha xulosa

Destructuring massiv (tartib bo’yicha) va obyektdan (kalit bo’yicha) qiymat ajratadi.
Spread ... yoyadi — birlashtirish va nusxa olish uchun.
Rest ... yig’adi — qolgan elementlar yoki argumentlar.
Xossa nomi o’zgaruvchi bilan bir xil bo’lsa qisqartiriladi: { ism }.
?? faqat null/undefined da ishlaydi, || barcha falsy qiymatda.

Keyingi darsda modullar — kodni fayllarga bo’lishni ko’ramiz.