Destructuring — ob'ekt va massiv

~15 daq · JavaScript · Ob'ektlar va Massivlar

Muammodan boshlaylik

API dan ma'lumot keldi. Siz undan faqat bir nechta xususiyatni olishingiz kerak:

const javob = {
  id: 1,
  ism: "Jasur",
  yosh: 24,
  shahar: "Toshkent",
  kasb: "Dasturchi",
  email: "jasur@example.com"
};

// Eski usul — har birini alohida yozish kerak
const ism = javob.ism;
const yosh = javob.yosh;
const shahar = javob.shahar;

Uchta xususiyat uchun uchta satr. O'nta xususiyat uchun o'nta satr. Bu kod zerikarli va takroriy. Destructuring buni bir satrda yechadi.

Destructuring nima?

Destructuring — ob'ekt yoki massivdan ma'lumotlarni chiqarib, alohida o'zgaruvchilarga yuklashning qisqa usuli.

Hayotiy o'xshatma: pochta qutisidan xatlar olayapsiz. Katta paketni ochib, har bir xatni alohida joyga qo'yasiz — biri stolga, biri javonga, biri chiqindigiga. Destructuring aynan shu — yaxlit ob'ektni "ochib", kerakli qismlarini alohida o'zgaruvchilarga joylash.

Ob'ekt destructuring

const foydalanuvchi = {
  ism: "Jasur",
  yosh: 24,
  shahar: "Toshkent"
};

// Eski usul
const ism1 = foydalanuvchi.ism;
const yosh1 = foydalanuvchi.yosh;

// Destructuring
const { ism, yosh, shahar } = foydalanuvchi;

console.log(ism);   // "Jasur"
console.log(yosh);  // 24
console.log(shahar); // "Toshkent"

Chap tomonda {} — bu ob'ekt emas, destructuring sintaksisi. "Shu nomdagi xususiyatlarni ol va xuddi shu nomdagi o'zgaruvchilarga yoz" degani.

Hammasi shart emas

Ob'ektning faqat kerakli xususiyatlarini olish mumkin — qolganlarini e'tiborsiz qoldirsa bo'ladi:

const foydalanuvchi = {
  id: 1,
  ism: "Jasur",
  yosh: 24,
  email: "jasur@example.com",
  manzil: "Toshkent, Yunusobod"
};

// Faqat ism va email kerak
const { ism, email } = foydalanuvchi;

console.log(ism);   // "Jasur"
console.log(email); // "jasur@example.com"

Yangi nom bilan olish

Ba'zan ob'ektdagi kalit nomi siz xohlagan nom bilan mos kelmaydi. Ikki nuqta : bilan yangi nom berish mumkin:

const foydalanuvchi = { ism: "Jasur", yosh: 24 };

const { ism: fullName, yosh: age } = foydalanuvchi;

console.log(fullName); // "Jasur"
console.log(age);      // 24

// console.log(ism); // ReferenceError — "ism" o'zgaruvchisi yo'q

{ ism: fullName } — "ob'ektdan ism ni ol, uni fullName deb ata" degani.

Standart qiymat

Ob'ektda xususiyat bo'lmasa yoki undefined bo'lsa — standart qiymat ishlatiladi:

const sozlamalar = { til: "uz" };

const { til, mavzu = "yorug", sahifadagiSon = 10 } = sozlamalar;

console.log(til);           // "uz"
console.log(mavzu);         // "yorug" — ob'ektda yo'q, standart ishlatildi
console.log(sahifadagiSon); // 10 — ob'ektda yo'q, standart ishlatildi

Ichma-ich ob'ekt

Ob'ekt ichidagi ob'ektdan ham destructuring qilish mumkin:

const foydalanuvchi = {
  ism: "Jasur",
  manzil: {
    shahar: "Toshkent",
    tuman: "Yunusobod"
  }
};

const { ism, manzil: { shahar, tuman } } = foydalanuvchi;

console.log(ism);    // "Jasur"
console.log(shahar); // "Toshkent"
console.log(tuman);  // "Yunusobod"

// console.log(manzil); // ReferenceError — manzil o'zgaruvchisi yaratilmadi

Massiv destructuring

Ob'ekt destructuring kalitlar bo'yicha oladi. Massiv destructuring esa tartib bo'yicha oladi.

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

// Eski usul
const rang1 = ranglar[0];
const rang2 = ranglar[1];

// Destructuring
const [birinchi, ikkinchi, uchinchi] = ranglar;

console.log(birinchi); // "qizil"
console.log(ikkinchi); // "yashil"
console.log(uchinchi); // "ko'k"

O'rtadagilarni o'tkazib yuborish

Vergul qoldirib, ba'zi elementlarni e'tiborsiz qoldirish mumkin:

const sonlar = [1, 2, 3, 4, 5];

const [birinchi, , uchinchi, , beshinchi] = sonlar;

console.log(birinchi); // 1
console.log(uchinchi); // 3
console.log(beshinchi); // 5

Standart qiymat

const [a = 0, b = 0, c = 0] = [10, 20];

console.log(a); // 10
console.log(b); // 20
console.log(c); // 0 — massivda yo'q, standart ishlatildi

Ikki o'zgaruvchini almashtirish

Destructuring yordamida uchlamchi o'zgaruvchisiz ikki qiymatni almashtirish mumkin:

let x = 1;
let y = 2;

// Eski usul
let vaqtinchalik = x;
x = y;
y = vaqtinchalik;

// Destructuring bilan
[x, y] = [y, x];

console.log(x); // 2
console.log(y); // 1

Funksiya parametrlarida destructuring

Bu destructuring ning eng ko'p ishlatiladigan joyi. Funksiya ko'p parametr olayotganda ularni ob'ekt sifatida berish va destructuring bilan qabul qilish kodni ancha o'qilishi oson qiladi.

// Eski usul — parametrlar tartibi muhim, nomi noma'lum
function foydalanuvchiYarat(ism, yosh, shahar, email) {
  console.log(ism, yosh, shahar, email);
}

foydalanuvchiYarat("Jasur", 24, "Toshkent", "jasur@example.com");
// Chaqirayotganda qaysi qiymat nima ekanini bilmaysiz


// Destructuring bilan — tartib muhim emas, nomlar aniq
function foydalanuvchiYarat({ ism, yosh, shahar, email }) {
  console.log(ism, yosh, shahar, email);
}

foydalanuvchiYarat({
  ism: "Jasur",
  yosh: 24,
  shahar: "Toshkent",
  email: "jasur@example.com"
});

Standart qiymatlar bilan birgalikda:

function sozla({ til = "uz", mavzu = "yorug", sahifadagiSon = 10 } = {}) {
  console.log(til, mavzu, sahifadagiSon);
}

sozla({ mavzu: "qorong'u" }); // "uz", "qorong'u", 10
sozla();                       // "uz", "yorug", 10 — hamma standart

= {} — funksiya hech qanday argument olmasa ham ishlashi uchun. Bo'lmasa sozla() chaqirilganda xato beradi.

Massiv qaytaruvchi funksiyalar

function koordinat() {
  return [41.2995, 69.2401];
}

const [kenglik, uzunlik] = koordinat();

console.log(kenglik); // 41.2995
console.log(uzunlik); // 69.2401

Rest bilan birga ishlatish

Destructuring da ...rest — "qolganlarini ol" degani. Ob'ekt va massiv ikkalasida ham ishlaydi.

// Ob'ektda
const { ism, yosh, ...qolganlar } = {
  ism: "Jasur",
  yosh: 24,
  shahar: "Toshkent",
  kasb: "Dasturchi"
};

console.log(ism);       // "Jasur"
console.log(yosh);      // 24
console.log(qolganlar); // { shahar: "Toshkent", kasb: "Dasturchi" }

// Massivda
const [birinchi, ikkinchi, ...qolganlar] = [1, 2, 3, 4, 5];

console.log(birinchi);  // 1
console.log(ikkinchi);  // 2
console.log(qolganlar); // [3, 4, 5]

Amaliy misol — ob'ektdan bitta xususiyatni olib, qolganini uzatish:

function foydalanuvchiKoʻrsat({ parol, ...xavfsizMaʼlumot }) {
  // parol ni ko'rsatmaymiz — u faqat bu funksiyada qoladi
  console.log(xavfsizMaʼlumot);
}

foydalanuvchiKoʻrsat({
  ism: "Jasur",
  email: "jasur@example.com",
  parol: "maxfiy123"
});
// { ism: "Jasur", email: "jasur@example.com" }

Tez-tez uchraydigan xatolar

Mavjud bo'lmagan xususiyatni olish

const { ism, telefon } = { ism: "Jasur" };

console.log(ism);     // "Jasur"
console.log(telefon); // undefined — xato emas, lekin kutilmagan natija

Bu xato bermaydi, lekin telefon undefined bo'ladi. Standart qiymat qo'yish yoki mavjudligini tekshirish kerak.

Null yoki undefined dan destructuring

// Xato — null yoki undefined dan destructuring bo'lmaydi
const { ism } = null;        // TypeError
const { yosh } = undefined;  // TypeError

// To'g'ri — oldin tekshirish
const maʼlumot = null;
const { ism = "Noma'lum" } = maʼlumot || {};
console.log(ism); // "Noma'lum"

Ichma-ich destructuring da mavjud bo'lmagan ob'ekt

const foydalanuvchi = { ism: "Jasur" }; // manzil yo'q

// Xato — manzil undefined, undan shahar olib bo'lmaydi
const { manzil: { shahar } } = foydalanuvchi; // TypeError

// To'g'ri — standart qiymat bilan
const { manzil: { shahar } = {} } = foydalanuvchi;
console.log(shahar); // undefined — xato bermaydi

Ob'ekt destructuring ni ifoda o'rtasida ishlatish

let ism, yosh;

// Xato — {} blok sifatida qabul qilinadi
{ ism, yosh } = { ism: "Jasur", yosh: 24 };

// To'g'ri — qavsga olish kerak
({ ism, yosh } = { ism: "Jasur", yosh: 24 });

Bu holat const yoki let bilan e'lon qilinmasdan, mavjud o'zgaruvchilarga destructuring qilinganda kelib chiqadi.

Xulosa

Destructuring — ob'ekt yoki massivdan ma'lumotlarni chiqarib, alohida o'zgaruvchilarga yuklashning qisqa usuli.

Ob'ekt destructuring — kalit nomi bo'yicha oladi. Yangi nom berish :, standart qiymat =, ichma-ich { a: { b } } bilan.

Massiv destructuring — tartib bo'yicha oladi. O'tkazib yuborish ,, standart qiymat =, qolganlarini olish ...rest bilan.

Funksiya parametrlarida destructuring kodni ancha o'qilishi oson qiladi — parametrlar tartibi muhim emas, nomlar aniq ko'rinadi.

Rest operatori destructuring bilan birgalikda "qolganlarini ol" imkonini beradi — ob'ektda va massivda ikkalasida ham ishlaydi.

Keyingi dars

21-dars: Spread va Rest operatori