JavaScript o'zgaruvchilari: let va const

Qisqacha: O'zgaruvchi — qiymatga berilgan nom. const narx = 5000; — qiymati o'zgarmaydigan o'zgaruvchi, let ball = 0; — keyin o'zgarishi mumkin bo'lgan o'zgaruvchi. Standart tanlov — const, qiymat o'zgarishi kerak bo'lsagina let. Nomlar camelCase'da yoziladi: jamiNarx, mijozIsmi.

Bu darsda

• O'zgaruvchi nima ekanini va u qaysi muammoni hal qilishini tushunasiz.
• let va const bilan o'zgaruvchi e'lon qila olasiz, unga qiymat bera olasiz va qiymatini o'zgartira olasiz.
• Qachon const, qachon let tanlashni bilasiz.
• camelCase va UPPER_SNAKE_CASE bilan ma'noli nom bera olasiz.
• O'zgaruvchilar bilan bog'liq 5 ta ko'p uchraydigan xatoni taniysiz.

Oldin bilishingiz kerak: Sintaksis asoslari: ifoda, ko'rsatma va izoh, console API.

1. Nega bu kerak?

Siz choyxona uchun chek chiqaradigan dastur yozyapsiz. Bitta choy — 3000 so'm:

console.log("1 ta choy:", 3000, "so'm");
console.log("2 ta choy:", 3000 * 2, "so'm");
console.log("5 ta choy:", 3000 * 5, "so'm");

Konsolda:

1 ta choy: 3000 so'm
2 ta choy: 6000 so'm
5 ta choy: 15000 so'm

Ishlayapti. Lekin ertaga choy narxi 3500 so'm bo'ldi deylik. Endi 3000 yozilgan hamma joyni topib, tuzatishingiz kerak. Bittasini unutsangiz — chekda eski narx chiqadi.

Ikkinchi muammo ham bor. Oradan bir oy o'tib, faylni ochdingiz va 7000 + 4 * 2500 ni ko'rdingiz. 7000 nima edi? 2500 chi? Eslash qiyin.

Ikkala muammoning yechimi bitta — qiymatga nom berish.

2. O'zgaruvchi nima?

Yuqoridagi dasturni nom bilan qayta yozamiz:

const choyNarxi = 3000;

console.log("1 ta choy:", choyNarxi, "so'm");
console.log("2 ta choy:", choyNarxi * 2, "so'm");
console.log("5 ta choy:", choyNarxi * 5, "so'm");

Konsolda:

1 ta choy: 3000 so'm
2 ta choy: 6000 so'm
5 ta choy: 15000 so'm

Natija o'sha. Lekin endi narx o'zgarsa, faqat birinchi qatorni tuzatasiz. Qolgan hamma joy o'zi yangilanadi. Kodni o'qigan odam ham choyNarxi * 2 ni ko'rib, darhol tushunadi.

O'zgaruvchi (variable) — qiymatga berilgan nom. Nom orqali qiymatni xohlagan joyda ishlatasiz.

Hayotdan o'xshatish: omborxonadagi qutilar. Qutiga "Shakar" deb yorliq yopishtirasiz. Keyin "shakarni olib kel" desangiz, hamma qaysi qutini ekanini biladi — ichini ochib qarash shart emas. O'zgaruvchi — o'sha yorliq, qiymat — qutidagi narsa.

Maslahat: Kompyuter qiymatni xotirada (RAM'da) saqlaydi. O'zgaruvchi nomi — xotiradagi o'sha joyni topish uchun "manzil yorlig'i". RAM haqida Xotira ierarxiyasi darsida gaplashgan edik.

3. E'lon qilish va tayinlash

O'zgaruvchi bilan ikki ish qilinadi. Avval uni yaratamiz, keyin unga qiymat beramiz.

3.1 E'lon qilish

let mijoz;

Bu ko'rsatma yangi o'zgaruvchi yaratadi. Bu e'lon qilish (declaration) deyiladi: let — kalit so'z ("o'zgaruvchi yaratyapman"), mijoz — siz tanlagan nom.

Yorliq tayyor, lekin quti hali bo'sh. Uni konsolga chiqarsak:

let mijoz;
console.log(mijoz); // undefined

undefined — JavaScript'ning maxsus qiymati. Ma'nosi: "qiymat hali berilmagan". U haqida undefined va null darsida batafsil gaplashamiz.

3.2 Tayinlash

let mijoz;
mijoz = "Malika";
console.log(mijoz); // Malika

mijoz = "Malika"; — bu tayinlash (assignment): o'zgaruvchiga qiymat berish.

Diqqat: Dasturlashda = — "teng" degani emas. Matematikadagi x = 5 bu yerda yo'q. JavaScript'da = buyruq: "o'ng tomondagi qiymatni chap tomondagi nomga ber". Uni "tenglik" emas, "ga ber" deb o'qing: "mijoz ga "Malika" ni ber".

Tayinlashda JavaScript avval o'ng tomonni hisoblaydi, keyin natijani nomga beradi:

let jami;
jami = 3000 * 4;
console.log(jami); // 12000

Avval 3000 * 4 hisoblandi — 12000. Keyin 12000 qiymati jami ga berildi.

3.3 Ikkalasi bitta qatorda

Ko'pincha e'lon va tayinlash bitta qatorda yoziladi:

let shahar = "Toshkent";
console.log(shahar); // Toshkent

E'lon qilish paytidagi birinchi qiymat boshlang'ich qiymat deyiladi. Real kodda aynan shu shakl eng ko'p uchraydi.

3.4 O'zgaruvchini ishlatish

O'zgaruvchi nomi ifodaning bir qismi bo'la oladi. JavaScript nomni ko'rganda uning o'rniga qiymatini qo'yadi:

const narx = 8000;
const soni = 3;
console.log("Jami:", narx * soni, "so'm"); // Jami: 24000 so'm

narx * soni → 8000 * 3 → 24000.

Diqqat: Nomni qo'shtirnoqqa olmang. console.log(narx) qiymatni (8000) chiqaradi. console.log("narx") esa narx degan so'zning o'zini chiqaradi. Qo'shtirnoq ichidagi hamma narsa — oddiy matn.

Tekshirib ko'ring: Quyidagi kod nima chiqaradi?

js

const ism = "Jasur";
console.log("ism");
console.log(ism);

4. let: qiymati o'zgaradigan o'zgaruvchi

let bilan yaratilgan o'zgaruvchiga keyin yangi qiymat berish mumkin. Bu qayta tayinlash (reassignment) deyiladi:

let holat = "Buyurtma qabul qilindi";
console.log(holat);

holat = "Taksi yo'lda";
console.log(holat);

holat = "Taksi yetib keldi";
console.log(holat);

Konsolda:

Buyurtma qabul qilindi
Taksi yo'lda
Taksi yetib keldi

E'tibor bering: let faqat birinchi marta yoziladi. Keyingi safar faqat nom va =. Qayta tayinlashda eski qiymat yo'qoladi, o'rnini yangisi egallaydi — xuddi qutidagi narsani almashtirgandek.

4.1 O'z qiymatidan foydalanib yangilash

Ko'pincha yangi qiymat eskisidan hisoblanadi. Masalan, o'yinda ball qo'shiladi:

let ball = 0;
console.log(ball); // 0

ball = ball + 10;
console.log(ball); // 10

ball = ball + 5;
console.log(ball); // 15

ball = ball + 10 matematikada ma'nosiz tuyuladi: son o'ziga teng bo'lib, yana 10 ga ko'p? Lekin = "teng" emas, "ga ber" ekanini eslang. JavaScript buni ikki qadamda bajaradi:

1. O'ng tomonni hisoblaydi: ball + 10 → 0 + 10 → 10.
2. Natijani ball ga beradi. Endi ball — 10.

Bu yozuvning qisqa shakli bor (ball += 10). Uni Arifmetik va tayinlash operatorlari darsida o'rganamiz.

Tekshirib ko'ring: Oxirida pul nechaga teng bo'ladi?

js

let pul = 50000;
pul = pul - 12000;
pul = pul - 8000;

5. const: qiymati o'zgarmaydigan o'zgaruvchi

const so'zi inglizcha "constant" — "o'zgarmas" so'zidan olingan. const bilan yaratilgan o'zgaruvchiga qayta qiymat berib bo'lmaydi:

const tugilganYil = 2005;
tugilganYil = 2006;

TypeError: Assignment to constant variable.

Tarjimasi: "o'zgarmas o'zgaruvchiga qiymat berish" — ya'ni "bunga ruxsat yo'q". Bu xato kod bajarilayotganda, aynan tugilganYil = 2006 qatoriga yetganda chiqadi.

const yorlig'ini qutiga yelim bilan mahkam yopishtirilgan yorliq deb tasavvur qiling. let esa magnitli yorliq — uni boshqa qutiga ko'chirish mumkin.

5.1 const ga darhol qiymat berish shart

const soliqFoizi;

SyntaxError: Missing initializer in const declaration

Tarjimasi: "const e'lonida boshlang'ich qiymat yo'q". Mantiqan to'g'ri: keyin qiymat berib bo'lmasa, uni hozir berish kerak. let bilan esa qiymatsiz e'lon qilish mumkin — u undefined bo'lib turadi.

5.2 const qiymatni emas, yorliqni qotiradi

Bu nozik farq keyingi darslarda muhim bo'ladi, shuning uchun hozirdan bilib qo'ying.

Kursda tez orada obyekt bilan tanishasiz — bir nechta qiymatni bitta joyda saqlaydigan "quti ichidagi quti". Hozir uning ichki tuzilishini tushunish shart emas, faqat natijaga qarang:

const mijoz = { ism: "Ali" };
mijoz.ism = "Vali";
console.log(mijoz.ism); // Vali

const bo'lsa ham, obyekt ichidagi qiymat o'zgardi. Chunki const faqat bitta narsani taqiqlaydi: mijoz yorlig'ini boshqa qutiga ko'chirishni (mijoz = ...). Qutining ichini o'zgartirishni esa taqiqlamaydi.

Kodni so'zma-so'z o'qiymiz: { ism: "Ali" } — ichida ism degan kichik bo'limi bor quti. mijoz.ism — "mijoz qutisidagi ism". Yorliq qutiga yelim bilan yopishgan — uni boshqa qutiga ko'chirib bo'lmaydi. Lekin qutini ochib, ichidagi "Ali" ni "Vali" ga almashtirish mumkin.

Obyektlarni Obyekt: kalit-qiymat juftliklari darsida, ichini ham "muzlatish" usulini esa Obyektni himoyalash darsida o'rganamiz.

6. let yoki const: qaysi birini tanlash?

Qoida oddiy:

1. Doim const dan boshlang.
2. Qiymat keyin o'zgarishi kerakligini bilsangiz — let ishlating.

Nega const standart tanlov? Kodni o'qiyotgan odam const ni ko'rsa, bilib oladi: "bu qiymat pastda o'zgarmaydi". 200 qatorli faylda bu katta yengillik. Tasodifan qiymatni o'zgartirib qo'ysangiz — JavaScript darhol TypeError bilan ogohlantiradi.

Bo'sh joyni to'ldiring. Taksi hisoblagichidagi masofa har daqiqa o'sib boradi. Uni qaysi kalit so'z bilan e'lon qilamiz: masofaKm = 0;

Maslahat: Qaysi birini tanlashga ikkilansangiz, const yozing. Keyin qiymatni o'zgartirishga to'g'ri kelsa, JavaScript TypeError beradi — shunda let ga almashtirasiz. Teskarisi xavfliroq: let qoldirsangiz, hech kim sizni ogohlantirmaydi.

Tekshirib ko'ring: Telegram botdagi foydalanuvchilar soni va botning nomi — qaysi biri let, qaysi biri const?

7. O'zgaruvchiga qanday nom berish kerak?

Sintaksis darsida nom (identifikator) qoidalarini ko'rgan edik: harf, raqam, _, $; raqam bilan boshlanmaydi; bo'sh joy, chiziqcha, apostrof va band so'zlar mumkin emas. Bular — JavaScript talab qiladigan qoidalar.

Endi dasturchilar o'zaro kelishib olgan qoidalarni ko'ramiz. Ularni buzsangiz, kod ishlayveradi. Lekin boshqa dasturchi uni o'qishga qiynaladi.

7.1 camelCase

Nomda bo'sh joy bo'lmaydi. Unda "mijoz ismi" kabi ikki so'zli nomni qanday yozamiz?

JavaScript dasturchilari camelCase usulidan foydalanadi. camelCase — birinchi so'z kichik harf, keyingilari katta harf, tuyaning o'rkachidek. "Camel" inglizchada "tuya" degani: katta harflar tuyaning o'rkachlariga o'xshab turadi.

JavaScript'ning o'z nomlari ham camelCase'da yozilgan. Keyingi darslarda toUpperCase, addEventListener kabi nomlarni ko'rasiz — hammasida bir xil qoida.

7.2 UPPER_SNAKE_CASE: haqiqiy o'zgarmaslar uchun

Ba'zi qiymatlar dastur yozilayotgandayoq ma'lum va hech qachon o'zgarmaydi: soliq foizi, bir kundagi daqiqalar soni, maksimal yuk. Bunday "haqiqiy o'zgarmas"larni hamma harfi katta, so'zlari _ bilan ajratilgan holda yozish odat. Bu UPPER_SNAKE_CASE deyiladi:

const SOLIQ_FOIZI = 12;
const KUNDAGI_DAQIQALAR = 24 * 60;
const MAKSIMAL_YUK_KG = 20;

console.log(KUNDAGI_DAQIQALAR); // 1440

Katta harfli nom o'quvchiga signal beradi: "bu sozlama, uni dastur ichida hisoblamaymiz va o'zgartirmaymiz".

Lekin har bir const ni katta harf bilan yozish shart emas. Dastur ishlayotganda hisoblanadigan qiymat — const bo'lsa ham — camelCase'da qoladi:

const SOLIQ_FOIZI = 12;
const oylik = 5000000;
const soliqSummasi = oylik * SOLIQ_FOIZI / 100;

console.log(soliqSummasi); // 600000

SOLIQ_FOIZI — oldindan ma'lum sozlama. soliqSummasi esa oylikka qarab hisoblangan natija, oylik boshqa bo'lsa u ham boshqa bo'ladi.

7.3 Boshqa uslublar

Dasturlashda yana bir necha uslub bor. Ularni kursda turli joylarda uchratasiz:

PascalCase — camelCase'ning o'zi, faqat birinchi harf ham katta. Klass va React'ni kursda alohida o'rganamiz, hozir bilish shart emas. kebab-case'ni CSS'dan bilasiz (font-size), lekin JavaScript nomida chiziqcha bo'lmaydi.

7.4 Ma'noli nom

Nom qiymat nimani bildirishini aytib tursin.

Ikki amaliy maslahat:

• Nom juda uzun ham bo'lmasin. bugungiKundaSotilganChoylarningUmumiySoni o'rniga bugunSotilganChoy yetarli.
• Birlikni nomga qo'shing: vaqtDaqiqa, vaznKg, narxSom. Bu mayda detal katta xatolardan saqlaydi — masalan, sekund bilan daqiqani aralashtirib yuborishdan.

7.5 Nega hozircha o'zbekcha nomlar?

Kursning dastlabki darslarida nomlarni o'zbekcha yozyapmiz: narx, mijozIsmi. Buning sababi bor.

Kodga qarasangiz, unda ikki xil so'z bor: JavaScript'ning so'zlari (let, const, console) va siz o'ylab topgan nomlar. Ikkalasi ham inglizcha bo'lsa, yangi boshlovchi ularni ajrata olmaydi. "let price dagi price ham JavaScript so'zimi?" degan savol tug'iladi. O'zbekcha nom bilan chegara aniq ko'rinadi: inglizcha — JavaScript'niki, o'zbekcha — sizniki.

Real loyihalarda esa nomlar inglizcha yoziladi: price, userName, totalPrice. Sababi — kodni butun dunyodagi dasturchilar o'qiydi, kutubxonalar ham inglizcha. Kursda bir oz tajriba to'plaganingizdan keyin inglizcha nomlarga o'tamiz. Izohlar esa har doim o'zbekcha qoladi. Nomlash haqida chuqurroq gapni Toza kod: nomlash darsida davom ettiramiz.

Tekshirib ko'ring: Bu nomlarni tuzating: Mijoz_ismi, jaminarx, soliq foizi (bu — o'zgarmas sozlama), x (bu — taksi narxi).

8. Ko'p uchraydigan xatolar

8.1 Nomda xato

const mijozIsmi = "Malika";
console.log(mijozismi);

ReferenceError: mijozismi is not defined

Tarjimasi: "mijozismi aniqlanmagan". E'lon qilingan nom — mijozIsmi (katta I). Katta-kichik harf farqlanadi, shuning uchun JavaScript uchun bu ikki xil nom. Bu xatoni ko'rsangiz, nomni harfma-harf solishtiring.

8.2 let ni ikki marta yozish

let narx = 5000;
let narx = 6000;

SyntaxError: Identifier 'narx' has already been declared

Tarjimasi: "narx nomi allaqachon e'lon qilingan". Bitta nom bitta marta e'lon qilinadi. Qiymatni o'zgartirish uchun let siz yozing: narx = 6000;. Bu SyntaxError bo'lgani uchun fayl umuman ishga tushmaydi.

8.3 const ni o'zgartirishga urinish

const kurs = 12800;
kurs = 12850;

TypeError: Assignment to constant variable.

Qiymat haqiqatan o'zgarishi kerak bo'lsa (masalan, dollar kursi har kuni yangilanadi) — const ni let ga almashtiring. O'zgarmasligi kerak bo'lsa — kodda qayerdadir xato bor, qidiring.

8.4 E'lon qilishdan oldin ishlatish

console.log(shahar);
let shahar = "Samarqand";

ReferenceError: Cannot access 'shahar' before initialization

Tarjimasi: "shahar ga u tayyor bo'lishidan oldin murojaat qilib bo'lmaydi". Kod yuqoridan pastga bajariladi: birinchi qatorda shahar hali yaratilmagan. Qoida: avval e'lon qiling, keyin ishlating. Bu xabar nega aynan shunday ekanini TDZ darsida ko'ramiz.

8.5 Qiymatni tekshirmasdan undefined olish

let yetkazishManzili;
console.log("Manzil:", yetkazishManzili); // Manzil: undefined

Xato chiqmadi, lekin konsolda undefined. Bu — let qiymatsiz e'lon qilinganini, keyin qiymat berish esa unutilganini bildiradi. Konsolda kutilmagan undefined ko'rsangiz, shu o'zgaruvchiga qiymat qayerda berilishini tekshiring.

9. Mashqlar

1-mashq (oson): Mijoz kartasi

Uchta o'zgaruvchi yarating: mijozning ismi (Aziza), shahri (Namangan) va tug'ilgan yili (2003). Qiymatlar o'zgarmaydi — mos kalit so'zni tanlang. Keyin har birini konsolga chiqaring:

Ism: Aziza
Shahar: Namangan
Tug'ilgan yil: 2003

Ishora: console.log ga vergul bilan bir nechta qiymat berish mumkin: console.log("Ism:", ism).

const mijozIsmi = "Aziza";
const shahar = "Namangan";
const tugilganYil = 2003;

console.log("Ism:", mijozIsmi);
console.log("Shahar:", shahar);
console.log("Tug'ilgan yil:", tugilganYil);

Ism: Aziza
Shahar: Namangan
Tug'ilgan yil: 2003

2-mashq (o'rta): Hamyon

Sizda 100000 so'm bor. Avval bozorda 35000 so'mlik meva oldingiz, keyin 12000 so'mga taksiga tushdingiz. Qolgan pulni har qadamdan keyin chiqaring. Bo'sh joylarni to'ldiring:

[___:let] hamyon = 100000;
console.log("Boshida:", hamyon);

hamyon = hamyon - 35000;
console.log("Bozordan keyin:", hamyon);

hamyon = [___:hamyon] - 12000;
console.log("Taksidan keyin:", hamyon);

let hamyon = 100000;
console.log("Boshida:", hamyon);

hamyon = hamyon - 35000;
console.log("Bozordan keyin:", hamyon);

hamyon = hamyon - 12000;
console.log("Taksidan keyin:", hamyon);

Boshida: 100000
Bozordan keyin: 65000
Taksidan keyin: 53000

3-mashq (qiyin): Taksi narxini qayta yozing

Jasurning kodi ishlaydi, lekin uni tushunish qiyin:

const a = 4;
console.log(7000 + a * 2500); // 17000
console.log((7000 + a * 2500) * 12 / 100); // 2040

Bu yerda 7000 — boshlang'ich to'lov, 2500 — har kilometr narxi, 12 — xizmat haqi foizi, a — masofa (km).

Kodni qayta yozing:

1. Boshlang'ich to'lov, km narxi va xizmat foizini UPPER_SNAKE_CASE o'zgarmaslarga oling.
2. Masofaga ma'noli nom bering (birlik bilan).
3. Safar narxini bitta const o'zgaruvchida hisoblang va ikki marta hisoblamang.
4. Natija: Safar: 17000 so'm va Xizmat haqi: 2040 so'm.

const BOSHLANGICH_TOLOV = 7000;
const KM_NARXI = 2500;
const XIZMAT_FOIZI = 12;

const masofaKm = 4;
const safarNarxi = BOSHLANGICH_TOLOV + masofaKm * KM_NARXI;
const xizmatHaqi = safarNarxi * XIZMAT_FOIZI / 100;

console.log("Safar:", safarNarxi, "so'm");
console.log("Xizmat haqi:", xizmatHaqi, "so'm");

Safar: 17000 so'm
Xizmat haqi: 2040 so'm

10. Real ishda

• ESLint (kodni avtomatik tekshiradigan vosita, alohida darsda sozlaymiz) loyihalarda prefer-const qoidasi bilan ishlaydi. let bilan e'lon qilib, uni hech qachon o'zgartirmasangiz, u "const yozing" deb ogohlantiradi.
• Sozlamalar fayli: real loyihalarda UPPER_SNAKE_CASE ko'p uchraydi: MAX_FILE_SIZE, API_URL, TIMEOUT_MS.
• Kod review: hamkasblaringiz birinchi e'tibor beradigan narsa — nomlar. a, data, temp kabi nomlar review'da ko'pincha qaytariladi.
• Intervyu: "let va const farqi nima? const obyektni o'zgartirib bo'ladimi?" — boshlang'ich darajadagi eng ko'p beriladigan savollardan. Endi ikkalasiga ham javob bera olasiz.

Xulosa

• O'zgaruvchi — qiymatga berilgan nom: const narx = 5000;.
• = — "teng" emas, "ga ber": avval o'ng tomon hisoblanadi, keyin nomga beriladi.
• let — qayta tayinlash mumkin; const — mumkin emas va darhol qiymat talab qiladi.
• Standart tanlov — const; qiymat o'zgarishi kerak bo'lsagina let.
• const yorliqni qotiradi, obyekt ichini emas.
• Nomlar: camelCase (jamiNarx), haqiqiy o'zgarmaslar UPPER_SNAKE_CASE (SOLIQ_FOIZI), har doim ma'noli.

Keyingi dars: var va nega undan voz kechildi — eski kodda uchraydigan uchinchi kalit so'zni va uning tuzoqlarini ko'ramiz.