JavaScript obyektlari: kalit-qiymat juftliklari va xususiyatlar

Qisqacha: Obyekt — nomlangan qiymatlar to'plami: { nom: "Choynak", narx: 85000 }. Har bir kalit: qiymat juftligi xususiyat deyiladi. Xususiyat nuqta (mahsulot.narx) yoki kvadrat qavs (mahsulot["narx"]) bilan o'qiladi. Xuddi shu yozuv bilan yangi xususiyat qo'shiladi yoki o'zgartiriladi, delete bilan o'chiriladi. Yo'q xususiyat xato bermaydi — undefined qaytaradi. Xususiyat borligini in yoki Object.hasOwn tekshiradi.

Bu darsda

• {} bilan obyekt yarata olasiz va kalit, qiymat, xususiyat nimaligini tushuntira olasiz.
• Nuqta va kvadrat qavs bilan xususiyatni o'qiy olasiz va qachon qaysi biri kerakligini bilasiz.
• Xususiyat qo'shish, o'zgartirish va delete bilan o'chirishni bilasiz.
• in va Object.hasOwn bilan xususiyat borligini tekshira olasiz.
• Ichma-ich obyektlar va obyektlar massivi bilan ishlay olasiz.

Oldin bilishingiz kerak: Massiv: yaratish va elementga murojaat, Ma'lumot turlari xaritasi, for...of va for...in, Massivda qidirish.

1. Nega bu kerak?

Oldingi darsda massivlar bilan ishlashni yakunladik. Massiv — ro'yxat: bir xil turdagi narsalar ketma-ket turadi. Lekin hamma ma'lumot ro'yxat emas.

Online do'kondagi mahsulot kartochkasini olaylik. Unda nom, narx, omborda nechta qolgani va chegirma bor. Buni massivda saqlab ko'ramiz:

const choynak = ["Choynak", 85000, 12, true];

console.log(choynak[2]); // 12

12 nima? Narxmi, qoldiqmi, kafolat oyimi? Kodni o'qigan odam buni bilmaydi. Tartibni adashtirib, narx o'rniga qoldiqni olish ham oson.

Hayotda bunday ma'lumotni qanday yozamiz? Pasportni eslang: "Familiyasi: Aliyev", "Ismi: Jasur", "Tug'ilgan yili: 2001". Har bir ma'lumotning nomi bor. JavaScript'da shunday nomli ma'lumotlar uchun obyekt ishlatiladi:

const choynak = {
  nom: "Choynak",
  narx: 85000,
  qoldiq: 12,
  chegirmaBor: true,
};

console.log(choynak.qoldiq); // 12

Endi hech qanday taxmin yo'q: choynak.qoldiq — choynakning qoldig'i.

2. Obyekt yaratish

2.1 Literal {}

Obyekt bilan oldingi darslarda qisqacha tanishgansiz — ?. darsida, switch darsidagi obyekt-lug'atda va for...in darsida. Endi uni to'liq o'rganamiz.

Obyekt (object) — nomlangan qiymatlar to'plami. U jingalak qavs { } ichida yoziladi. Bunday yozuv obyekt literali deyiladi — "obyektni to'g'ridan-to'g'ri yozish".

const talaba = {
  ism: "Malika",
  yosh: 20,
  shahar: "Samarqand",
};

Qoidalar:

• Har bir juftlik kalit: qiymat ko'rinishida — orasida ikki nuqta :.
• Juftliklar vergul bilan ajratiladi.
• Oxirgi juftlikdan keyin ham vergul qo'ysa bo'ladi (shahar: "Samarqand",). Bu "osilib turgan vergul" deyiladi. Yangi qator qo'shganda vergulni unutmaslik uchun dasturchilar uni ataylab qo'yishadi.
• Qisqa obyektni bitta qatorda ham yozsa bo'ladi: { ism: "Ali", yosh: 19 }.

2.2 Kalit, qiymat va xususiyat

Uchta atamani ajratib olaylik:

Pasport o'xshatishida: "Ismi" — kalit, "Malika" — qiymat, "Ismi: Malika" qatori — xususiyat. Amalda "ism xususiyati" deganda ko'pincha kalitning nomi nazarda tutiladi.

Siz xususiyat so'zini oldin ham eshitgansiz: satrning length i, funksiyaning name i. Ular ham aynan shu — qiymatga biriktirilgan nomli ma'lumot.

2.3 Qiymat istalgan turda bo'lishi mumkin

Kalit — nom. Qiymat esa har qanday bo'lishi mumkin: satr, son, boolean, null, massiv, hatto boshqa obyekt.

const foydalanuvchi = {
  ism: "Jasur",
  yosh: 24,
  tasdiqlangan: true,
  telefon: null,
  tillar: ["o'zbek", "rus"],
};

console.log(foydalanuvchi);

Konsolda:

{
  ism: 'Jasur',
  yosh: 24,
  tasdiqlangan: true,
  telefon: null,
  tillar: [ "o'zbek", 'rus' ]
}

Node obyektni shunday chiqaradi. Satrlar apostrof bilan ko'rsatiladi. Satr ichida apostrof bo'lsa (o'zbek), qo'shtirnoq bilan. Obyekt uzun bo'lsa, har bir xususiyat alohida qatorda. Brauzer konsolida obyekt ustiga bosib ochiladigan ro'yxat ko'rinishida chiqadi — ma'nosi bir xil.

2.4 Bo'sh obyekt va typeof

Xususiyatsiz obyekt ham bo'ladi — {}. Keyinroq unga xususiyat qo'shib boriladi.

const savat = {};

console.log(savat); // {}
console.log(typeof savat); // object

Tekshirib ko'ring: const kitob = { nom: "O'tkan kunlar", muallif: "Abdulla Qodiriy", yil: 1926 }; obyektida nechta xususiyat bor? yil ning qiymati qaysi turda?

3. Xususiyatni o'qish

3.1 Nuqta bilan

Eng ko'p ishlatiladigan usul — obyekt nomi, nuqta va kalit:

const choynak = { nom: "Choynak", narx: 85000 };

console.log(choynak.nom); // Choynak
console.log(choynak.narx); // 85000
console.log(choynak.narx * 2); // 170000

choynak.narx — "choynakning narxi" deb o'qiladi. Natija oddiy qiymat, uni hisob-kitobda ham, if da ham ishlataverasiz.

3.2 Kvadrat qavs bilan

Ikkinchi usul — kvadrat qavs ichida kalit nomi satr sifatida:

const choynak = { nom: "Choynak", narx: 85000 };

console.log(choynak["nom"]); // Choynak
console.log(choynak["narx"]); // 85000

Natija bir xil. Massivdagi mevalar[0] ga o'xshaydi. Farqi: raqamli indeks o'rnida nom turadi. Qo'shtirnoqqa e'tibor bering: choynak["narx"] — to'g'ri, choynak[narx] — boshqa narsa. Nega boshqa ekanini biroz keyin, kalit o'zgaruvchida bo'lgan holatda ko'ramiz.

3.3 Kalitda bo'sh joy yoki belgi bo'lsa

Kalit oddiy nom bo'lmasligi ham mumkin: bo'sh joyli, defisli yoki apostrofli. Bunday kalit literalda qo'shtirnoq ichida yoziladi. O'qish esa faqat kvadrat qavs bilan bo'ladi:

const buyurtma = {
  "to'lov turi": "Click",
  "yetkazib-berish": true,
  summa: 150000,
};

console.log(buyurtma["to'lov turi"]); // Click
console.log(buyurtma["yetkazib-berish"]); // true
console.log(buyurtma.summa); // 150000

Nuqtadan keyin faqat o'zgaruvchi nomi kabi yozilishi mumkin bo'lgan kalit keladi: harf, raqam, _, $ — bo'sh joy, defis va apostrofsiz. buyurtma.to'lov turi ni JavaScript tushunmaydi.

Maslahat: Iloji bo'lsa, kalitlarni oddiy camelCase'da nomlang: tolovTuri, yetkazibBerish. Qo'shtirnoqli kalitlar asosan tashqaridan kelgan ma'lumotda uchraydi — masalan, boshqa dastur yuborgan javobda.

3.4 Kalit o'zgaruvchida bo'lsa

Kvadrat qavsning asosiy kuchi — ichiga o'zgaruvchi yoki ifoda qo'yish mumkin. Qaysi xususiyat kerakligi dastur ishlayotgan paytda aniqlansa, shu usul ishlatiladi:

const choynak = { nom: "Choynak", narx: 85000, qoldiq: 12 };

let maydon = "narx";
console.log(choynak[maydon]); // 85000

maydon = "qoldiq";
console.log(choynak[maydon]); // 12

choynak[maydon] — "maydon o'zgaruvchisi ichidagi nomli xususiyatni ber". Birinchi safar ichida "narx", ikkinchi safar "qoldiq".

Bu yozuvni for...in darsida ko'rgansiz: narxlar[kalit]. U yerda kalit o'zgaruvchisi har aylanishda yangi nom olgan edi.

Nuqta bilan esa bunday qilib bo'lmaydi. choynak.maydon — "maydon degan nomli xususiyatni ber". Bunday xususiyat yo'q.

Qoida: odatda nuqta ishlating — qisqa va o'qishga qulay. Kvadrat qavs faqat ikki holatda kerak: kalitda maxsus belgi bor yoki kalit o'zgaruvchida.

3.5 Kalit doim satr

Kalitni son qilib yozsangiz ham, JavaScript uni satrga aylantirib saqlaydi:

const xonalar = { 101: "Band", 102: "Bo'sh" };

console.log(xonalar[101]); // Band
console.log(xonalar["101"]); // Band

xonalar[101] va xonalar["101"] — bitta xususiyat. Nuqta bilan esa bo'lmaydi: xonalar.101 — sintaksis xatosi, chunki nom raqam bilan boshlanmaydi.

Tekshirib ko'ring: const t = { ism: "Ali", yosh: 19 }; const k = "ism"; bo'lsa, t[k], t["k"] va t.k nima qaytaradi?

4. Yo'q xususiyat — undefined

Mavjud bo'lmagan xususiyatni so'rasangiz, JavaScript xato bermaydi. Shunchaki undefined qaytaradi:

const choynak = { nom: "Choynak", narx: 85000 };

console.log(choynak.rang); // undefined
console.log(choynak.nrax); // undefined

Birinchi qator tushunarli: choynakning rangi yozilmagan. Ikkinchisi esa xavfli. narx o'rniga nrax deb xato yozdik, lekin JavaScript ogohlantirmadi. Oddiy o'zgaruvchi nomida xato qilsangiz, ReferenceError chiqadi. Obyekt xususiyatida esa — jimgina undefined.

Bu xato keyinroq, boshqa joyda chiqadi. Masalan, choynak.nrax * 2 — NaN. Konsolda kutilmagan undefined yoki NaN ko'rsangiz, avval xususiyat nomlarini harfma-harf tekshiring.

5. Xususiyat qo'shish va o'zgartirish

5.1 O'zgartirish

Xususiyatga yangi qiymat tayinlash — xuddi o'zgaruvchidagidek, = bilan:

const choynak = { nom: "Choynak", narx: 85000 };

choynak.narx = 79000;

console.log(choynak.narx); // 79000

Chegirma boshlandi — narx yangilandi.

5.2 Qo'shish

Yangi xususiyat ham xuddi shu yozuv bilan qo'shiladi. Agar bunday kalit bo'lmasa, JavaScript uni yaratadi:

const choynak = { nom: "Choynak", narx: 85000 };

choynak.rang = "ko'k";
choynak["yetkazib-berish"] = true;

console.log(choynak);

Konsolda:

{ nom: 'Choynak', narx: 85000, rang: "ko'k", 'yetkazib-berish': true }

Bitta qoida: obyekt.kalit = qiymat. Kalit bo'lsa — qiymati almashadi, bo'lmasa — yangi xususiyat paydo bo'ladi.

5.3 const obyekt ham o'zgaradi

choynak const bilan e'lon qilingan, lekin biz uni o'zgartirdik. Qanday qilib?

Massiv darsida const massiv bilan xuddi shuni ko'rgan edik: const faqat o'zgaruvchini boshqa qiymatga ko'chirishni taqiqlaydi. Obyektning ichini "muzlatmaydi". Ichiga qo'shish va o'zgartirish mumkin, butunlay yangi obyekt tayinlash esa mumkin emas:

const choynak = { nom: "Choynak" };

choynak.narx = 85000; // bu mumkin
choynak = { nom: "Piyola" }; // bu — xato

TypeError: Assignment to constant variable.

Tarjimasi: "o'zgarmas o'zgaruvchiga qiymat tayinlash". Ya'ni choynak nomi boshqa obyektga ko'chirilmaydi.

5.4 Dinamik kalit bilan qo'shish

Ro'yxatdan o'tish formasi har bir maydon nomi va qiymatini alohida yuboradi, deylik. Kvadrat qavs bilan ularni obyektga yig'amiz:

const profil = {};

function maydonniSaqla(nomi, qiymati) {
  profil[nomi] = qiymati;
}

maydonniSaqla("ism", "Dilnoza");
maydonniSaqla("shahar", "Farg'ona");

console.log(profil); // { ism: 'Dilnoza', shahar: "Farg'ona" }

Funksiya qaysi maydon kelishini oldindan bilmaydi. profil[nomi] har safar nomi ichidagi kalitni yaratadi.

Tekshirib ko'ring: Quyidagi koddan keyin mijoz qanday ko'rinishda bo'ladi?

js

const mijoz = { ism: "Sardor" };
mijoz.ball = 10;
mijoz.ball = mijoz.ball + 5;
mijoz.ism = "Sardorbek";

6. delete — xususiyatni o'chirish

Xususiyatni butunlay olib tashlash uchun delete operatori bor:

const buyurtma = { taom: "Osh", narx: 45000, promokod: "YOZ25" };

delete buyurtma.promokod;

console.log(buyurtma); // { taom: 'Osh', narx: 45000 }
console.log(buyurtma.promokod); // undefined

Promokod ishlatildi va buyurtmadan o'chirildi. Endi uni o'qisangiz — undefined, xuddi hech qachon bo'lmagandek.

delete kvadrat qavs bilan ham ishlaydi: delete buyurtma["to'lov turi"].

"Unda buyurtma.promokod = undefined deb yozsa ham bo'ladimi?" Yo'q, bu boshqa narsa:

const a = { taom: "Osh", promokod: "YOZ25" };
const b = { taom: "Osh", promokod: "YOZ25" };

delete a.promokod;
b.promokod = undefined;

console.log(a); // { taom: 'Osh' }
console.log(b); // { taom: 'Osh', promokod: undefined }

delete kalitni ham olib tashlaydi. = undefined esa kalitni qoldiradi, faqat qiymatini "bo'sh" qiladi. Bu farq keyingi bo'limda muhim bo'ladi.

7. Xususiyat bormi? in va Object.hasOwn

7.1 Nega undefined bilan solishtirish yetmaydi?

"Xususiyat bormi?" degan savolga buyurtma.promokod !== undefined deb javob berish mumkindek tuyuladi. Lekin oldingi misoldagi b ni eslang. Unda promokod kaliti bor, qiymati esa undefined. !== undefined tekshiruvi bu ikki holatni farqlay olmaydi.

Real misol: so'rovnoma. Foydalanuvchi 2-savolni ko'rdi, lekin javob bermadi. 3-savolga esa umuman yetib bormadi:

const javoblar = { savol1: "ha", savol2: undefined };

console.log(javoblar.savol2); // undefined
console.log(javoblar.savol3); // undefined

Ikkalasi ham undefined. Lekin ma'nosi har xil: "javob bermadi" va "ko'rmadi ham".

7.2 in operatori

in — "ichida". "kalit" in obyekt shu kalit obyektda borligini tekshiradi. Qiymatiga qaramaydi:

const javoblar = { savol1: "ha", savol2: undefined };

console.log("savol2" in javoblar); // true
console.log("savol3" in javoblar); // false

Kalit qo'shtirnoq ichida yoziladi — u satr. Qo'shtirnoqsiz yozsangiz, JavaScript uni o'zgaruvchi deb qidiradi.

7.3 in ning tuzog'i: meros xususiyatlar

in ba'zan kutilmagan javob beradi:

const choynak = { nom: "Choynak" };

console.log("toString" in choynak); // true

Biz toString yozmaganmiz, lekin in "bor" deydi. Sababi: har bir obyekt JavaScript'dan bir nechta tayyor metodni meros qilib oladi. toString — shulardan biri. for...in darsida meros kalitlar haqida ogohlantirgan edik — mana shu.

in obyektning o'z xususiyatlarini ham, meros olganlarini ham ko'radi. Meros qanday ishlashini prototip zanjiri darsida o'rganamiz. Hozircha bitta xulosa: faqat o'zingiz qo'ygan xususiyatni tekshirish uchun boshqa vosita kerak.

7.4 Object.hasOwn — faqat o'z xususiyatlari

Object.hasOwn(obyekt, "kalit") — "bu kalit obyektning o'zidami?" (inglizcha "has own" — "o'zida bor").

const choynak = { nom: "Choynak", chegirma: undefined };

console.log(Object.hasOwn(choynak, "nom")); // true
console.log(Object.hasOwn(choynak, "chegirma")); // true
console.log(Object.hasOwn(choynak, "toString")); // false
console.log(Object.hasOwn(choynak, "rang")); // false

chegirma — true: qiymati undefined, lekin kalit bor. toString — false: u meros, choynakning o'zida emas.

Uch usulni yonma-yon solishtiramiz. Savol: "bu xususiyat choynakning o'zida bormi?"

Zamonaviy kodda tavsiya: Object.hasOwn. U 2022-yilda qo'shilgan. Eski kodda xuddi shu ishni obj.hasOwnProperty("k") qiladi — uni uchratsangiz, ma'nosi bir xil ekanini biling.

Tekshirib ko'ring: const s = { rang: "qizil", soni: 0 }; bo'lsa, "soni" in s, Object.hasOwn(s, "narx") va "toString" in s nima qaytaradi?

8. Ichma-ich obyektlar

Xususiyat qiymati boshqa obyekt ham bo'lishi mumkin. Foydalanuvchi profilida manzil — o'zi alohida ma'lumotlar guruhi:

const profil = {
  ism: "Nodira",
  manzil: {
    viloyat: "Xorazm",
    shahar: "Urganch",
  },
};

console.log(profil.manzil.shahar); // Urganch
console.log(profil["manzil"]["viloyat"]); // Xorazm

profil.manzil.shahar chapdan o'ngga o'qiladi: profil → uning manzil i (obyekt) → uning shahar i. Kvadrat qavslar ham xuddi shunday zanjir bo'ladi. Ichma-ich xususiyatni o'zgartirish ham shunday: profil.manzil.shahar = "Xiva".

Oraliq obyekt yo'q bo'lsa-chi? profil.ish.nomi — profil.ish undefined, undefined ning esa nomi yo'q. Bu TypeError beradi. Bunday joyda ?. yordam beradi: profil.ish?.nomi — undefined, xatosiz.

Maslahat: Node ichma-ich obyektlarni faqat ma'lum chuqurlikkacha ko'rsatadi. Undan chuqurroq qismni [Object] deb qisqartiradi. Bu xato emas, faqat ko'rsatish usuli. Ichma-ich obyektlar bilan ishlashning qisqa usullarini keyingi darsda ko'ramiz.

9. Obyektlar massivi

Real dasturda obyekt kamdan-kam yolg'iz keladi. Odatda obyektlar ro'yxati bo'ladi: do'kondagi mahsulotlar, kanal a'zolari, viloyatlar. Massiv va obyekt birga ishlaydi:

const viloyatlar = [
  { nom: "Xorazm", markaz: "Urganch", yetkazish: 3 },
  { nom: "Qashqadaryo", markaz: "Qarshi", yetkazish: 2 },
  { nom: "Sirdaryo", markaz: "Guliston", yetkazish: 1 },
];

console.log(viloyatlar.length); // 3
console.log(viloyatlar[1].markaz); // Qarshi

viloyatlar[1] — massivning 1-elementi, ya'ni Qashqadaryo obyekti. .markaz — uning xususiyati. Avval massivdan element, keyin obyektdan xususiyat.

Ro'yxat bo'ylab for...of bilan yuramiz:

const viloyatlar = [
  { nom: "Xorazm", markaz: "Urganch", yetkazish: 3 },
  { nom: "Qashqadaryo", markaz: "Qarshi", yetkazish: 2 },
  { nom: "Sirdaryo", markaz: "Guliston", yetkazish: 1 },
];

for (const v of viloyatlar) {
  console.log(`${v.nom} (${v.markaz}) — ${v.yetkazish} kun`);
}

Konsolda:

Xorazm (Urganch) — 3 kun
Qashqadaryo (Qarshi) — 2 kun
Sirdaryo (Guliston) — 1 kun

Oldingi darslardagi qidirish metodlari ham aynan shunday ro'yxatlar uchun yaratilgan:

const viloyatlar = [
  { nom: "Xorazm", markaz: "Urganch", yetkazish: 3 },
  { nom: "Qashqadaryo", markaz: "Qarshi", yetkazish: 2 },
  { nom: "Sirdaryo", markaz: "Guliston", yetkazish: 1 },
];

const topilgan = viloyatlar.find((v) => v.markaz === "Qarshi");
const tezmi = viloyatlar.every((v) => v.yetkazish <= 3);

console.log(topilgan.nom); // Qashqadaryo
console.log(tezmi); // true

10. Qiymat funksiya ham bo'lishi mumkin

Xususiyat qiymati funksiya ham bo'lishi mumkin. Unda xususiyatni qavs bilan chaqirasiz:

const kalkulyator = {
  qosh: (a, b) => a + b,
  ayir: (a, b) => a - b,
};

console.log(kalkulyator.qosh(20000, 5000)); // 25000
console.log(kalkulyator.ayir(20000, 5000)); // 15000

kalkulyator.qosh — funksiya saqlangan xususiyat. kalkulyator.qosh(20000, 5000) — o'sha funksiyani chaqirish. Obyektga tegishli bunday funksiya metod deyiladi.

Endi eng qiziq joyi. Birinchi darsdan beri yozib kelayotgan console.log ni qayta o'qing. console — obyekt. log — uning funksiya saqlagan xususiyati, ya'ni metodi. Math darsidagi Math.max ham xuddi shunday. Siz obyektlardan boshidan beri foydalanib kelyapsiz.

Metodlarni qisqaroq yozish usulini keyingi darsda o'rganamiz.

Tekshirib ko'ring: const t = { salom: () => "Assalomu alaykum" }; bo'lsa, t.salom va t.salom() farqi nima?

11. O'zingiz to'ldiring

Taksi ilovasida safar ma'lumoti obyektda saqlanadi. Bo'sh joylarni to'ldiring:

const safar = {
  haydovchi: "Bekzod",
  "boshlanish nuqtasi": "Chorsu",
  narx: 18000,
};

safar.narx = 21000;         // narxni ______
safar.baho = 5;             // yangi xususiyat ______
delete safar.haydovchi;     // xususiyatni ______
console.log(safar["boshlanish nuqtasi"]);
console.log(Object.hasOwn(safar, "haydovchi"));

• safar.narx = 21000 narxni .
• "boshlanish nuqtasi" ni o'qish uchun nuqta emas, kerak, chunki kalitda bo'sh joy bor.
• Object.hasOwn(safar, "haydovchi") natijasi: .

const safar = {
  haydovchi: "Bekzod",
  "boshlanish nuqtasi": "Chorsu",
  narx: 18000,
};

safar.narx = 21000;
safar.baho = 5;
delete safar.haydovchi;

console.log(safar["boshlanish nuqtasi"]); // Chorsu
console.log(Object.hasOwn(safar, "haydovchi")); // false
console.log(safar.narx); // 21000

12. Ko'p uchraydigan xatolar

12.1 Ikki nuqta o'rniga =

const mahsulot = { nom = "Choynak" };

SyntaxError: Invalid shorthand property initializer

Tarjimasi: "qisqa xususiyat boshlang'ich qiymati noto'g'ri". Xabar g'alati eshitiladi, chunki JavaScript = ni boshqa, hali o'tilmagan yozuv deb tushundi. Sababi oddiy: obyekt ichida kalit va qiymat orasida : bo'ladi, = emas. = faqat obyektdan tashqarida ishlatiladi: mahsulot.nom = "Choynak".

12.2 Vergulni unutish

const mahsulot = {
  nom: "Choynak"
  narx: 85000,
};

SyntaxError: Unexpected identifier 'narx'

Tarjimasi: "kutilmagan nom: narx". Xato narx da emas, undan oldingi qatorda — "Choynak" dan keyin vergul yo'q. JavaScript qiymatdan keyin vergul yoki } kutgan edi, yangi nom esa kutilmagan. Qoida: bunday xatoda ko'rsatilgan joydan oldingi qatorni tekshiring.

12.3 Defisli kalitni nuqta bilan o'qish

const buyurtma = { "yetkazib-berish": true };

console.log(buyurtma.yetkazib-berish);

ReferenceError: berish is not defined

Tarjimasi: "berish aniqlanmagan". Nega aynan berish? JavaScript - ni ayirish operatori deb o'qidi: buyurtma.yetkazib minus berish. buyurtma.yetkazib — undefined, berish degan o'zgaruvchi esa umuman yo'q. Tuzatish: buyurtma["yetkazib-berish"].

12.4 Kvadrat qavsda qo'shtirnoqni unutish

const choynak = { nom: "Choynak", narx: 85000 };

console.log(choynak[narx]);

ReferenceError: narx is not defined

Qo'shtirnoqsiz narx — o'zgaruvchi nomi. JavaScript narx degan o'zgaruvchini qidirdi va topmadi. Tuzatish: choynak["narx"] yoki choynak.narx. Qo'shtirnoqsiz yozish faqat kalit haqiqatan o'zgaruvchida bo'lsa to'g'ri.

12.5 O'zgaruvchidagi kalitni nuqta bilan o'qish

const choynak = { nom: "Choynak", narx: 85000 };
const maydon = "narx";

console.log(choynak.maydon); // undefined

Xato yo'q, lekin natija ham yo'q. choynak.maydon "maydon" nomli xususiyatni qidiradi. Tuzatish: choynak[maydon].

12.6 Yo'q obyektning ichiga qarash

const profil = { ism: "Nodira" };

console.log(profil.manzil.shahar);

TypeError: Cannot read properties of undefined (reading 'shahar')

Tarjimasi: "undefined ning xususiyatlarini o'qib bo'lmaydi (shahar ni o'qishda)". profil.manzil — undefined, chunki profilda manzil yo'q. Tuzatish: profil.manzil?.shahar yoki avval Object.hasOwn(profil, "manzil") bilan tekshiring.

13. Mashqlar

1-mashq (oson): Foydalanuvchi profili

1. profil obyektini yarating: ism — "Jasur", yosh — 22, shahar — "Namangan".
2. Ismini nuqta bilan, shaharini kvadrat qavs bilan chiqaring.
3. Yoshini 23 ga o'zgartiring.
4. Yangi kasb xususiyatini qo'shing: "dasturchi".
5. Butun obyektni chiqaring.

const profil = { ism: "Jasur", yosh: 22, shahar: "Namangan" };

console.log(profil.ism); // Jasur
console.log(profil["shahar"]); // Namangan

profil.yosh = 23;
profil.kasb = "dasturchi";

console.log(profil);

Jasur
Namangan
{ ism: 'Jasur', yosh: 23, shahar: 'Namangan', kasb: 'dasturchi' }

2-mashq (o'rta): Mahsulot kartochkasi

malumotBer(mahsulot, maydon) funksiyasini yozing:

• Agar maydon nomli xususiyat mahsulotning o'zida bo'lsa — uning qiymatini qaytarsin.
• Aks holda — "Ma'lumot yo'q" satrini qaytarsin.

Ishora: kalit o'zgaruvchida — kvadrat qavs kerak. Borligini Object.hasOwn bilan tekshiring.

Sinash uchun: { nom: "Dasturxon", narx: 120000, "o'lcham": "2x3 m" }. "narx", "o'lcham", "rang" va "toString" bilan chaqiring.

function malumotBer(mahsulot, maydon) {
  if (Object.hasOwn(mahsulot, maydon)) {
    return mahsulot[maydon];
  }
  return "Ma'lumot yo'q";
}

const dasturxon = {
  nom: "Dasturxon",
  narx: 120000,
  "o'lcham": "2x3 m",
};

console.log(malumotBer(dasturxon, "narx")); // 120000
console.log(malumotBer(dasturxon, "o'lcham")); // 2x3 m
console.log(malumotBer(dasturxon, "rang")); // Ma'lumot yo'q
console.log(malumotBer(dasturxon, "toString")); // Ma'lumot yo'q

3-mashq (qiyin): Savat hisobi

Savat — obyektlar massivi. Har bir mahsulotda nom, narx va soni bor:

const savat = [
  { nom: "Choy", narx: 25000, soni: 2 },
  { nom: "Shakar", narx: 14000, soni: 1 },
  { nom: "Piyola", narx: 15000, soni: 6 },
];

chekTuz(savat) funksiyasini yozing. U yangi chek obyektini qaytarsin:

• mahsulotlar — mahsulot turlari soni (savat.length);
• jami — hamma mahsulot narxi × soni yig'indisi (for...of bilan);
• bepulYetkazish — jami 200 000 dan katta yoki teng bo'lsa true, aks holda false.

Qo'shimcha: savatdagi har bir mahsulotga summa xususiyatini (narx × soni) qo'shing.

function chekTuz(savat) {
  const chek = {};
  chek.mahsulotlar = savat.length;
  chek.jami = 0;

  for (const m of savat) {
    m.summa = m.narx * m.soni;
    chek.jami += m.summa;
  }

  chek.bepulYetkazish = chek.jami >= 200000;
  return chek;
}

const savat = [
  { nom: "Choy", narx: 25000, soni: 2 },
  { nom: "Shakar", narx: 14000, soni: 1 },
  { nom: "Piyola", narx: 15000, soni: 6 },
];

console.log(chekTuz(savat));
console.log(savat[2].summa);

{ mahsulotlar: 3, jami: 154000, bepulYetkazish: false }
90000

14. Real ishda

Obyekt — JavaScript'dagi eng muhim tuzilma. Deyarli har bir qator ular bilan bog'liq:

• Server bilan ishlash: serverdan keladigan ma'lumot — foydalanuvchi, buyurtma, mahsulot — obyekt ko'rinishida keladi. Bu format JSON deyiladi, uni JSON asoslari darsida o'rganamiz.
• Ma'lumotlar bazasi: baza jadvalidagi har bir qator dasturga obyekt bo'lib keladi: { id: 7, ism: "Ali", email: "..." }.
• Sozlamalar: dasturlar sozlamalari ko'pincha obyektda saqlanadi: { til: "uz", tungiRejim: true }.
• React (sayt yasash uchun mashhur vosita, kursda alohida o'rganamiz): komponentga ma'lumot obyekt orqali uzatiladi.

Xavfsizlik bo'yicha bitta odat: foydalanuvchi yuborgan kalitni tekshirganda in emas, Object.hasOwn ishlating. Aks holda "toString" kabi meros nomlar "mavjud" deb o'tib ketadi — 2-mashqda ko'rganingizdek. Meros bilan bog'liq jiddiyroq hujum ham bor — prototype pollution, uni keyinroq o'rganamiz.

Intervyuda so'raladi: "nuqta va kvadrat qavs farqi nima?", "in va hasOwn farqi nima?", "const obyektni o'zgartirsa bo'ladimi?". Endi uchalasiga ham javob bera olasiz.

Xulosa

• Obyekt — { kalit: qiymat } juftliklari to'plami; har bir juftlik — xususiyat.
• O'qish: obj.kalit (odatda) yoki obj["kalit"] (maxsus belgili kalit yoki kalit o'zgaruvchida bo'lsa).
• obj.kalit = qiymat — bor bo'lsa o'zgartiradi, yo'q bo'lsa qo'shadi; delete obj.kalit — o'chiradi.
• Yo'q xususiyat — undefined, xato emas. Nomdagi xato jim o'tib ketishi mumkin.
• "kalit" in obj meros xususiyatlarni ham ko'radi; Object.hasOwn(obj, "kalit") — faqat o'zinikini.
• Obyekt ichida obyekt, massiv ichida obyekt, qiymat sifatida funksiya bo'lishi mumkin.

Keyingi dars: Shorthand, computed kalitlar va metodlar — obyektni qisqaroq yozish, kalitni hisoblash va metodlarni qulay yozishni o'rganamiz.