JavaScript obyekt sintaksisi: shorthand, computed kalitlar va metodlar

Qisqacha: O'zgaruvchi nomi kalit nomi bilan bir xil bo'lsa, { ism: ism } o'rniga { ism } yoziladi — bu property shorthand. Kalit nomi oldindan noma'lum bo'lsa, uni kvadrat qavsda hisoblaysiz: { [kalit]: qiymat } — bu computed kalit. Obyekt ichidagi funksiya — metod, u qisqa shaklda salomBer() { ... } deb yoziladi.

Bu darsda

• Property shorthand bilan obyektni qisqa yoza olasiz.
• Kalit nomini o'zgaruvchidan yoki ifodadan olib, computed kalit yarata olasiz.
• Obyektga metod qo'sha olasiz va uni qisqa shaklda yozasiz.
• Metod ichidagi this nimani bildirishini sodda darajada tushuntira olasiz.
• Ichma-ich obyektni o'zgaruvchilardan tez yig'a olasiz.

Oldin bilishingiz kerak: Obyekt: kalit-qiymat juftliklari, Function expression va arrow funksiyalar, Template literals.

1. Nega bu kerak?

Oldingi darsda obyekt yaratishni, xususiyatni nuqta va kvadrat qavs bilan o'qishni o'rgandik. Endi real vaziyatni ko'raylik. Siz Telegram bot yozyapsiz. Foydalanuvchi ro'yxatdan o'tganda ismi, telefoni va shahri alohida o'zgaruvchilarga tushadi:

const ism = "Malika";
const telefon = "+998 90 123 45 67";
const shahar = "Toshkent";

const foydalanuvchi = {
  ism: ism,
  telefon: telefon,
  shahar: shahar,
};

console.log(foydalanuvchi.shahar); // Toshkent

Kod ishlaydi. Lekin har qatorda bir so'z ikki marta yozilgan: ism: ism, telefon: telefon. Xususiyatlar 10 ta bo'lsa, 20 ta bir xil so'z yozasiz. Ko'z charchaydi, xato ehtimoli oshadi.

Ikkinchi muammo ham bor. Ba'zan kalitning nomi oldindan noma'lum bo'ladi. Masalan, o'qituvchi qaysi fandan baho qo'yishini dastur ishlayotganda tanlaydi. Unda kalit matematika bo'ladimi yoki fizika — oldindan yozib qo'yolmaysiz.

Uchinchisi: obyekt faqat ma'lumot saqlamasdan, ish ham bajara olsa qulay bo'lardi. Masalan, hamyon obyekti o'z balansini o'zi ko'rsatsa.

Zamonaviy JavaScript (2015-yildan beri) uchala muammoga qisqa yozuv beradi. Bu darsda ularni birma-bir ko'ramiz.

2. Property shorthand: { ism }

2.1 Qisqa yozuv

Agar o'zgaruvchi nomi kalit nomi bilan bir xil bo'lsa, ikki nuqta va takrorni tashlab yuborasiz:

const ism = "Malika";
const telefon = "+998 90 123 45 67";
const shahar = "Toshkent";

const foydalanuvchi = { ism, telefon, shahar };

console.log(foydalanuvchi);

Konsolda:

{ ism: 'Malika', telefon: '+998 90 123 45 67', shahar: 'Toshkent' }

Natija oldingi uzun yozuv bilan aynan bir xil. { ism } — bu JavaScript uchun { ism: ism } ning qisqartmasi. U o'zgaruvchi nomini kalit qiladi, o'zgaruvchi qiymatini esa qiymat.

Bu yozuv property shorthand ("xususiyatning qisqa yozuvi") deb ataladi.

Hayotdan o'xshatish: maktab jurnalida "Ism: Malika" o'rniga ustun sarlavhasi "Ism" bo'lsa, har qatorga "Ism:" deb qayta yozmaysiz. Ustun nomi o'zi aytib turadi.

Diqqat: Qisqa yozuvda kalit nomi va o'zgaruvchi nomi harfma-harf bir xil bo'lishi shart. { ism } faqat ism degan o'zgaruvchi bor bo'lsa ishlaydi. Ism yoki ismi bo'lsa — boshqa nom.

2.2 Aralash yozish

Bitta obyektda qisqa va to'liq yozuvni aralashtirish mumkin. Bu real kodda juda ko'p uchraydi:

const ism = "Jasur";
const yosh = 20;

const talaba = {
  ism,
  yosh,
  kurs: 2,
  fakultet: "Axborot texnologiyalari",
};

console.log(talaba.kurs); // 2
console.log(talaba.ism); // Jasur

ism va yosh o'zgaruvchidan olindi. kurs va fakultet uchun alohida o'zgaruvchi yo'q — ular odatdagidek kalit: qiymat bilan yozildi.

Kalitlar obyektda siz yozgan tartibda turadi: avval ism, keyin yosh, keyin qolganlari.

2.3 Funksiyadan obyekt qaytarish

Shorthand eng ko'p ishlatiladigan joy — funksiya parametrlaridan obyekt yasash. Parametr nomi va kalit nomi odatda bir xil bo'ladi:

function talabaYarat(ism, yosh, shahar) {
  return { ism, yosh, shahar };
}

const t1 = talabaYarat("Aziz", 19, "Buxoro");
const t2 = talabaYarat("Nodira", 22, "Namangan");

console.log(t1); // { ism: 'Aziz', yosh: 19, shahar: 'Buxoro' }
console.log(t2.shahar); // Namangan

return { ism, yosh, shahar } — "shu uch parametrdan obyekt yasab qaytar" degani.

Arrow funksiya bilan ham yozsa bo'ladi. Faqat arrow funksiyalar darsidagi qoidani eslang: obyekt qaytarilsa, uni oddiy qavsga o'rash kerak:

const talabaYarat = (ism, yosh) => ({ ism, yosh });

console.log(talabaYarat("Aziz", 19)); // { ism: 'Aziz', yosh: 19 }

Qavssiz yozsangiz (=> { ism, yosh }), JavaScript jingalak qavsni funksiya tanasi deb o'ylaydi va undefined qaytadi.

O'zingiz to'ldiring: const mahsulot = { nom: nom, narx: narx }; ning qisqa shakli — const mahsulot = { nom, };. { shahar } esa { shahar: } ning qisqartmasi.

Tekshirib ko'ring: Konsolda nima chiqadi?

js

const nom = "Somsa";
const narx = 8000;
const taom = { nom, narx, soni: 3 };
console.log(taom.narx * taom.soni);

3. Computed kalitlar: { [kalit]: qiymat }

3.1 Muammo: kalit nomi o'zgaruvchida

O'qituvchi fan nomini tanlaydi, dastur esa { fanNomi: baho } ko'rinishidagi obyekt yasashi kerak. Fan nomi fan o'zgaruvchisida. Birinchi urinish:

const fan = "matematika";
const baho = { fan: 5 };

console.log(baho); // { fan: 5 }

Kutganimiz { matematika: 5 } edi, lekin kalit so'zma-so'z fan bo'lib qoldi. Obyekt literalida ikki nuqtadan oldingi so'z doim tayyor nom sifatida o'qiladi. U o'zgaruvchi sifatida qaralmaydi.

Obyekt darsida buning bir yechimini ko'rgansiz: avval bo'sh obyekt, keyin kvadrat qavs bilan qo'shish:

const fan = "matematika";
const baho = {};
baho[fan] = 5;

console.log(baho); // { matematika: 5 }

Ishlaydi, lekin ikki qadamda. Obyektni bir qatorda yasab bo'lmaydimi?

3.2 Kvadrat qavs obyekt ichida

Bo'ladi. Kalitni obyekt ichida ham kvadrat qavsga olasiz:

const fan = "matematika";
const baho = { [fan]: 5 };

console.log(baho); // { matematika: 5 }

[fan] — "kalit sifatida fan so'zini emas, fan o'zgaruvchisidagi qiymatni ol" degani. Bunday kalit computed kalit ("hisoblanadigan kalit", computed property name) deb ataladi.

Qoidani shunday eslab qoling: kvadrat qavs obyektdan o'qishda ham (baho[fan]), obyektni yasashda ham ({ [fan]: 5 }) bir xil ma'noni beradi — "ichidagini hisobla".

3.3 Qavs ichida istalgan ifoda

Kvadrat qavs ichiga faqat o'zgaruvchi emas, har qanday ifoda yozish mumkin. JavaScript uni hisoblaydi va natijani kalit qiladi:

const valyuta = "usd";

const kurs = {
  [valyuta + "Sotish"]: 12900,
  [`${valyuta}Olish`]: 12750,
};

console.log(kurs); // { usdSotish: 12900, usdOlish: 12750 }

Birinchi kalit + bilan, ikkinchisi template literal bilan yasaldi. Ikkalasi ham valyuta o'zgarsa, o'zi moslashadi.

Kalit har doim satrga aylantiriladi. Son yozsangiz ham:

const xona = { [100 + 5]: "Band" };

console.log(xona); // { '105': 'Band' }

'105' qo'shtirnoqda chiqdi — bu satr ekanini bildiradi. Obyekt kaliti son bo'lib qolmaydi. Bu keyingi darsda kalitlar tartibini o'rganganda muhim bo'ladi.

3.4 Amaliy misol: istalgan maydonni yangilash

Ro'yxatdan o'tish formasini tasavvur qiling. Qaysi maydon o'zgargani — "ism", "telefon" yoki "shahar" — oldindan noma'lum. Bitta funksiya hammasini qila oladi:

function maydonYasa(maydon, qiymat) {
  return { [maydon]: qiymat };
}

console.log(maydonYasa("ism", "Sardor")); // { ism: 'Sardor' }
console.log(maydonYasa("shahar", "Xiva")); // { shahar: 'Xiva' }

Keyinchalik (React bilan formalar yasaganda) aynan shu naqshni ko'p ko'rasiz. React — sayt interfeysini yasash uchun eng mashhur vosita, kursda alohida qism bor. Hozir bilish shart emas.

O'zingiz to'ldiring: const kun = "dushanba"; bo'lsa, { [kun]: "Ingliz tili" } obyektining kaliti — [:dushanba]. { kun: "Ingliz tili" } obyektining kaliti esa — [:kun].

Tekshirib ko'ring: const i = 2; bo'lsa, { ["savol" + i]: "Ha" } qanday obyekt bo'ladi?

4. Metodlar: obyekt ichidagi funksiya

4.1 Metod nima?

Obyekt darsida funksiyani obyekt xususiyatiga qo'yib ko'rgan edik. Qisqa eslatma:

const bot = {
  nom: "IlmHamroh bot",
  salomBer: function () {
    console.log("Assalomu alaykum!");
  },
};

bot.salomBer(); // Assalomu alaykum!

Qiymati funksiya bo'lgan xususiyat — metod (method): obyektga tegishli, u bajara oladigan ish.

Hayotdan o'xshatish: telefon. Uning ma'lumotlari bor — rangi, xotirasi, egasining ismi. Bu xususiyatlar. Va u qila oladigan ishlar bor — qo'ng'iroq qilish, surat olish. Bu metodlar.

Metod oddiy funksiya kabi chaqiriladi, faqat oldida obyekt nomi va nuqta turadi: bot.salomBer().

Maslahat: console.log, mevalar.push("olma"), "salom".toUpperCase() — hammasi tayyor metodlar. Endi o'z metodingizni qisqa va qulay yozishni o'rganamiz.

4.2 Metod shorthand

salomBer: function () { ... } yozuvi uzun. Zamonaviy JavaScript'da ikki nuqta va function so'zi tashlab yuboriladi:

const bot = {
  nom: "IlmHamroh bot",
  salomBer() {
    console.log("Assalomu alaykum!");
  },
  xayrlash() {
    console.log("Xayr, yana keling!");
  },
};

bot.salomBer();
bot.xayrlash();

Konsolda:

Assalomu alaykum!
Xayr, yana keling!

salomBer() { ... } — bu metod shorthand (metodning qisqa yozuvi). U salomBer: function () { ... } bilan deyarli bir xil ishlaydi. Real kodda aynan shu qisqa shakl ishlatiladi.

E'tibor bering: metodlar orasida vergul bor. Metod ham obyektning oddiy xususiyati, shuning uchun xususiyatlar kabi vergul bilan ajratiladi.

Obyektni konsolga chiqarsak, Node metodni shunday ko'rsatadi:

const bot = {
  nom: "IlmHamroh bot",
  salomBer() {
    console.log("Salom!");
  },
};

console.log(bot);

Konsolda:

{ nom: 'IlmHamroh bot', salomBer: [Function: salomBer] }

[Function: salomBer] — "bu yerda funksiya bor, nomi salomBer". Brauzer konsolida ƒ salomBer() ko'rinishida chiqadi — ma'nosi bir xil.

4.3 Parametr va return bilan metod

Metod — oddiy funksiya. Unga parametr berish va undan qiymat qaytarish mumkin:

const kalkulyator = {
  qosh(a, b) {
    return a + b;
  },
  kopaytir(a, b) {
    return a * b;
  },
};

console.log(kalkulyator.qosh(15000, 3000)); // 18000
console.log(kalkulyator.kopaytir(8000, 3)); // 24000

Bir-biriga yaqin funksiyalarni bitta obyekt ichiga yig'ish kodni tartibli qiladi. kalkulyator.qosh o'qilganda darhol tushuniladi: bu kalkulyatorning qo'shish amali.

4.4 Metod ichida this — birinchi tanishuv

Ko'pincha metod o'z obyektining ma'lumotlari bilan ishlaydi. Masalan, hamyon o'z balansini ko'rsatishi kerak:

const hamyon = {
  egasi: "Jasur",
  balans: 50000,
  korsat() {
    console.log(`${this.egasi}: ${this.balans} so'm`);
  },
  toldir(summa) {
    this.balans += summa;
  },
};

hamyon.korsat();
hamyon.toldir(20000);
hamyon.korsat();

Konsolda:

Jasur: 50000 so'm
Jasur: 70000 so'm

Yangi so'z: this (inglizchada "bu"). Metod ichida this — metod chaqirilgan obyekt. hamyon.korsat() deb chaqirdik — nuqtadan oldin hamyon turibdi, demak this — hamyon. Shuning uchun this.balans — hamyon.balans bilan bir xil.

O'zbekchada "o'zim" so'ziga o'xshaydi. Hamyon "mening balansim" deydi — boshqa hamyonniki emas.

Nega hamyon.balans deb to'g'ridan-to'g'ri yozmadik? Chunki obyektning nomi o'zgarishi mumkin, yoki bir xil metod bir nechta obyektda ishlatiladi. this esa har doim "meni chaqirgan obyekt"ni ko'rsatadi.

Diqqat: Hozircha bitta sodda qoidani biling: metod obyekt.metod() shaklida chaqirilsa, ichidagi this — o'sha obyekt. this ning to'liq qoidalari ancha murakkab (masalan, arrow funksiyada u boshqacha ishlaydi). Ularni this: to'rt qoida darsida batafsil o'rganamiz.

Tekshirib ko'ring: const mashina = { model: "Cobalt", tanishtir() { return "Men " + this.model; } }; bo'lsa, mashina.tanishtir() nima qaytaradi?

4.5 Metod nomi ham computed bo'lishi mumkin

Computed kalit metodlarda ham ishlaydi. Bu kamroq uchraydi, lekin bilib qo'ying:

const amal = "qosh";

const hisob = {
  [amal](a, b) {
    return a + b;
  },
};

console.log(hisob.qosh(2, 3)); // 5

[amal] hisoblandi va metod nomi qosh bo'ldi.

5. Hammasi birga: ichma-ich obyekt yig'ish

Real loyihada obyekt ko'pincha ichma-ich bo'ladi. Obyekt darsida ko'rganingizdek, xususiyat qiymati boshqa obyekt yoki massiv bo'lishi mumkin. Shorthand bu yerda ham ishlaydi — ichki obyektda ham:

const ism = "Dilnoza";
const telefon = "+998 90 123 45 67";
const shahar = "Samarqand";
const tuman = "Urgut";

const buyurtma = {
  raqam: 1024,
  mijoz: { ism, telefon },
  manzil: { shahar, tuman },
  taomlar: ["osh", "non"],
};

console.log(buyurtma);
console.log(buyurtma.mijoz.ism);

Konsolda:

{
  raqam: 1024,
  mijoz: { ism: 'Dilnoza', telefon: '+998 90 123 45 67' },
  manzil: { shahar: 'Samarqand', tuman: 'Urgut' },
  taomlar: [ 'osh', 'non' ]
}
Dilnoza

Obyekt uzun bo'lgani uchun Node uni bir necha qatorga bo'lib chiqardi. Bu faqat ko'rinish, obyekt o'zi o'zgarmadi.

Metod ichma-ich ma'lumotni ham this orqali o'qiy oladi:

const buyurtma = {
  mijoz: { ism: "Dilnoza" },
  manzil: { shahar: "Samarqand", tuman: "Urgut" },
  yorliq() {
    const m = this.manzil;
    return `${this.mijoz.ism}: ${m.shahar}, ${m.tuman}`;
  },
};

console.log(buyurtma.yorliq()); // Dilnoza: Samarqand, Urgut

Maslahat: yorliq() har safar qavs bilan chaqiriladi. JavaScript'da yana bir imkoniyat bor — getter: u qavssiz o'qiladigan, lekin ortida funksiya ishlaydigan xususiyat (get yorliq() { ... } deb yoziladi va buyurtma.yorliq deb o'qiladi). Uni Getter va setter darsida o'rganamiz. Hozir bilish shart emas.

Tekshirib ko'ring: Yuqoridagi buyurtma uchun buyurtma.manzil.tuman va buyurtma.taomlar[1] nima beradi?

6. Ko'p uchraydigan xatolar

6.1 Shorthand uchun o'zgaruvchi yo'q

const ism = "Ali";
const talaba = { ism, telefon };

ReferenceError: telefon is not defined

Tarjimasi: "telefon aniqlanmagan". { telefon } — bu { telefon: telefon } degani, JavaScript esa telefon o'zgaruvchisini qidiradi. Topmasa — xato. Tuzatish: o'zgaruvchini e'lon qiling yoki to'liq yozing: { ism, telefon: "+998..." }.

6.2 Computed kalitda kvadrat qavsni unutish

const kun = "juma";
const jadval = { kun: "Matematika" };

console.log(jadval); // { kun: 'Matematika' }

Xato chiqmaydi, lekin kalit juma emas, kun bo'lib qoldi. Kalit o'zgaruvchidan olinishi kerak bo'lsa — kvadrat qavs: { [kun]: "Matematika" }.

6.3 Metodlar orasida vergul yo'q

const bot = {
  salomBer() {
    console.log("Salom!");
  }
  xayrlash() {
    console.log("Xayr!");
  }
};

SyntaxError: Unexpected identifier 'xayrlash'

Tarjimasi: "kutilmagan nom: xayrlash". Xato aslida salomBer ning yopuvchi } idan keyin — vergul tushib qolgan. JavaScript } dan keyin vergul yoki obyekt oxirini kutgan edi, yangi nom kelib qoldi. Qoida: ko'rsatilgan so'zdan oldingi qatorni tekshiring. Oddiy xususiyatdan keyin vergul unutilsa ham (nom: "Ali" dan keyin) xuddi shunday xato chiqadi.

6.4 Metodni qavssiz chaqirish

const bot = {
  salomBer() {
    return "Salom!";
  },
};

console.log(bot.salomBer); // [Function: salomBer]
console.log(bot.salomBer()); // Salom!

Qavssiz — metodning o'zi, qavs bilan — uning natijasi. Konsolda [Function: ...] ko'rsangiz, qavsni unutgansiz.

6.5 Metodni arrow funksiya bilan yozish

const talaba = {
  ism: "Malika",
  tanishtir: () => {
    return `Men ${this.ism}man`;
  },
};

console.log(talaba.tanishtir()); // Men undefinedman

Malika o'rniga undefined chiqdi. Sababi: arrow funksiyaning o'z this i yo'q. U this ni tashqaridan oladi, obyektdan emas. Shuning uchun this ishlatadigan metodni arrow bilan yozmang — metod shorthand ishlating: tanishtir() { ... }. Buning to'liq sababi this darsida.

Maslahat: Bu kodni node fayl.js bilan ishga tushirsangiz, yuqoridagi natijani ko'rasiz. Modul faylda (.mjs) esa xato chiqadi: TypeError: Cannot read properties of undefined (reading 'ism'). Ikkalasining sababi bir — arrow metod ichida this obyekt emas.

7. Mashqlar

1-mashq (oson): Qisqa yozing

Quyidagi kodni property shorthand bilan qayta yozing va kitob ni konsolga chiqaring:

const nom = "O'tkan kunlar";
const muallif = "Abdulla Qodiriy";
const yil = 1926;

const kitob = { nom: nom, muallif: muallif, yil: yil, sahifa: 400 };

const nom = "O'tkan kunlar";
const muallif = "Abdulla Qodiriy";
const yil = 1926;

const kitob = { nom, muallif, yil, sahifa: 400 };

console.log(kitob);

{
  nom: "O'tkan kunlar",
  muallif: 'Abdulla Qodiriy',
  yil: 1926,
  sahifa: 400
}

2-mashq (o'rta): Baho yozish funksiyasi

bahoQoy(fan, ball) funksiyasini yozing. U { fanNomi: ball } ko'rinishidagi obyekt qaytarsin. Masalan, bahoQoy("fizika", 5) → { fizika: 5 }.

Ishora: kalit nomi fan parametridan olinadi — computed kalit kerak ([fan]). Obyektni return bilan qaytaring.

Bonus: funksiyani arrow shaklida ham yozing. Obyekt qaytarishdagi qavsni unutmang.

function bahoQoy(fan, ball) {
  return { [fan]: ball };
}

const bahoQoyArrow = (fan, ball) => ({ [fan]: ball });

console.log(bahoQoy("fizika", 5)); // { fizika: 5 }
console.log(bahoQoyArrow("tarix", 4)); // { tarix: 4 }

3-mashq (qiyin): Hamyon

hamyon obyektini yasang:

• egasi — "Sardor", balans — 100000.
• tola(summa) metodi: balans yetarli bo'lsa, summani ayirib true qaytaradi. Yetmasa, balansga tegmasdan false qaytaradi.
• holat() metodi: "Sardor: 100000 so'm" ko'rinishidagi satr qaytaradi.

Metodlarni shorthand bilan yozing, balansni this.balans orqali o'qing. So'ng 30 000 va 90 000 so'mlik to'lovlarni sinab ko'ring.

Ishora: shart uchun if / else, qaytarish uchun return ishlating.

const hamyon = {
  egasi: "Sardor",
  balans: 100000,
  tola(summa) {
    if (summa > this.balans) {
      return false;
    }
    this.balans -= summa;
    return true;
  },
  holat() {
    return `${this.egasi}: ${this.balans} so'm`;
  },
};

console.log(hamyon.tola(30000));
console.log(hamyon.holat());
console.log(hamyon.tola(90000));
console.log(hamyon.holat());

true
Sardor: 70000 so'm
false
Sardor: 70000 so'm

8. Real ishda

Bu darsdagi uchala yozuv zamonaviy JavaScript kodining deyarli har sahifasida uchraydi:

• Serverdan javob qaytarish. Node.js serverida (kursda alohida qism bor) return { user, token } kabi qatorlar juda ko'p: shorthand bilan bir nechta o'zgaruvchi bitta obyektga yig'iladi.
• Formalar. React'da forma maydoni o'zgarganda { [maydon]: qiymat } naqshi bilan qaysi maydon o'zgargani yoziladi.
• Obyekt metodlari. Konfiguratsiya obyektlari, kichik yordamchi "vositalar to'plami" (format.narx(), format.sana()) — hammasi metod shorthand bilan yoziladi.

Intervyuda boshlang'ich darajada "computed property nima?" yoki "{ [a]: 1 } va { a: 1 } farqi nima?" deb so'rashlari mumkin. Endi javob bera olasiz.

Xulosa

• { ism } — { ism: ism } ning qisqartmasi (property shorthand). O'zgaruvchi va kalit nomi bir xil bo'lishi shart.
• { [kalit]: qiymat } — kalit nomi kvadrat qavs ichidagi ifodadan hisoblanadi (computed kalit). Kalit doim satrga aylanadi.
• Qiymati funksiya bo'lgan xususiyat — metod. Qisqa shakli: salomBer() { ... }.
• obyekt.metod() chaqirilganda ichidagi this — o'sha obyekt. Metodni arrow bilan yozmang.
• Xususiyatlar va metodlar orasida vergul bo'lishi shart.

Keyingi dars: Obyekt bo'ylab yurish — obyektdagi barcha kalit va qiymatlarni aylanib chiqish, ularni massivga aylantirish va yana obyektga qaytarishni o'rganamiz.