JavaScript object, destructuring va spread/rest operatori (2.8-bob)

2-QISM — JavaScript (0 dan chuqurgacha) · 8-mavzu

1. Kirish va motivatsiya

Massivlar 2.7-bob tartibli ro'yxat edi. Obyekt — JS'ning ikkinchi, eng muhim ma'lumot tuzilmasi: nom-qiymat juftliklari to'plami. Real dunyodagi deyarli har bir "narsa" obyekt bilan ifodalanadi: foydalanuvchi ({ism, email, yosh}), mahsulot ({nom, narx, soni}), sozlama, API javobi (0.4: JSON).

Va destructuring hamda spread/rest (...) — zamonaviy JS'ning eng ko'p ishlatiladigan, eng "shirin" sintaksisi. React (11), Redux (12), har bir zamonaviy loyiha ularsiz yozilmaydi. 2.7-bobda ularni sezdik; endi to'liq, chuqur ochamiz.

O'xshatish: massiv — raqamlangan shkaf (0, 1, 2... yacheyka). Obyekt — yorliqlangan shkaf: har yacheykada nom bor (ism, narx). Raqam bilan emas, nom bilan murojaat qilasiz — bu inson uchun ancha tabiiy.

Bu bob — JS ma'lumot modellashtirishining yuragi va React/zamonaviy JS sintaksisining poydevori.

2. Nazariya — chuqur tushuntirish

2.1. Obyekt yaratish va murojaat

const user = {
  ism: "Ali",            // kalit: qiymat
  yosh: 19,
  faol: true,
  manzil: { shahar: "Toshkent" },   // ichma-ich obyekt (nested)
  salomla() { return `Salom, ${this.ism}`; },  // metod (2.5: this)
};

// Murojaat — ikki usul:
user.ism;              // "Ali" — nuqta (dot) — eng ko'p
user["ism"];           // "Ali" — qavs (bracket) — kalit dinamik bo'lsa
const kalit = "yosh";
user[kalit];           // 19 — dinamik kalit (faqat qavs bilan)
user.manzil.shahar;    // "Toshkent" — ichma-ich

Nuqta vs qavs: odatda nuqta (user.ism). Qavs — kalit o'zgaruvchida bo'lsa (user[kalit]), yoki kalit nostandart (bo'shliqli, raqamli) bo'lsa.

2.2. Qo'shish, o'zgartirish, o'chirish

const user = { ism: "Ali" };

user.yosh = 19;          // qo'shish (yangi kalit)
user.ism = "Vali";       // o'zgartirish
delete user.yosh;        // o'chirish
"ism" in user;           // true — kalit bormi?
user.email ?? "yo'q";    // qiymat yo'q bo'lsa standart (2.1)
user.manzil?.shahar;     // optional chaining — manzil yo'q bo'lsa xato emas, undefined (2.1)

Eslatma 2.1-bob: constli obyektning ichini o'zgartirish mumkin (user.ism = ...), faqat qayta tayinlash taqiqlangan (user = {} ).

Optional chaining ?. 2.1-bob: obj?.x — agar obj undefined/null bo'lsa, xato bermay undefined qaytaradi (Cannot read properties of undefined o'rniga). Ichma-ich, ishonchsiz ma'lumotda (API javobi — 2.11) zanjir qilinadi: data?.user?.manzil?.shahar. ?? "standart" bilan birga juda qulay.

2.3. Shorthand va computed keys (zamonaviy)

const ism = "Ali", yosh = 19;

// Property shorthand — o'zgaruvchi nomi = kalit nomi bo'lsa
const user = { ism, yosh };   // = { ism: ism, yosh: yosh }

// Computed (hisoblangan) kalit — [] ichida ifoda
const kalit = "email";
const obj = { [kalit]: "a@b.uz" };   // { email: "a@b.uz" }

// Metod shorthand (2.1)
const hisob = { qosh(a, b) { return a + b; } };

2.3.1. Getter va setter — "hisoblanadigan" xossalar

get/set — tashqaridan oddiy xossa kabi ko'rinadigan (obj.x, qavssiz), lekin ortida funksiya ishlaydigan kalit. O'qishda get, yozishda set chaqiriladi:

const user = {
  ism: "Ali",
  familiya: "Valiyev",

  // getter — o'qiganda hisoblab beradi (qavssiz: user.toliqIsm)
  get toliqIsm() {
    return `${this.ism} ${this.familiya}`;   // 2.5: this
  },

  // setter — yozganda ajratib joylaydi (user.toliqIsm = "...")
  set toliqIsm(qiymat) {
    [this.ism, this.familiya] = qiymat.split(" ");   // destructuring (2.6)
  },
};

user.toliqIsm;                 // "Ali Valiyev" — getter ishladi (qavs YO'Q!)
user.toliqIsm = "Vali Aliyev"; // setter ishladi
user.ism;                      // "Vali"

Diqqat: toliqIsm — saqlanadigan qiymat emas, har murojaatda qayta hisoblanadi. Foydasi: validatsiya (set ichida tekshirish), formatlash, hosila qiymatlar. JSON.stringify getter qiymatini oladi, lekin setter'ni saqlamaydi 2.11-bob.

2.4. Object'ning asosiy metodlari

const user = { ism: "Ali", yosh: 19, faol: true };

Object.keys(user);     // ["ism", "yosh", "faol"] — kalitlar massivi
Object.values(user);   // ["Ali", 19, true] — qiymatlar massivi
Object.entries(user);  // [["ism","Ali"], ["yosh",19], ...] — juftliklar
Object.assign({}, user); // nusxalash (yuzaki — 2.7)
Object.freeze(user);   // "muzlatadi" — qo'shish/o'zgartirish/o'chirish taqiqlanadi
Object.seal(user);     // "muhrlaydi" — kalit qo'shib/o'chirib bo'lmaydi, mavjudini o'zgartirsa bo'ladi

freeze vs seal: freeze — to'liq qotirish (hech narsa o'zgarmaydi). seal — "yarim": yangi kalit qo'sha/o'chira olmaysiz, lekin mavjud kalit qiymatini o'zgartirsa bo'ladi. Ikkalasi ham yuzaki (faqat birinchi daraja — 2.10). Tekshirish: Object.isFrozen(o), Object.isSealed(o).

Object.entriesning teskarisi — Object.fromEntries: juftliklar massivini qaytadan obyektga aylantiradi. entries → map/filter → fromEntries — obyektni "qayta ishlab", yangi obyekt yasashning kuchli naqshi:

const narx = { non: 3000, sut: 8000, guruch: 25000 };

// Har bir narxni 10% oshirish — obyekt → entries → map → fromEntries
const yangiNarx = Object.fromEntries(
  Object.entries(narx).map(([mahsulot, p]) => [mahsulot, p * 1.1])
);
// { non: 3300, sut: 8800, guruch: 27500 }

// Filtrlash — faqat 5000+ mahsulotlar
const qimmat = Object.fromEntries(
  Object.entries(narx).filter(([, p]) => p >= 5000)
);
// { sut: 8000, guruch: 25000 }

Object.keys/values/entries — obyektni massivga aylantiradi → keyin Array metodlari 2.7-bob bilan ishlash mumkin (juda kuchli naqsh):

// Obyekt bo'ylab "tsikl" (2.2: for...in muqobili)
Object.entries(user).forEach(([kalit, qiymat]) => {
  console.log(`${kalit}: ${qiymat}`);
});

// Qiymatlar yig'indisi
const ball = { mat: 90, fiz: 85, kim: 78 };
const jami = Object.values(ball).reduce((a, b) => a + b, 0);  // 253 (2.7)

2.5. Destructuring — obyektdan qiymat "ajratib olish"

Destructuring — obyekt/massivdan qiymatlarni alohida o'zgaruvchilarga ajratish (zamonaviy JS'ning eng ko'p ishlatiladigan sintaksisi):

const user = { ism: "Ali", yosh: 19, shahar: "Toshkent" };

// ❌ eski usul
const ism1 = user.ism;
const yosh1 = user.yosh;

// ✅ destructuring — bitta qatorda
const { ism, yosh } = user;
console.log(ism, yosh);   // "Ali" 19

// Qayta nomlash (alias)
const { ism: foydalanuvchiIsmi } = user;   // ism → foydalanuvchiIsmi

// Standart qiymat (yo'q bo'lsa)
const { email = "yo'q" } = user;           // "yo'q" (user.email yo'q)

// Ichma-ich destructuring
const { manzil: { shahar } = {} } = user;

2.6. Massiv destructuring

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

const [birinchi, ikkinchi] = ranglar;     // "qizil", "yashil"
const [, , uchinchi] = ranglar;            // "ko'k" (dastlabki ikkitasini o'tkazib yuborish)
const [bosh, ...qolgan] = ranglar;        // bosh="qizil", qolgan=["yashil","ko'k"] (rest)

// Almashtirish (swap) — vaqtinchalik o'zgaruvchisiz!
let a = 1, b = 2;
[a, b] = [b, a];   // a=2, b=1

2.7. Funksiya parametrida destructuring (juda muhim)

Ko'p parametr o'rniga obyekt parametri + destructuring — o'qishli, tartib muhim emas 2.3-bob:

// ❌ ko'p parametr — tartibni eslab qolish kerak
function yaratUser(ism, yosh, shahar, faol) { }
yaratUser("Ali", 19, "Toshkent", true);   // qaysi biri qaysi?

// ✅ obyekt parametri + destructuring — nomlangan, tartibsiz
function yaratUser({ ism, yosh, shahar = "Toshkent", faol = true }) {
  return `${ism}, ${yosh} yosh, ${shahar}`;
}
yaratUser({ yosh: 19, ism: "Ali" });   // tartib muhim emas, standartlar bilan

// React props aynan shunday 11.2-bob:
function Karta({ sarlavha, matn, rang = "ko'k" }) { }

2.8. Spread (...) — yoyish

Spread — obyekt/massivni yoyib, nusxalash yoki birlashtirish (2.7-da ko'rdik):

// Massiv (2.7)
const a = [1, 2], b = [3, 4];
const birlashgan = [...a, ...b];        // [1,2,3,4]
const nusxa = [...a];                    // [1,2] (yangi massiv — immutability)
const yangi = [...a, 5];                 // [1,2,5] (push o'rniga — 2.7)

// Obyekt
const user = { ism: "Ali", yosh: 19 };
const nusxaUser = { ...user };           // {ism:"Ali", yosh:19} (yangi)
const yangilangan = { ...user, yosh: 20 }; // {ism:"Ali", yosh:20} (yosh o'zgardi)
const qoshilgan = { ...user, faol: true }; // yangi kalit qo'shildi
// ❗ keyingi kalit oldingini YENGADI — yangilash shunga asoslangan

Spread — immutability'ning quroli (2.7, React — 11): asl obyektni buzmasdan, yangi (o'zgargan nusxa) yaratish. {...user, yosh: 20} — "user'ning nusxasi, lekin yosh boshqacha".

2.8b. Sayoz (Shallow) vs Chuqur (Deep) nusxalash va structuredClone()

Spread operatori ({ ...obj }) va Object.assign() — bu sayoz nusxa (shallow copy). Ya'ni ular faqat 1-darajali kalitlarni nusxalaydi; ichma-ich joylashgan obyektlarning esa faqat xotiradagi havolasini (reference) ko'chiradi:

const original = {
  nom: "Smartfon",
  sozlamalar: { rang: "qora", xotira: "128GB" }
};

// ❌ Sayoz nusxalash tuzog'i:
const sayozNusxa = { ...original };
sayozNusxa.sozlamalar.rang = "oq";

console.log(original.sozlamalar.rang); 
// "oq" (!!) — Asl obyekt ham buzildi! Chunki sozlamalar obyekti bitta xotira manzilida turardi.

Bu qanday to'g'ri hal qilinadi?

• Eski, cheklangan usul: JSON.parse(JSON.stringify(obj)) — Date, Map, Set, undefined va funksiyalarni yo'qotib yuboradi yoki qulaydi (aylana havolalarda — circular reference).
• Zamonaviy JavaScript standarti (Node 17+, barcha brauzerlar): structuredClone()!

// ✅ 100% mustaqil, to'liq chuqur nusxa:
const chuqurNusxa = structuredClone(original);
chuqurNusxa.sozlamalar.rang = "ko'k";

console.log(original.sozlamalar.rang); // "oq" — asl obyekt mutlaqo daxlsiz saqlandi!

Murakkab obyektlarni, Redux/Zustand state'larini yoki backend kesh obyektlarini klonlashda har doim structuredClone() ni ishlating.

2.9. Rest (...) — yig'ish (spread'ning aksi)

Bir xil ... belgisi, lekin teskari ish: tarqoq narsalarni yig'adi:

// Funksiyada — argumentlarni massivga (2.3)
function jami(...sonlar) { return sonlar.reduce((a, b) => a + b, 0); }
jami(1, 2, 3);   // 6

// Destructuringda — qolganini yig'adi
const { ism, ...qolganlar } = { ism: "Ali", yosh: 19, faol: true };
// ism="Ali", qolganlar={yosh:19, faol:true}

const [bosh, ...dum] = [1, 2, 3, 4];   // bosh=1, dum=[2,3,4] (2.6)

Spread vs Rest (bir xil ...): Spread — yoyadi (chiqarishda: [...arr], {...obj}, f(...args)). Rest — yig'adi (qabulda: function f(...args), const {a, ...rest} = obj). Kontekst farqlaydi.

2.10. Shallow vs Deep copy (nusxalashning tuzog'i)

Spread va Object.assign — yuzaki (shallow) nusxa: faqat birinchi daraja nusxalanadi, ichma-ich obyektlar havola bo'lib qoladi:

const asl = { ism: "Ali", manzil: { shahar: "Toshkent" } };
const nusxa = { ...asl };

nusxa.ism = "Vali";              // ✅ asl o'zgarmaydi (birinchi daraja)
nusxa.manzil.shahar = "Samarqand"; // ❌ ASL HAM o'zgardi! (ichma-ich havola)
console.log(asl.manzil.shahar);  // "Samarqand" (!!)

Chuqur (deep) nusxa kerak bo'lsa:

const chuqur = structuredClone(asl);   // zamonaviy, eng yaxshi yo'l
// yoki (oddiy, lekin cheklangan): JSON.parse(JSON.stringify(asl))

Bu — yashirin bug manbai. Ichma-ich obyektli ma'lumotni "nusxaladim" deb o'ylab, aslida havolani ulashasiz. React state'da bu juda muhim (11).

2.11. JSON — obyekt ↔ matn (0.4 bilan bog'liq)

API'lar ma'lumotni JSON (matn) sifatida yuboradi 0.4-bob. Obyekt ↔ JSON:

const user = { ism: "Ali", yosh: 19 };

const matn = JSON.stringify(user);   // '{"ism":"Ali","yosh":19}' (obyekt → matn)
const qayta = JSON.parse(matn);      // {ism:"Ali", yosh:19} (matn → obyekt)

// stringify — chiroyli (2 bo'shliq bilan)
JSON.stringify(user, null, 2);

fetch (0.4, 2.17) javobini JSON.parse (yoki res.json()) bilan obyektga aylantirasiz; yuborishda JSON.stringify.

2.12. V8 dvigatelining ichki tuzilishi: Hidden Classes (Shapes) va Inline Caching (IC)

JavaScriptda obyektlar dinamik xesh-jadval kabi ishlaydi (obj.x). Agar har safar xususiyat o'qilganda haqiqiy xesh qidiruv bajarilsa, JavaScript juda sekin bo'lib qolardi.

V8 dvigateli buni bartaraf etish uchun har bir obyektga orqa fonda Hidden Class (Shape) biriktiradi:

  const p1 = {};          → Shape C0 (bo'sh)
  p1.x = 1;               → Shape C1 (x xotiradagi 0-offsetda)
  p1.y = 2;               → Shape C2 (y xotiradagi 1-offsetda)

Xatolar va Natijalar:

1. Initsializatsiya tartibining buzilishi:

   js

   const a = {}; a.x = 1; a.y = 2; // Shape ketma-ketligi: C0 -> C1 -> C2
   const b = {}; b.y = 2; b.x = 1; // Shape ketma-ketligi: C0 -> C3 -> C4 (Boshqa Shape!)

   Garchi a va b bir xil xususiyatlarga ega bo'lsa-da, ularning Shape'lari har xil.

2. Inline Caching (IC) va Megamorphism: Biror funksiya obyekt xususiyatini o'qiyotganda:

   js

   function masofa(nuqta) {
     return nuqta.x; // V8 bu yerda nuqtaning Shape'ini eslab qoladi
   }

   • Monomorphic (1 ta Shape): Agar funksiya faqat bitta Shape'dagi obyektlarni qabul qilsa, V8 xususiyatni xotiradan to'g'ridan-to'g'ri (C kabi) bir taktda o'qiydi (eng tez).
   • Polymorphic (2–4 ta Shape): Kichik solishtirish jadvali orqali o'qiydi (biroz sekinroq).
   • Megamorphic (5+ ta turli Shape): V8 keshni bekor qiladi va to'liq dinamik qidiruvga tushadi (o'nlab marta sekin).

3. delete obj.x tuzog'i: delete operatori obyektning Shape'ini butunlay buzadi va uni sekin "Dictionary Mode" (oddiy xesh-jadval) ga tushirib yuboradi.

Senior+ amaliy qoidalari:

• Obyekt maydonlarini doim bir xil tartibda yozing yoki darhol literal bilan e'lon qiling: const p = { x: 1, y: 2 };.
• Xususiyatlarni keyinchalik dinamik qo'shishdan qoching — kerakli barcha kalitlarni boshidanoq e'lon qiling (x: 0, y: null).
• Obyekt maydonini o'chirish uchun hech qachon delete obj.x qilmang! O'rniga obj.x = undefined qiling yoki rest/destructuring bilan yangi obyekt oling (const { x, ...toza } = obj).

3. Sintaksis — tez ma'lumotnoma

// Obyekt
const o = { kalit: qiymat, shorthand, [computed]: x, metod() {} };
o.kalit  o["kalit"]  delete o.kalit  "kalit" in o

// Object metodlari
Object.keys(o)  Object.values(o)  Object.entries(o)
Object.fromEntries(juftliklar)   Object.freeze(o)  Object.seal(o)

// Getter / setter
const o = { get x() { return ...; }, set x(v) { ... } };  // o.x (qavssiz)

// Destructuring
const { a, b: alias, c = standart, ...rest } = obj;
const [x, , y, ...dum] = arr;
function f({ a, b = 1 }) {}

// Spread / Rest
[...a, ...b]   { ...o1, ...o2 }   f(...args)     // spread (yoyish)
function f(...args) {}   const {a, ...rest} = o; // rest (yig'ish)

// Nusxa
{ ...o }                  // shallow
structuredClone(o)        // deep

// JSON
JSON.stringify(o)   JSON.parse(matn)

4. Batafsil kod namunalari

Misol 1 — Obyekt va destructuring

const user = {
  id: 1,
  ism: "Ali",
  manzil: { shahar: "Toshkent", tuman: "Yunusobod" },
  qiziqishlar: ["kod", "shaxmat"],
};

// Destructuring + alias + ichma-ich + standart (2.5)
const {
  ism,
  manzil: { shahar },
  email = "yo'q",
  qiziqishlar: [birinchiQiziqish],   // massiv ham (2.6)
} = user;

console.log(ism, shahar, email, birinchiQiziqish);
// "Ali" "Toshkent" "yo'q" "kod"

Misol 2 — Immutable yangilash (React uslubi — 2.8, 2.10)

const user = { ism: "Ali", yosh: 19, sozlama: { til: "uz" } };

// ✅ Yuzaki yangilash — spread
const kattaroq = { ...user, yosh: 20 };   // yosh o'zgardi, asl saqlandi

// ✅ Ichma-ich yangilash — har darajani spread (2.10!)
const yangiTil = {
  ...user,
  sozlama: { ...user.sozlama, til: "en" },  // ichki obyektni ham yangi
};
console.log(user.sozlama.til);    // "uz" (asl o'zgarmadi ✓)

Misol 3 — Object → Array → qayta ishlash (2.4, 2.7)

const ballar = { matematika: 90, fizika: 75, kimyo: 85 };

// Object → entries → Array metodlari (2.7)
const otganlar = Object.entries(ballar)
  .filter(([fan, ball]) => ball >= 80)      // 80+ (2.7)
  .map(([fan, ball]) => `${fan}: ${ball}`)  // formatlash
  .join(", ");
console.log(otganlar);   // "matematika: 90, kimyo: 85"

// O'rtacha (2.4, 2.7)
const ortacha = Object.values(ballar).reduce((a, b) => a + b, 0)
  / Object.values(ballar).length;
console.log(ortacha);    // 83.33...

Misol 4 — Funksiya parametri va rest (2.7, 2.9)

// Obyekt parametri + standart 2.7-bob — React props uslubi
function profil({ ism, yosh, shahar = "Noma'lum", ...qoshimcha }) {
  console.log(`${ism}, ${yosh}, ${shahar}`);
  console.log("Qo'shimcha:", qoshimcha);   // qolgan barcha kalitlar (rest — 2.9)
}
profil({ ism: "Ali", yosh: 19, kasb: "dev", admin: true });
// "Ali, 19, Noma'lum"
// Qo'shimcha: { kasb: "dev", admin: true }

// JSON (2.11)
const matn = JSON.stringify({ ism: "Ali", yosh: 19 });
const obj = JSON.parse(matn);
console.log(obj.ism);   // "Ali"

5. To'g'ri va noto'g'ri holatlar

1) Ichma-ich obyektni shallow nusxalash

// ❌ ichki obyekt havola bo'lib qoladi (2.10)
const nusxa = { ...asl };
nusxa.manzil.shahar = "X";   // asl ham o'zgaradi!

// ✅ ichki darajani ham spread (yoki structuredClone)
const nusxa = { ...asl, manzil: { ...asl.manzil } };

2) Ko'p parametr (destructuring o'rniga)

// ❌ tartibni eslab qolish kerak (2.7)
f(ism, yosh, shahar, faol, admin);

// ✅ obyekt parametri
f({ ism, yosh, shahar, faol, admin });

3) const obyektni qayta tayinlash

// ❌ TypeError (2.1)
const u = { ism: "Ali" };
u = { ism: "Vali" };

// ✅ ichini o'zgartiring yoki let
u.ism = "Vali";   // ✅ (ichi)

4) Mavjud bo'lmagan kalitga murojaat

// ❌ ichma-ich yo'q bo'lsa xato
user.manzil.shahar;   // manzil yo'q bo'lsa → TypeError

// ✅ optional chaining (2.1)
user.manzil?.shahar;

6. Keng tarqalgan xatolar va yechimlari

Xato 1 — Cannot read properties of undefined (reading 'x')

Sababi: ichma-ich obyekt yo'q 2.1-bob. Yechimi: obj?.ichki?.x (optional chaining); destructuringda standart = {}.

Xato 2 — Nusxa o'zgartirilsa, asl ham o'zgardi

Sababi: shallow copy — ichki havola ulashildi 2.10-bob. Yechimi: ichki darajani ham spread, yoki structuredClone.

Xato 3 — JSON.parse xatosi

SyntaxError: Unexpected token ... in JSON

Sababi: noto'g'ri JSON matn 2.11-bob — masalan undefined yoki bo'sh javob. Yechimi: try/catch (2.12-bob) bilan o'rang; javobni tekshiring.

Xato 4 — JSON.stringify ma'lumot yo'qotadi

JSON.stringify({ f: () => {}, d: undefined, s: Symbol() });   // "{}"

Sababi: funksiya, undefined, symbol JSON'ga kirmaydi 2.11-bob. Yechimi: JSON faqat oddiy ma'lumot uchun; murakkab holatda ehtiyot bo'ling.

Xato 5 — Destructuringda undefinedni ochish

const { ism } = undefined;   // ❌ TypeError

Sababi: undefined/nullni destructure qilib bo'lmaydi. Yechimi: standart: const { ism } = user ?? {}.

7. Integratsiya — bu mavzu stack'ning qayerida uchraydi

• React (11): props destructuring (Misol 4), state immutable yangilash (spread — Misol 2), key.
• Redux/Zustand (12): state spread bilan immutable yangilash.
• Array metodlari 2.7-bob: Object.entries → map/filter (Misol 3).
• API/fetch (0.4, 2.17): JSON ↔ obyekt 2.11-bob; javobni destructure.
• Funksiya parametrlari 2.3-bob: obyekt parametri + destructuring.
• Backend (5): so'rov body (JSON), config obyektlar.
• TypeScript (7): interface/type — obyekt shaklini tavsiflaydi.

8. Eng yaxshi amaliyotlar (best practices)

• Destructuring bilan qiymat oling — o'qishli, qisqa 2.5-bob.
• Funksiyaga 3+ parametr o'rniga obyekt parametri + destructuring + standart 2.7-bob.
• Spread bilan immutable yangilash ({...o, kalit: yangi}) — React 2.8-bob.
• Ichma-ich obyektda shallow copy tuzog'ini eslang — structuredClone yoki har darajani spread 2.10-bob.
• ?. va ?? {} bilan undefineddan himoyalaning (2.1, destructuring standarti).
• Object.entries/keys/values + Array metodlari — obyekt qayta ishlash 2.4-bob.
• JSON faqat oddiy ma'lumot uchun — funksiya/undefined yo'qoladi 2.11-bob.
• Shorthand ({ ism, yosh }) ishlating — kamroq takror 2.3-bob.

9. Amaliy loyiha: "Foydalanuvchi Boshqaruv Tizimi (Immutable)"

Obyekt, destructuring va spread/rest'ni to'liq ishlatadigan, immutability'ga rioya qiluvchi tizim.

Maqsad

Obyekt manipulyatsiyasi, destructuring, spread/rest va immutable yangilashni amalda qo'llab, ma'lumotni xavfsiz boshqarish.

Talablar (requirements)

Foydalanuvchilar massivi (har biri ichma-ich manzil va sozlama obyektli) ustida immutable funksiyalar:

1. qoshUser(royxat, user) — yangi foydalanuvchi qo'shadi ([...royxat, user] — asl o'zgarmasin, 2.8).
2. yangilaUser(royxat, id, ozgarishlar) — map + spread bilan faqat mosini yangilaydi (Misol 2, 2.7).
3. ochirUser(royxat, id) — filter bilan o'chiradi 2.7-bob.
4. yangilaSozlama(user, yangiSozlama) — ichma-ich sozlamani immutable yangilaydi (shallow copy tuzog'idan qoching — 2.10).
5. statistika(royxat) — Object.values/reduce bilan jami, o'rtacha yosh, shahar bo'yicha guruh (2.4, 2.7).
6. profilMatni(user) — destructuring (alias, standart, ichma-ich) bilan formatlangan matn (Misol 1).
7. JSON: ro'yxatni JSON.stringify bilan saqlang, JSON.parse bilan qayta o'qing (localStorage g'oyasi — 2.17) 2.11-bob.
8. Tekshiruv: har funksiyadan keyin asl ma'lumot o'zgarmaganini isbotlang (console.log(asl)).

Maslahatlar (hint)

• Immutable qo'shish: [...royxat, user]; o'chirish: filter; yangilash: map + ternary (2.7, Misol 2).
• Ichma-ich yangilash: { ...user, sozlama: { ...user.sozlama, ...yangi } } 2.10-bob.
• Guruhlash: reduce bilan (2.7, Misol 4).
• Destructuringda standart = {} bilan undefineddan himoyalaning 2.5-bob.
• Har o'zgarishdan keyin aslini chiqarib, o'zgarmaganini ko'rsating (immutability isboti).

"Tayyor" mezonlari (acceptance criteria)

• Qo'shish/yangilash/o'chirish — barchasi immutable (asl massiv o'zgarmaydi).
• Ichma-ich sozlama yangilanganda asl buzilmaydi (shallow tuzog'i hal qilingan).
• Statistika Object.values/reduce bilan to'g'ri.
• Profil matni destructuring (alias+standart+ichma-ich) bilan.
• JSON saqlash/o'qish ishlaydi.
• Spread va rest ikkalasi ham ishlatilgan.
• Har funksiyada immutability isboti ko'rsatilgan.

Yechim kodi ataylab berilmagan — bu loyihani o'zingiz yozib ko'ring.

10. Xulosa va keyingi bobga ko'prik

Bu bobda JS'ning ikkinchi asosiy ma'lumot tuzilmasini — obyekt va zamonaviy sintaksisni o'rgandik:

• Obyekt — nom-qiymat juftliklari; nuqta/qavs bilan murojaat; qo'shish/o'zgartirish/delete; Object.keys/values/entries → Array metodlari → fromEntries bilan qaytadan obyekt; freeze/seal; getter/setter.
• Destructuring — qiymatlarni ajratib olish (alias, standart, ichma-ich, massiv); funksiya parametrida (React props).
• Spread (...) — yoyish (nusxa, birlashtirish, immutable yangilash); Rest (...) — yig'ish (argument, qolgan kalitlar).
• Shallow vs deep copy — spread yuzaki; ichma-ich uchun har darajani spread yoki structuredClone.
• JSON — obyekt ↔ matn (stringify/parse) — API bilan 0.4-bob.

Keyingi bob — 2.9-bob: Map, Set, Date. Obyekt va massivdan tashqari, JS yana uch foydali tuzilma beradi: Map (har qanday kalitli "obyekt"), Set (takrorlanmas qiymatlar) va Date (sana/vaqt). Bular maxsus vazifalar uchun obyekt/massivdan qulayroq.

Foydalanilgan rasmiy/ishonchli manbalar

• MDN Web Docs — Working with objects, Object.keys/values/entries
• MDN Web Docs — Destructuring assignment, spread syntax, rest parameters
• MDN Web Docs — structuredClone, JSON.stringify/parse