Massiv va obyektlarni destructuring qilish, default qiymatlar, qayta nomlash, Spread operatori va Shallow copy xususiyati hamda Rest parametri.
Bu bob zamonaviy JavaScript kodini ancha qisqa va o'qish oson qiladigan ikkita kuchli vosita — Destructuring va Spread/Rest operatorlariga bag'ishlangan.
Destructuring — array yoki object ichidagi qiymatlarni alohida variable'larga "ajratib olish".
Destructuring'siz, array elementlarini alohida variable'larga olish uchun har birini qo'lda yozish kerak edi:
script.jsJavaScriptlet arr = [1, 2, 3];let a = arr[0];let b = arr[1];let c = arr[2];
Destructuring bilan buni bir qatorda yozish mumkin.
script.jsJavaScriptlet [a, b, c] = [1, 2, 3];console.log(a, b, c); // 1 2 3
script.jsJavaScriptlet [first, , third] = [10, 20, 30];console.log(first, third); // 10 30
script.jsJavaScriptlet [x, y = 5] = [10];console.log(x, y); // 10 5
Explanation
Agar array'da yetarli element bo'lmasa, default qiymat ishlatiladi.
script.jsJavaScriptlet m = 1;let n = 2;[m, n] = [n, m];console.log(m, n); // 2 1
💡 Key Idea
Destructuring'dan oldin ikkita variable qiymatini almashtirish uchun uchinchi vaqtinchalik variable kerak bo'lardi. Destructuring bu jarayonni bitta qatorga tushiradi.
Object'dan kerakli propertylarni to'g'ridan-to'g'ri variable'larga ajratib olish.
script.jsJavaScriptlet person = { name: "Ali", age: 25, city: "Toshkent" };let { name, age } = person;console.log(name, age); // "Ali" 25
⚠️ Common Mistake
Object destructuring'da variable nomi aynan object'dagi key nomi bilan bir xil bo'lishi kerak (agar boshqa nom kerak bo'lsa, pastdagi "qayta nomlash" usulini ishlating).
script.jsJavaScriptlet { name: userName, age: userAge } = person;console.log(userName, userAge); // "Ali" 25
script.jsJavaScriptlet { name, country = "Uzbekiston" } = person;console.log(country); // "Uzbekiston" (person'da country yo'q edi)
script.jsJavaScriptlet user = {name: "Vali",address: {city: "Samarqand",zip: "140100"}};let { address: { city } } = user;console.log(city); // "Samarqand"
🔗 Connection
Bu — Chapter 8'da ko'rgan Nested Object'larga murojaat qilishning yanada qisqaroq usuli.
Function parametrlarida ham destructuring ishlatish mumkin — bu ayniqsa object argument qabul qiladigan function'larda juda foydali.
script.jsJavaScriptfunction printUser({ name, age }) {console.log(`${name}, ${age} yosh`);}printUser({ name: "Aziz", age: 22 }); // "Aziz, 22 yosh"
Function ichida user.name, user.age deb yozish o'rniga, to'g'ridan-to'g'ri name, age ishlatilyapti — bu funksiya tanasini ancha soddalashtiradi.
Spread operator — array yoki object elementlarini "yoyib tashlaydi" (kengaytiradi).
script.jsJavaScriptlet arr1 = [1, 2, 3];let arr2 = [4, 5, 6];let combined = [...arr1, ...arr2];console.log(combined); // [1, 2, 3, 4, 5, 6]
script.jsJavaScriptlet original = [1, 2, 3];let copy = [...original];copy.push(4);console.log(original); // [1, 2, 3] — o'zgarmaganconsole.log(copy); // [1, 2, 3, 4]
🔗 Connection
Chapter 7'da ko'rgan slice() bilan array nusxalash mumkin edi, lekin [...array] — zamonaviy va tez-tez ishlatiladigan alternativ usul.
script.jsJavaScriptlet defaults = { theme: "light", fontSize: 14 };let userSettings = { fontSize: 18 };let finalSettings = { ...defaults, ...userSettings };console.log(finalSettings); // { theme: "light", fontSize: 18 }
Agar ikkita object'da bir xil key bo'lsa, oxirgi spread qilingan object'ning qiymati ustunlik qiladi. Bu — Chapter 8'dagi mashqda so'ralgan vazifaning aynan yechimi.
script.jsJavaScriptfunction sum(a, b, c) {return a + b + c;}let numbers = [1, 2, 3];console.log(sum(...numbers)); // 6
...numbers — array elementlarini alohida-alohida argumentlarga "yoyib" beradi, xuddi sum(1, 2, 3) yozgandek.
Spread operator faqat birinchi darajadagi (top-level) qiymatlarni nusxalaydi. Agar object/array ichida yana object/array bo'lsa, ular hali ham reference (havola) orqali bog'langan bo'lib qoladi.
script.jsJavaScriptlet original = {name: "Ali",address: { city: "Toshkent" }};let copy = { ...original };copy.address.city = "Samarqand";console.log(original.address.city); // "Samarqand" — o'zgargan!
{ ...original } — name va address propertylarini nusxalaydi, lekin addressning qiymati — bu object'ga havola. Spread faqat havolani nusxalaydi, ichidagi object'ning o'zini emas. Shuning uchun copy.address va original.address — aslida bitta xuddi shu object'ga ishora qiladi.
code.textTEXToriginal ──┬── name: "Ali"└── address ──┐│copy ──────┬── name: "Ali" │└── address ──────┘ (bitta xuddi shu object'ga ishora)
Chuqur (to'liq mustaqil) nusxa uchun:
script.jsJavaScriptlet deepCopy = JSON.parse(JSON.stringify(original));// yoki zamonaviy usul:let deepCopy2 = structuredClone(original);
⚠️ Common Mistake
Spread operatorni "har doim to'liq mustaqil nusxa yaratadi" deb noto'g'ri tushunish — bu faqat shallow copy (sayoz nusxa), murakkab (nested) ma'lumotlar uchun yetarli emas.
Rest — Spread'ning "teskarisi": ko'p qiymatlarni bitta array'ga "yig'adi" (Chapter 6'da function parametrida ko'rgan edik).
script.jsJavaScriptlet [first, ...rest] = [1, 2, 3, 4, 5];console.log(first); // 1console.log(rest); // [2, 3, 4, 5]
script.jsJavaScriptlet { name, ...otherInfo } = { name: "Ali", age: 25, city: "Toshkent" };console.log(name); // "Ali"console.log(otherInfo); // { age: 25, city: "Toshkent" }
💡 Key Idea
... belgisi kontekstga qarab ikki xil ma'noga ega: destructuring/array/object ichida — Rest (yig'ish), function chaqirishda yoki array/object yaratishda — Spread (yoyish).
Task:
let [x, y, z] = [100, 200, 300] yordamida uchta variable yarating va ularni chiqaring.
Required Concepts:
Task:
Object destructuring yordamida quyidagi object'dan title va authorni oling, year uchun default qiymat "noma'lum" bo'lsin:
script.jsJavaScriptlet book = { title: "Kecha va Kunduz", author: "Cho'lpon" };
Required Concepts:
let { title, author, year = "noma'lum" } = book;Task:
Ikkita object'ni birlashtirib, agar ikkalasida ham bir xil key bo'lsa, ikkinchisi ustunlik qilishi kerak bo'lgan yangi object yarating. Keyin Rest destructuring yordamida yangi object'dan bitta keyni ajratib, qolganlarini alohida object sifatida oling.
Required Concepts:
{ ...obj1, ...obj2 }, keyin let { keyToRemove, ...rest } = merged;script.jsJavaScriptlet original = [1, [2, 3]];let copy = [...original];copy[1].push(4);console.log(original[1]);
🧠 Think first! Javobni ko'rishdan oldin kamida 30 soniya o'ylang.
<details> <summary>Answer</summary> [2, 3, 4]Why?
Spread — shallow copy yaratadi. copy[1] va original[1] — bitta xuddi shu ichki array'ga ishora qiladi, shuning uchun copy[1]ga element qo'shish original[1]ga ham ta'sir qiladi.
Quyidagi kodda muammo bor:
script.jsJavaScriptfunction greet({ name, age }) {console.log(`${name} - ${age}`);}greet("Ali", 25);
Your Task:
Yechim:
</details>script.jsJavaScriptfunction greet({ name, age }) {console.log(`${name} - ${age}`);}greet({ name: "Ali", age: 25 });
...) — array/object'ni "yoyadi" (birlashtirish, nusxalash, function chaqirish uchun)....) — bir nechta qiymatni bitta array/object'ga "yig'adi".structuredClone() yoki JSON.parse(JSON.stringify()) kerak.... belgisi kontekstga qarab Spread yoki Rest bo'lishi mumkin.script.jsJavaScript// Array destructuringlet [a, b] = [1, 2];// Object destructuringlet { x, y } = { x: 1, y: 2 };// Spread — arraylet combined = [...arr1, ...arr2];// Spread — objectlet merged = { ...obj1, ...obj2 };// Rest — arraylet [first, ...rest] = [1, 2, 3];// Rest — objectlet { key, ...others } = obj;
Mavzu bo‘yicha tushunchalaringizni interaktiv test orqali sinovdan o‘tkazing va natijalarni bilib oling.
Darslikda o‘rganilgan qoidalarga asosan real kod yozing, testlardan o‘tkazing va yechimlarni mustahkamlang.
Test Sinovi
Hali topshirilmagan (kamida 75% kerak)
Amaliy Masalalar
0 / 3 ta yechildi (kamida 75% kerak)
Dars sifati va mazmunini yaxshilash uchun o‘z haqqoniy bahoingizni qoldiring.
Mavzuni to‘liq o‘zlashtirish uchun test sinovi, amaliy kodlash va bog‘liq darslar
O‘z bilimingizni interaktiv test savollari orqali tekshiring va darhol xatolarni tahlil qiling.
Nazariyani real kod yozish bilan mustahkamlang, avtomatik testlardan o‘ting va XP to‘plang.
Kurs bo‘yicha keyingi va bog‘liq mavzular: