O'zgaruvchilar — var, let, const va ularning farqi

~15 daq · JavaScript · Kirish va Asoslar

Muammodan boshlaylik

JavaScript da o'zgaruvchi e'lon qilishning uchta usuli bor: var, let, const. Ko'pchilik bularni bir xil deb o'ylaydi — faqat yozilishi boshqacha. Aslida ular juda farq qiladi. Noto'g'ri tanlash — topish qiyin bo'lgan xatolarga olib keladi.

var x = 1;
if (true) {
  var x = 2; // xuddi shu x ni o'zgartirdi!
}
console.log(x); // 2 — kutilmagan natija

Bu xato ko'p dasturchilarni chalg'itgan. let va const aynan shu muammoni hal qilish uchun ES6 (2015) da qo'shilgan.

O'zgaruvchi nima?

O'zgaruvchi — ma'lumotni saqlash uchun nomlangan "quti". Siz qutiga qiymat solasiz, keyin nom orqali o'sha qiymatni olasiz.

Hayotiy o'xshatma: maktab xonasidagi shkaf. Har bir shkafning raqami bor — bu o'zgaruvchi nomi. Ichida kitob, daftar yoki boshqa narsa — bu qiymat. Siz "5-shkaf" desangiz — o'sha shkafning ichidagi narsani olasiz.

const — qulfli shkaf. Bir marta solib, qayta o'zgartirib bo'lmaydi. let — oddiy shkaf. Xohlagan vaqt ichini almashtirish mumkin. var — eski, buzuq shkaf. Ishlaydi, lekin kutilmagan joylarda ochiladi.

var — nima muammo?

var JavaScript ning dastlabki versiyasidan bor. Lekin ikkita jiddiy muammosi bor.

Muammo 1: Function scope, block scope emas

var faqat funksiya ichida cheklangan. if, for, while bloki uni cheklamaydi.

if (true) {
  var name = "Ali"; // var — blok ichida e'lon qilindi
}
console.log(name); // "Ali" — blokdan tashqarida ham ko'rinadi!

let bilan:

if (true) {
  let name = "Ali"; // let — blok ichida cheklangan
}
console.log(name); // ReferenceError: name is not defined

Bu nima uchun muhim? Katta kodda var bilan e'lon qilingan o'zgaruvchi kutilmagan joylarda "ko'rinib" qoladi — xatolarni topish qiyinlashadi.

Muammo 2: Qayta e'lon qilish mumkin

var user = "Ali";
// ... 100 qator kod ...
var user = "Vali"; // xato yo'q! Lekin bu xato — birinchi user yo'qoldi
console.log(user); // "Vali"

let bilan bu xato darhol ko'rinadi:

let user = "Ali";
let user = "Vali"; // SyntaxError: Identifier 'user' has already been declared

let — qachon ishlatiladi?

let — qiymati o'zgarishi mumkin bo'lgan o'zgaruvchilar uchun. Block scope — faqat {} ichida ko'rinadi.

let count = 0;

for (let i = 0; i < 3; i++) { // i faqat for ichida
  count++;
}

console.log(count); // 3
console.log(i);     // ReferenceError: i is not defined

let ni qayta e'lon qilib bo'lmaydi, lekin qiymatini o'zgartirish mumkin:

let score = 0;
score = 10;  // ✅ qiymat o'zgardi
score = 20;  // ✅ yana o'zgardi

let score = 5; // ❌ SyntaxError — qayta e'lon qilib bo'lmaydi

const — qachon ishlatiladi?

const — qiymati o'zgarmaydigan o'zgaruvchilar uchun. E'lon qilingandan keyin qayta tayinlab bo'lmaydi.

const PI = 3.14159;
PI = 3; // ❌ TypeError: Assignment to constant variable

Nima uchun const ko'p ishlatiladi?

Zamonaviy JavaScript da const — standart tanlov. Sababi: o'zgaruvchi o'zgarmasligini bilsangiz — kod o'qish osonlashadi. "Bu qiymat o'zgarmaydi" degan kafolat bor.

Qoida oddiy: avval const ishlatib ko'r. Agar o'zgartirish kerak bo'lsa — let ga o'tkazasiz.

const ob'ekt va massivlar bilan

const o'zgaruvchini qayta tayinlashni taqiqlaydi — lekin ob'ekt yoki massiv ichini o'zgartirish mumkin:

const user = { name: "Ali", age: 25 };
user.age = 26;        // ✅ ichini o'zgartirish mumkin
user.city = "Toshkent"; // ✅ yangi maydon qo'shish mumkin
user = { name: "Vali" }; // ❌ TypeError — qayta tayinlab bo'lmaydi

const colors = ["qizil", "yashil"];
colors.push("ko'k"); // ✅ massivga qo'shish mumkin
colors = [];         // ❌ TypeError — qayta tayinlab bo'lmaydi

Nima uchun shunday? const o'zgaruvchining manzilini qulflaydi — ob'ekt xotirada qayerda turganini. Ob'ektning ichki qiymatlari boshqa joyda saqlanadi, shuning uchun ular o'zgarishi mumkin.

Uchala farqi — jadval

TDZ (Temporal Dead Zone) — let va const e'lon qilinishidan oldin ishlatilsa xato beradi. var esa undefined qaytaradi. Bu haqda keyingi darslarda batafsil.

Qaysi birini tanlash kerak?

1. Avval const ishlatib ko'r
2. Agar qiymat o'zgarishi kerak bo'lsa — let
3. var — hech qachon (eski kod bilan ishlashdan tashqari)

Amalda:

const API_URL = "https://api.example.com"; // o'zgarmaydi — const
const user = { name: "Ali" };              // ob'ekt — const (ichini o'zgartirish mumkin)

let count = 0;                             // o'zgaradi — let
let isLoading = true;                      // o'zgaradi — let

for (let i = 0; i < 10; i++) {            // sikl o'zgaruvchisi — let
  // ...
}

Tez-tez uchraydigan xatolar

const ni e'lon qilmasdan tayinlash:

const x; // ❌ SyntaxError: Missing initializer in const declaration
x = 5;

const e'lon qilingan zahoti qiymat berilishi shart.

var ni for siklida ishlatish:

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// 0, 1, 2 kutiladi — lekin 3, 3, 3 chiqadi

Sababi: var block scope emas — barcha setTimeout callback lari bir xil i ni ko'radi, sikl tugaganda i = 3. let bilan har iteratsiya o'z i siga ega bo'ladi:

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// 0, 1, 2 — to'g'ri natija

const ob'ektni "o'zgarmas" deb o'ylash:

const config = { debug: false };
config.debug = true; // ✅ bu ishlaydi — xato emas!

const faqat qayta tayinlashni taqiqlaydi. Ob'ekt ichini o'zgartirish mumkin. Agar haqiqatan o'zgarmas ob'ekt kerak bo'lsa — Object.freeze() ishlatiladi.

Xulosa

var — eski, function scope, qayta e'lon qilish mumkin. Zamonaviy kodda ishlatilmaydi.

let — block scope, qiymati o'zgarishi mumkin. Sikllar, shartli o'zgaruvchilar uchun.

const — block scope, qayta tayinlab bo'lmaydi. Standart tanlov — avval const, kerak bo'lsa let.

Keyingi dars

3-dars: Ma'lumot turlari — string, number, boolean, null, undefined, symbol, bigint