2.1-bob: JavaScript kirish — o'zgaruvchilar, ma'lumot turlari, operatorlar

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

1. Kirish va motivatsiya

1-QISMda yasagan saytlaringiz chiroyli edi, lekin jonsiz: tugmani bossangiz hech narsa bo'lmaydi, ma'lumot saqlanmaydi, hisob qilmaydi. JavaScript (JS) aynan shu jonni kiritadi — sayt fikrlaydigan, javob beradigan, o'zgaradigan bo'ladi.

JavaScript — bugungi vebning yagona dasturlash tili (brauzerda). Va Node.js 0.7-bob tufayli u serverda ham ishlaydi. Ya'ni bitta til bilan butun stackni yozasiz — bu kitobning butun mantig'i shu. JS — keyingi 15 qismning (Node, React, Next, NestJS...) asosi.

O'xshatish (1.1 davomi): HTML — uy skeleti, CSS — bezak, JavaScript — elektr, suv, eshik mexanizmi. Tugma bossangiz chiroq yonadi, eshik ochiladi — bu JS. Jonsiz uy bilan jonli uy farqi — aynan shu.

Bu bob — 2-QISMning eng asosiy g'ishti. Bu yerda o'rganasiz:

• O'zgaruvchilar (let/const) — ma'lumotni saqlash (0.1: RAM'dagi katak).
• Ma'lumot turlari — son, matn, mantiqiy qiymat, va h.k.
• Operatorlar — hisoblash, taqqoslash, mantiq.
• Va eng muhim "tuzoq"lar: == vs ===, null vs undefined, type coercion.

Bularsiz birorta JS qatori yozib bo'lmaydi.

2. Nazariya — chuqur tushuntirish

2.1. JavaScript nima va qayerda ishlaydi

JavaScript — yuqori darajali, dinamik turlangan, interpretatsiya/JIT-kompilyatsiya qilinadigan dasturlash tili (0.5: V8). U:

• Brauzerda — DOM'ni boshqaradi (0.5, 2.16-bob), sahifani jonlantiradi.
• Node.js'da 0.7-bob — server, fayl, ma'lumotlar bazasi bilan ishlaydi.

JS'ni ikki joyda ishga tushirib ko'rasiz: brauzer konsolida (F12 Console — 0.5) yoki node fayl.js 0.7-bob.

2.2. O'zgaruvchilar — ma'lumotni saqlash

O'zgaruvchi (variable) — ma'lumotga nom berib saqlash (0.1: RAM'dagi nomlangan katak). JS'da uch usul:

let yosh = 19;       // o'zgaradigan qiymat
const ism = "Ali";   // o'zgarmas qiymat (qayta tayinlab bo'lmaydi)
var eski = 5;        // ESKI usul — ishlatma (sabab: 2.7, 2.4-bob)

Oltin qoida: Doim constdan boshlang. Faqat qiymat keyin o'zgarishi kerak bo'lsa — let. varni umuman ishlatmang (nega — 2.7 va 2.4-bob).

Diqqat — const obyekt: const qayta tayinlashni taqiqlaydi, lekin obyekt/massiv ichini o'zgartirishga ruxsat beradi:

js

const user = { ism: "Ali" };
user.ism = "Vali";   //  ishlaydi (ichi o'zgardi)
user = {};           //  TypeError (qayta tayinlash taqiqlangan)

2.3. Ma'lumot turlari (data types)

JS'da 7 ta primitiv tur va obyekt bor:

Primitivlar (oddiy, o'zgarmas qiymatlar):

Obyekt (murakkab, qiymatlar to'plami): object, va uning turlari — array, function (2.7, 2.8-boblar).

2.4. typeof — turni aniqlash (va mashhur bug)

typeof operatori qiymatning turini qaytaradi:

typeof "salom"    // "string"
typeof 42         // "number"
typeof true       // "boolean"
typeof undefined  // "undefined"
typeof {}         // "object"
typeof []         // "object"  (massiv ham obyekt!)
typeof function(){} // "function"
typeof null       // "object"    BUG! (tarixiy xato, tuzatilmaydi)

typeof null === "object" — bu JavaScript'ning mashhur xatosi. null aslida obyekt emas, lekin orqaga moslik uchun bu tuzatilmaydi. Shuning uchun nullni tekshirishda === null ishlating, typeof emas.

2.5. null vs undefined — nozik farq

Ikkalasi ham "qiymat yo'q" degani, lekin maqsadi boshqa:

• undefined — qiymat hali berilmagan (tizim qo'yadi): e'lon qilingan, lekin tayinlanmagan o'zgaruvchi; mavjud bo'lmagan obyekt xususiyati; returnsiz funksiya.
• null — ataylab "bo'sh" deb qo'yilgan (dasturchi qo'yadi): "bu yerda obyekt yo'q".

let x;             // undefined (tizim — qiymat berilmadi)
let y = null;      // null (dasturchi ataylab "bo'sh" dedi)
console.log(x);    // undefined
console.log(y);    // null

Primitiv vs reference — nusxalash farqi. Bu — 7 ta primitiv tur 2.3-bob va obyekt o'rtasidagi eng muhim amaliy farq. Primitivlar qiymat bo'yicha (by value) ko'chiriladi: tayinlaganda nusxa olinadi, ikki o'zgaruvchi bir-biridan mustaqil. Obyekt/massiv esa havola bo'yicha (by reference) ko'chiriladi: ikki o'zgaruvchi bitta obyektga ishora qiladi (0.1: ikkalasi RAM'dagi bir katakka qaraydi).

// PRIMITIV — nusxa olinadi (mustaqil)
let a = 10;
let b = a;      // b ga 10 ning NUSXASI ketdi
b = 99;
console.log(a); // 10   a o'zgarmadi (alohida)

// OBYEKT — havola ko'chadi (bog'liq!)
const x = { ball: 10 };
const y = x;    // y va x — BITTA obyekt (havola)
y.ball = 99;
console.log(x.ball); // 99   x ham o'zgardi (ikkalasi bir obyekt!)

Asosiy saboq: primitivni ko'chirsangiz — mustaqil nusxa; obyekt/massivni ko'chirsangiz — bir xil obyektga ikkita nom. Shuning uchun obyektni === bilan solishtirsangiz, faqat bir xil havola bo'lsa true bo'ladi ({} === {} false, ichidagisi bir xil bo'lsa ham). Nusxa kerak bo'lsa, spread ({...obj}, [...arr]) ishlatiladi (2.7-bobda chuqur).

2.6. Dinamik turlash va type coercion

JS — dinamik turlangan: o'zgaruvchi turi oldindan e'lon qilinmaydi va o'zgarishi mumkin:

let z = 5;        // number
z = "salom";      // endi string — JS ruxsat beradi (TypeScript bunga qarshi — 7-QISM)

Type coercion (turni avtomatik o'zgartirish) — JS turlarni avtomatik moslaydi. Bu — eng ko'p "g'alati" hodisalar manbai:

"5" + 3      // "53"   + matn bilan birlashtiradi (3  "3")
"5" - 3      // 2      - faqat son, ("5"  5)
"5" * "2"    // 10     ikkalasi songa
true + 1     // 2      true  1
[] + []      // ""     bo'sh massivlar  bo'sh matn

Asosiy saboq: + ikki tomonda matn bo'lsa birlashtiradi, son bo'lsa qo'shadi. Boshqa arifmetik (-, *, /) doim songa aylantiradi. Bu chalkashlikni keyinroq === va TypeScript (7-QISM) yengillashtiradi.

Truthy va falsy qiymatlar. Coercion'ning eng muhim ko'rinishi — qiymatni mantiqiy (boolean) holatga aylantirish. if (...) sharti, ternary (? :) va ||/&& operatorlari qiymatni avtomatik true yoki false deb baholaydi. JS'da atigi 8 ta falsy qiymat bor (qolgan hammasi truthy):

if ("salom") { }   // truthy  ishlaydi (bo'sh bo'lmagan matn)
if (0) { }         // falsy  ishlamaydi
if ([]) { }        // truthy!  bo'sh massiv ham obyekt (har qanday obyekt truthy)
if ("0") { }       // truthy!  "0" matn (bo'sh emas), son emas

Boolean("")        // false
Boolean("false")   // true    bo'sh bo'lmagan matn truthy!
Boolean(0)         // false
Boolean({})        // true     har qanday obyekt/massiv truthy

Eng ko'p tuzoq: "0", "false", [], {} — bularning hammasi truthy. Faqat yuqoridagi 8 ta qiymat falsy. Shuning uchun "qiymat bormi?" demoqchi bo'lsangiz, ataylab === null, === undefined yoki ?? 2.7-bob bilan tekshiring — if (qiymat) 0 va ""ni ham yo'q deb hisoblab qo'yadi.

2.7. Operatorlar

Arifmetik:

5 + 2   // 7    qo'shish
5 - 2   // 3    ayirish
5 * 2   // 10   ko'paytirish
5 / 2   // 2.5  bo'lish
5 % 2   // 1    qoldiq (modul — 0.6: FizzBuzz)
5 ** 2  // 25   daraja

Tayinlash:

let n = 5;
n += 3;   // n = n + 3  8
n -= 1;   // 7
n *= 2;   // 14
n++;      // 15 (bittaga oshirish)
n--;      // 14

Taqqoslash — eng muhim qism:

5 === 5      // true    QAT'IY tenglik (tur + qiymat) — DOIM SHUNI ISHLAT
5 === "5"    // false   tur har xil (number vs string)
5 == "5"     // true    BO'SH tenglik (coercion bilan) — ISHLATMA!
5 !== 3      // true    qat'iy teng emas
5 > 3        // true
5 >= 5       // true

=== (qat'iy) vs == (bo'sh): == taqqoslashdan oldin turlarni avtomatik moslaydi (coercion — 2.6), bu kutilmagan natija beradi (0 == "" true, null == undefined true). Har doim === ishlating — bu professional kodning belgisi.

Mantiqiy:

true && false   // false   AND (ikkalasi true bo'lsa)
true || false   // true    OR (bittasi true bo'lsa)
!true           // false   NOT (teskari)

Ternary (shartli) operator — qisqa if/else (2.2-bobda chuqur):

const holat = yosh >= 18 ? "katta" : "kichik";
// agar yosh>=18 bo'lsa "katta", aks holda "kichik"

Zamonaviy operatorlar:

const ism = user?.profil?.ism;        // ?. — optional chaining (yo'q bo'lsa undefined)
const port = config.port ?? 3000;     // ?? — nullish coalescing (null/undefined bo'lsa 3000)

2.8. Template literals — matnga qiymat qo'shish

Backtick (`) bilan matn ichiga qiymat qo'yish (eng qulay usul):

const ism = "Ali", yosh = 19;
const xabar = `Salom, ${ism}! Yoshing ${yosh}.`;  // ${} ichida ifoda
// "Salom, Ali! Yoshing 19."

// Ko'p qatorli matn ham mumkin:
const matn = `Birinchi qator
Ikkinchi qator`;

3. Sintaksis — tez ma'lumotnoma

const ism = "qiymat";        // o'zgarmas
let son = 42;                // o'zgaradigan

typeof qiymat                // tur

x === y                      // qat'iy tenglik (doim shu)
x !== y
a && b   a || b   !a         // mantiqiy
shart ? aQiymat : bQiymat    // ternary
obj?.xususiyat               // optional chaining
qiymat ?? standart           // nullish coalescing

`Matn ${ifoda}`              // template literal

4. Batafsil kod namunalari

Misol 1 — O'zgaruvchilar va turlar

const ism = "Ali";           // string
let yosh = 19;               // number
const talaba = true;         // boolean
let manzil;                  // undefined (qiymat berilmadi — 2.5)
const mashina = null;        // null (ataylab "yo'q" — 2.5)

console.log(typeof ism);     // "string"
console.log(typeof yosh);    // "number"
console.log(typeof manzil);  // "undefined"
console.log(mashina === null); // true (null'ni === bilan tekshir — 2.4)

Misol 2 — Operatorlar va coercion (2.6)

console.log(10 + 5);         // 15  (son + son)
console.log("10" + 5);       // "105"  (matn — birlashtirish! 2.6)
console.log("10" - 5);       // 5   (- songa aylantiradi)
console.log(10 % 3);         // 1   (qoldiq)
console.log(2 ** 10);        // 1024 (0.1: 2 ning darajasi)

// === vs == (2.7)
console.log(5 === 5);        // true
console.log(5 === "5");      // false  (tur har xil)
console.log(5 == "5");       // true   (coercion — ISHLATMA!)

Misol 3 — Template literal va zamonaviy operatorlar

const user = { ism: "Ali", profil: null };

// Template literal (2.8)
console.log(`Foydalanuvchi: ${user.ism}`);  // "Foydalanuvchi: Ali"

// Optional chaining 2.7-bob — profil null bo'lsa, xato emas, undefined
console.log(user.profil?.shahar);           // undefined (qulamaydi!)

// Nullish coalescing (2.7)
const shahar = user.profil?.shahar ?? "Noma'lum";
console.log(shahar);                        // "Noma'lum"

Misol 4 — Kichik amaliy dastur (yosh tekshirgich)

const yosh = 19;
const ism = "Ali";

// ternary bilan holat (2.7)
const holat = yosh >= 18 ? "voyaga yetgan" : "voyaga yetmagan";

// template literal bilan natija (2.8)
const xabar = `${ism}, ${yosh} yoshda — ${holat}.`;
console.log(xabar);  // "Ali, 19 yoshda — voyaga yetgan."

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

1) == ishlatish

//  coercion — kutilmagan natija (2.7)
if (yosh == "18") { }
if (0 == "") { }      // true (!!) — chalkash

//  qat'iy tenglik
if (yosh === 18) { }

2) var ishlatish

//  eski, function-scope, hoisting muammolari (2.4-bob)
var x = 5;

//  const (yoki kerak bo'lsa let)
const x = 5;

3) Hamma joyga let

//  o'zgarmasligi kerak bo'lsa ham let
let PI = 3.14;

//  o'zgarmas — const
const PI = 3.14;

4) nullni typeof bilan tekshirish

//  typeof null === "object" (bug — 2.4)
if (typeof x === "null") { }   // HECH QACHON true bo'lmaydi

// 
if (x === null) { }

6. Keng tarqalgan xatolar va yechimlari

Xato 1 — ReferenceError: x is not defined

Sababi: e'lon qilinmagan o'zgaruvchi ishlatildi (yoki TDZ — 2.4-bob). Yechimi: o'zgaruvchini ishlatishdan oldin const/let bilan e'lon qiling; imloni tekshiring.

Xato 2 — NaN (Not a Number)

console.log("salom" * 2);   // NaN
console.log(Number("abc")); // NaN

Sababi: son bo'lmagan narsa ustida arifmetika 0.1-bob. Yechimi: Number.isNaN(x) bilan tekshiring; kirishni songa to'g'ri aylantiring (Number(x), parseInt(x)).

Xato 3 — undefined kutilmagan joyda

Sababi: mavjud bo'lmagan o'zgaruvchi/xususiyatga murojaat 2.5-bob. Yechimi: ?. (optional chaining) va ?? (nullish) ishlating 2.7-bob; qiymat borligini tekshiring.

Xato 4 — TypeError: Assignment to constant variable

const x = 5;
x = 6;   //  TypeError

Sababi: constni qayta tayinlash 2.2-bob. Yechimi: o'zgarishi kerak bo'lsa let ishlating.

Xato 5 — Coercion tufayli noto'g'ri natija

const jami = "10" + 5;   // "105" emas, 15 kutilgandi

Sababi: foydalanuvchi kiritgan ma'lumot — odatda string 2.6-bob. Yechimi: arifmetikadan oldin Number() bilan aylantiring: Number("10") + 5 15.

7. Integratsiya — bu mavzu stack'ning qayerida uchraydi

• Butun JavaScript (2-QISM): har bir keyingi bob shu asosga quriladi.
• Shart va tsikllar 2.2-bob: operatorlar (===, &&) shartlarda ishlatiladi.
• Funksiyalar 2.3-bob: parametrlar — o'zgaruvchilar.
• Closure, scope 2.4-bob: let/const block scope; var muammolari.
• TypeScript (7-QISM): dinamik turlash 2.6-bob o'rniga statik turlar — coercion bug'larni oldini oladi.
• DOM 2.16-bob: foydalanuvchi kiritgan ma'lumot string — coercion'ni eslang.
• Node/backend (5): so'rov ma'lumotlari 0.4-bob string sifatida keladi.

8. Eng yaxshi amaliyotlar (best practices)

• Doim constdan boshlang, o'zgarishi kerak bo'lsa let. varni umuman ishlatmang 2.2-bob.
• Har doim ===/!== (qat'iy), hech qachon ==/!= 2.7-bob.
• nullni === null bilan tekshiring (typeof emas — 2.4).
• Template literal (`${}`) ishlating, matn birlashtirish (+) o'rniga 2.8-bob.
• ?. va ?? bilan undefined/nulldan himoyalaning 2.7-bob.
• Kirishni aniq turga aylantiring (Number(), String()) — coercion'ga tayanmang 2.6-bob.
• O'zgaruvchi nomlari mazmunli (yosh, userIsmi), x/data emas — camelCase.
• Number.isNaN() bilan NaNni tekshiring (6-bo'lim).

9. Amaliy loyiha: "Shaxsiy Ma'lumot Kartasi va Kalkulyator"

JS asoslarini mustahkamlovchi konsol dasturi (brauzer konsoli yoki Node — 0.7).

Maqsad

O'zgaruvchilar, turlar, operatorlar va template literal'larni amalda qo'llab, ma'lumotni qayta ishlovchi kichik dastur yozish.

Talablar (requirements)

1. Ma'lumot kartasi: ism, yosh, shahar, talabami (boolean) o'zgaruvchilar (to'g'ri turlar va const/let — 2.2, 2.3).
2. Template literal bilan chiroyli "tanishtiruv" matni chiqaring 2.8-bob.
3. Tur tekshirgich: har o'zgaruvchining turini typeof bilan chiqaring; null qo'shib, uni to'g'ri tekshiring 2.4-bob.
4. Mini kalkulyator: ikki son ustida +, −, *, /, % va ** amallarini bajarib, natijalarni chiqaring 2.7-bob.
5. Coercion tajribasi: "5" + 3, "5" - 3, 5 == "5", 5 === "5" natijalarini chiqarib, nega shunday ekanini izohda yozing (2.6, 2.7).
6. Yosh holati: ternary bilan "voyaga yetgan/yetmagan" aniqlang 2.7-bob.
7. (Bonus) ?. va ?? bilan mavjud bo'lmasligi mumkin bo'lgan ma'lumotni xavfsiz o'qing 2.7-bob.

Maslahatlar (hint)

• Brauzer konsoli (F12) yoki node fayl.js 0.7-bob bilan ishga tushiring.
• Foydalanuvchi kiritgan son string bo'lishi mumkin — Number() bilan aylantiring (6-bo'lim).
• typeof null === "object" ekanini ko'rsating va izohlang 2.4-bob.
• Bo'lishda / (kasr) va % (qoldiq) farqini ko'rsating.
• Hamma o'zgaruvchini const qiling, faqat haqiqatan o'zgaradiganni let.

"Tayyor" mezonlari (acceptance criteria)

• Barcha turlar (string, number, boolean, undefined, null) ishlatilgan.
• const/let to'g'ri tanlangan (var yo'q).
• Template literal bilan matn yasalgan.
• typeof natijalari (jumladan null bug) ko'rsatilgan.
• Kalkulyator 6 amalni to'g'ri bajaradi.
• Coercion misollari natijasi va izohi bor.
• Hamma taqqoslash === bilan.

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

10. Xulosa va keyingi bobga ko'prik

Bu bobda JavaScript'ning eng asosiy g'ishtlarini o'rgandik:

• JS — vebning jonlantiruvchi tili; brauzer va Node'da 0.7-bob ishlaydi.
• O'zgaruvchilar: const (birinchi tanlov), let, var. const obyekt ichini o'zgartirishga ruxsat beradi.
• 7 primitiv tur (string, number, boolean, undefined, null, bigint, symbol) + obyekt. typeof null === "object" (bug).
• null (ataylab bo'sh) vs undefined (qiymat berilmagan).
• Dinamik turlash va type coercion ("5"+3="53") — + birlashtiradi, boshqalar songa.
• Operatorlar: arifmetik, === (doim, == emas), mantiqiy, ternary, ?., ??; template literal.

Keyingi bob — 2.2-bob: Shartli operatorlar va tsikllar (for, while, ...). O'zgaruvchi va operatorlarni bildik; endi dasturga qaror qabul qilish (if/else, switch) va takrorlash (for, while) qobiliyatini beramiz — 0.6-bobdagi "uch g'isht" (ketma-ketlik, shart, takror) ning amaliy JS ko'rinishi.

Foydalanilgan rasmiy/ishonchli manbalar

• MDN Web Docs — JavaScript data types and structures, typeof, null/undefined
• MDN Web Docs — let/const/var, expressions and operators, template literals
• MDN Web Docs — optional chaining (?.), nullish coalescing (??)