JavaScript da var, let va const: ko‘rinish sohasi va hoisting

Qisqa javob

• const — blok ko‘rinish sohasi, qayta tayinlab bo‘lmaydi. Odatiy holatda shuni ishlating.
• let — blok ko‘rinish sohasi, qayta tayinlash mumkin. Hisoblagichlar, yig‘uvchilar va haqiqatan o‘zgaradigan qiymatlar uchun.
• var — funksiya ko‘rinish sohasi, undefined qiymati bilan ko‘tariladi, qayta e’lon qilish mumkin. Yangi kodda ishlatmang.

Funksiya va blok ko‘rinish sohasi

Blok — figurali qavslar ichidagi hamma narsa: if, for, while yoki shunchaki { }. let va const faqat blok ichida yashaydi. var bloklarni e’tiborsiz qoldiradi va butun funksiyaga (yoki global sohaga) tegishli bo‘ladi.

function demo() {
  if (true) {
    var a = 1;
    let b = 2;
  }
  console.log(a); // 1 — var if blokidan «oqib chiqdi»
  console.log(b); // ReferenceError: b is not defined
}

var ning bu oqib chiqishi ko‘p muammolarning ildizi: sikl yoki shart uchun lokal deb o‘ylagan o‘zgaruvchingiz butun funksiyada ko‘rinadi va o‘zgartirilishi mumkin.

Hoisting va vaqtinchalik o‘lik zona

Hoisting (ko‘tarilish) — dvigatel e’lonlarni o‘z sohasidagi kod bajarilishidan oldin ro‘yxatga oladi. Uchala kalit so‘z ham ko‘tariladi, lekin har xil:

• var darhol yaratiladi va undefined bilan boshlanadi.
• let va const yaratiladi, lekin boshlang‘ich qiymat olmaydi. E’lon qatori bajarilmaguncha o‘zgaruvchi vaqtinchalik o‘lik zonada (TDZ) bo‘ladi va har qanday murojaat ReferenceError beradi.

console.log(x); // undefined
var x = 5;

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 5;

TDZ foydali xatti-harakat: o‘zgaruvchini qiymat olmasdan o‘qish deyarli har doim xato, va let/const buni jimgina undefined berish o‘rniga baland ovozda bildiradi.

Funksiya e’lonlari (function declaration) tanasi bilan to‘liq ko‘tariladi, shuning uchun ularni ta’rifidan yuqorida chaqirish mumkin. const ga tayinlangan funksiya ifodalari TDZ qoidalariga bo‘ysunadi.

Sikldagi klassik closure xatosi

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// 3, 3, 3

Butun funksiya uchun bitta i mavjud. Callback lar sikl tugagandan keyin ishlaydi, o‘sha paytda esa i 3 ga teng.

let bilan har bir iteratsiya yangi bog‘lanish oladi va har bir callback o‘z qiymatini ushlab qoladi:

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// 0, 1, 2

let paydo bo‘lishidan oldin yangi soha yaratish uchun sikl tanasini darhol chaqiriladigan funksiyaga o‘rashardi. Bugun let buni bitta so‘z bilan hal qiladi.

const obyektlarni muzlatmaydi

const qiymatni emas, bog‘lanishni himoya qiladi. O‘zgaruvchiga yangi obyekt tayinlab bo‘lmaydi, lekin u ko‘rsatayotgan obyektni o‘zgartirish mumkin.

const user = { name: "Aziz" };
user.name = "Dilnoza";  // OK — obyekt o‘zgardi
user = {};              // TypeError: Assignment to constant variable

const list = [1, 2];
list.push(3);           // OK

O‘zgarmas obyekt kerak bo‘lsa, Object.freeze() (yuzaki muzlatish) dan foydalaning yoki kodni eskisini o‘zgartirish o‘rniga yangi obyektlar yaratadigan qilib yozing.

Oddiy qoida

1. Avval const yozing.
2. O‘zgaruvchini haqiqatan qayta tayinlash kerak bo‘lgandagina let ga almashtiring.
3. Yangi kodda var ishlatmang. Buni linter bilan mustahkamlash mumkin — masalan, ESLint dagi no-var va prefer-const qoidalari.

Kod o‘qish uchun ham qulayroq bo‘ladi: let ni ko‘rsangiz, qiymat pastroqda qayerdadir o‘zgaradi.

Ko‘p uchraydigan xatolar

• const massiv va obyektlarni faqat o‘qish uchun qiladi deb o‘ylash.
• Asinxron callback li sikllarda var ishlatish.
• Blok ichida let e’lon qilib, undan keyin ham ko‘rinishini kutish.
• «Hoisting bor» deb o‘zgaruvchiga funksiya boshida murojaat qilish — let/const bilan bu xato.
• Uzun funksiyada tasodifan var ni qayta e’lon qilib, qiymatni ustidan yozib yuborish.