JavaScript O'zgaruvchilari (let, const va var)

Agar sizda Javascript muhiti hali yo'q bo'lsa, ushbu qo'llanmani o'qishingizni tavsiya qilaman.

O'zgaruvchilar JavaScript-da ma'lumotlarni saqlash va boshqarish uchun ishlatiladigan asosiy qurilish bloklaridir. O'zgaruvchilarni e'lon qilishning turli usullari - let, const va var ni tushunish samarali va saqlanadigan JavaScript kodini yozish uchun juda muhimdir.

Kirish

JavaScript-da o'zgaruvchilarni e'lon qilishning uch usuli mavjud:

1. let: ES6 (ECMAScript 2015) da joriy etilgan, qayta tayinlanishi mumkin bo'lgan o'zgaruvchilar uchun ishlatiladi.
2. const: Shuningdek, ES6 da joriy etilgan, doimiy qiymatli o'zgaruvchilar uchun ishlatiladi.
3. var: JavaScript-da o'zgaruvchilarni e'lon qilishning asl usuli, ba'zi funksional xususiyatlari tufayli hozirda kamroq ishlatiladi.

Keling, bularning har birini batafsil ko'rib chiqaylik.

let

let sizga foydalanilayotgan blok, ifoda yoki iboraga cheklangan o'zgaruvchilarni e'lon qilish imkonini beradi.

Asosiy xususiyatlari:

1. Blok doirasida
2. Qayta tayinlanishi mumkin
3. Bir xil doirada qayta e'lon qilinishi mumkin emas
4. Yuqoriga ko'tarilmaydi (hoisted emas)

Misol:

let x = 10;
x = 20; // Bu ruxsat etilgan

if (true) {
  let y = 30; // y faqat ushbu blok ichida mavjud
  console.log(y); // Natija: 30
}
console.log(y); // ReferenceError: y aniqlanmagan

let x = 40; // SyntaxError: 'x' identifikatori allaqachon e'lon qilingan

const

const qiymati o'zgarmasligi kerak bo'lgan o'zgaruvchilarni e'lon qilish uchun ishlatiladi. U ham let kabi blok doirasida.

Asosiy xususiyatlari:

1. Blok doirasida
2. Qayta tayinlanishi mumkin emas
3. Qayta e'lon qilinishi mumkin emas
4. E'lon qilinish paytida inizializatsiya qilinishi kerak
5. Yuqoriga ko'tarilmaydi (hoisted emas)

Misol:

const PI = 3.14159;
PI = 3.14; // TypeError: Doimiy o'zgaruvchiga tayinlash

const FOYDALANUVCHI = {ism: "John"};
FOYDALANUVCHI.ism = "Jane"; // Bu ruxsat etilgan (xususiyatlarni o'zgartirish)
FOYDALANUVCHI = {ism: "Jane"}; // TypeError: Doimiy o'zgaruvchiga tayinlash

const RANGLAR; // SyntaxError: const e'lonida inizializator yo'q

Eslatma: const o'zgaruvchining o'zini qayta tayinlashni oldini olsa-da, uning qiymatini o'zgarmas qilmaydi. Obyektlar va massivlar uchun xususiyatlar yoki elementlar hali ham o'zgartirilishi mumkin.

var

var JavaScript-da o'zgaruvchilarni e'lon qilishning eng qadimgi usuli. Uning ba'zi xatti-harakatlari kutilmagan natijalarga olib kelishi mumkin, shuning uchun hozirda let va const afzal ko'riladi.

Asosiy xususiyatlari:

1. Funksiya yoki global doirada
2. Qayta tayinlanishi mumkin
3. Qayta e'lon qilinishi mumkin
4. O'z doirasining yuqori qismiga ko'tariladi (hoisted)

Misol:

var x = 10;
var x = 20; // Bu ruxsat etilgan

function misol() {
  var y = 30;
  if (true) {
    var y = 40; // Yuqoridagi bilan bir xil o'zgaruvchi
    console.log(y); // Natija: 40
  }
  console.log(y); // Natija: 40
}

console.log(z); // Natija: undefined (xato emas)
var z = 50;

Taqqoslash

Mana let, const va var ning tezkor taqqoslashi:

Eng yaxshi amaliyotlar

1. Standart bo'yicha const dan foydalaning. Bu sizning maqsadlaringizni aniq ko'rsatadi va tasodifiy qayta tayinlashlarning oldini oladi.
2. O'zgaruvchi qiymati o'zgarishini bilganingizda let dan foydalaning.
3. Zamonaviy JavaScript kodida var dan foydalanishdan qoching.
4. Yaxshiroq o'qilishi uchun o'zgaruvchilarni ularning doirasi boshida e'lon qiling.
5. Kodingizni o'z-o'zidan hujjatlashtirish uchun tavsiflovchi o'zgaruvchi nomlaridan foydalaning.

Umumiy qiyinchiliklar va tuzog'lar

Vaqtinchalik O'lik Zona (TDZ)

let va const ikkalasi ham Vaqtinchalik O'lik Zonaga tegishli. Bu shuni anglatadiki, siz bu o'zgaruvchilarga ularning e'lon qilinishidan oldin kira olmaysiz:

console.log(x); // ReferenceError: 'x' ga inizializatsiyadan oldin kirish mumkin emas
let x = 10;

var yuqoriga ko'tarilishi

var e'lonlari o'z doirasining yuqori qismiga ko'tariladi, bu kutilmagan xatti-harakatlarga olib kelishi mumkin:

console.log(x); // Natija: undefined
var x = 10;

// Yuqoridagi quyidagicha talqin qilinadi:
var x;
console.log(x);
x = 10;

Blok doirasi va Funksiya doirasi

let va const blok doirasida, var esa funksiya doirasida:

if (true) {
  var x = 10;
  let y = 20;
  const z = 30;
}
console.log(x); // Natija: 10
console.log(y); // ReferenceError: y aniqlanmagan
console.log(z); // ReferenceError: z aniqlanmagan

Tez-tez so'raladigan savollar

1. S: let va const ni qachon ishlatishim kerak? J: O'zgaruvchi qayta tayinlanmaydigan bo'lsa const ni, aks holda let ni ishlating. Qoida sifatida, const dan boshlang va kerak bo'lsa let ga o'zgartiring.
2. S: let, const va var o'rtasida ishlash farqi bormi? J: Zamonaviy JavaScript dvigatellarida sezilarli ishlash farqi yo'q. Tanlashni doira va o'zgaruvchanlik ehtiyojlariga asoslanib, ishlash tezligiga emas.
3. S: let va const ni eski brauzerlardan foydalana olamanmi? J: Eski brauzerlar let va const ni qo'llab-quvvatlamasligi mumkin. Agar siz bu brauzerlarni qo'llab-quvvatlashingiz kerak bo'lsa, kodingizni ES5 ga aylantirish uchun Babel kabi transpilerdan foydalaning.
4. S: Nima uchun var zararli deb hisoblanadi? J: var yuqoriga ko'tarilish va funksiya doirasi tufayli kutilmagan xatti-harakatlarga olib kelishi mumkin. Ayniqsa kattaroq kod bazalarida xatolarni kiritish osonroq.
5. S: const obyektining xususiyatlarini o'zgartira olamanmi? J: Ha, const faqat o'zgaruvchining o'zini qayta tayinlashni oldini oladi. const obyektining xususiyatlari hali ham o'zgartirilishi mumkin.

Qo'shimcha manbalar

1. MDN Web Docs: let
2. MDN Web Docs: const
3. MDN Web Docs: var
4. JavaScript.info: O'zgaruvchilar
5. ESLint: const ni afzal ko'rish