JavaScript Temporal Dead Zone (TDZ): Cannot access before initialization xatosi

Qisqacha: Temporal Dead Zone (TDZ, "vaqtinchalik o'lik zona") — let, const yoki class nomi scope'da mavjud bo'lgan, lekin hali qiymat olmagan davr: scope boshidan e'lon qatori bajarilguncha. Bu davrda nomga har qanday murojaat — o'qish, yozish, hatto typeof — ReferenceError: Cannot access '…' before initialization beradi. Zona kodning joylashuviga emas, bajarilish vaqtiga bog'liq: e'londan yuqorida yozilgan funksiya, e'londan keyin chaqirilsa, bemalol ishlaydi.

Bu darsda

• TDZ qayerda boshlanib, qayerda tugashini aniq ayta olasiz.
• Nega u "vaqtinchalik" (temporal) deyilishini misol bilan tushuntirasiz.
• typeof TDZ'da nega xavfsiz emasligini bilasiz.
• Default parametrlar, soyalash va switch dagi TDZ tuzoqlarini tanib, tuzata olasiz.
• vazifalar.js da TDZ keltirib chiqaradigan "begunoh" qayta nomlashni topasiz.

Oldin bilishingiz kerak: Hoisting: e'lonlar "ko'tarilishi", Leksik scope va scope zanjiri, Parametrlar, argumentlar va default qiymatlar.

1. Nega bu kerak?

Bu xabarni kursda kamida olti marta ko'rdingiz:

ReferenceError: Cannot access 'narx' before initialization

let va const, typeof, default qiymatlar, arrow funksiyalar, Scope asoslari va Stack trace darslarida — har safar "nega aynan shunday ekanini TDZ darsida ko'ramiz" degan edik. Mana shu dars.

O'tgan darsda asosiy javobni oldik: let, const va class ko'tariladi, lekin "tayyor emas" holatida (Hoisting). Bugun shu "tayyor emas" davrining aniq chegaralarini va u yashirinadigan joylarni ko'ramiz. Bu xato ba'zan kutilmagan joyda chiqadi — masalan, kodda bitta o'zgaruvchini qayta nomlaganingizdan keyin. Uni tez tanib olish — vaqtingizni tejaydi.

2. TDZ nima?

2.1 Ta'rif

Vaqtinchalik o'lik zona (Temporal Dead Zone, TDZ) — let, const yoki class bilan e'lon qilingan nom mavjud, lekin hali initsializatsiya qilinmagan (boshlang'ich qiymat olmagan) davr. U ikki nuqta orasida:

• Boshi — nom tegishli scope'ning (blok, funksiya, modul) boshlanishi. Shu paytda yaratish bosqichi nomni muhitga yozadi.
• Oxiri — e'lon qatorining o'zi bajarilgan payt.

Bu oraliqda nomga har qanday murojaat — ReferenceError.

Hayotdan o'xshatish: yangi ochilayotgan do'kon. Eshik tepasida peshlavha allaqachon osilgan — nomi bor, hamma ko'radi. Lekin eshikda "Tez kunda ochiladi" yozuvi turibdi: ichkariga kirib bo'lmaydi. Ochilish lentasi kesilgan lahzadan boshlab — kiravering. Peshlavha — yaratish bosqichidagi nom. Lenta kesilishi — e'lon qatorining bajarilishi.

2.2 Zona chegaralari — sxemada

Blok ichidagi let uchun vaqt chizig'i. Chapdan o'ngga o'qing:

flowchart LR
  A["Blok boshlandi:<br/>nom yozildi"] --> B["TDZ:<br/>tegish — ReferenceError"]
  B --> C["let narx = 35000;<br/>bajarildi"]
  C --> D["Ishlatish<br/>mumkin"]
  D --> E["Blok tugadi:<br/>nom yo'qoldi"]

E'lon qiymatsiz bo'lsa ham TDZ tugaydi. let stol; bajarilgach, stol — undefined, xatosiz:

let stol;
console.log(stol); // undefined
stol = 4;
console.log(stol); // 4

const da qiymatsiz e'lon bo'lmaydi — u e'londa qiymat olishi shart (let va const).

Tekshirib ko'ring: { console.log("a"); let x = 1; console.log(x); } blokida x ning TDZ'i qaysi qatordan qaysi qatorgacha?

3. Nega "temporal" — vaqtga oid?

3.1 Joy emas, vaqt

"E'londan yuqoridagi qatorlar — o'lik zona" deb o'ylash oson. Lekin bu noto'g'ri. Zona — vaqt oralig'i, matn hududi emas. Isbot:

function stolniAyt() {
  return `Stol: ${stol}`;
}

let stol = 4;
console.log(stolniAyt()); // Stol: 4

stol 2-qatorda ishlatilgan — let dan yuqorida. Lekin xato yo'q. Sabab: 2-qator yozilgan joyda emas, chaqirilgan paytda bajariladi. Chaqiruv esa 6-qatorda — let allaqachon bajarilgandan keyin. Keyingi tugmasini bosib kuzating:

Endi chaqiruvni bitta qator yuqoriga ko'taramiz — funksiya o'zgarmaydi:

function stolniAyt() {
  return `Stol: ${stol}`;
}

console.log(stolniAyt());
let stol = 4;

ReferenceError: Cannot access 'stol' before initialization

Bir xil funksiya, bir xil 2-qator. Farq faqat qachon chaqirilganida. Shuning uchun xato xabaridagi qator raqami (2-qator) ko'pincha xatoning sababi emas — sabab chaqiruvning vaqtida.

3.2 Callback'lar — "keyinroq bajariladigan" kod

Callback ham shu qoidaga bo'ysunadi: u yozilganda emas, chaqirilganda bajariladi. Hodisa tinglovchisini eslang — u sahifa ochilganda ro'yxatga olinadi, lekin bosishda ishlaydi. Shuni Node'da kichik "navbat" bilan taqlid qilamiz:

const navbat = [];

navbat.push(() => console.log(`Xush kelibsiz, ${mehmon}!`));

const mehmon = "Bobur";

navbat.forEach((vazifa) => vazifa());

Konsolda:

Xush kelibsiz, Bobur!

Arrow funksiya mehmon e'lonidan oldin yaratildi va massivga qo'yildi. Lekin u faqat oxirgi qatorda chaqirildi — mehmon allaqachon tayyor. Agar navbat.forEach(...) ni const mehmon dan yuqoriga ko'chirsangiz — Cannot access 'mehmon' before initialization.

09-qismdagi tinglovchilar ham xuddi shunday: addEventListener ga berilgan funksiya skriptdagi istalgan const ni ishlata oladi — foydalanuvchi bosganda butun skript allaqachon bajarilib bo'lgan bo'ladi. Muammo faqat tinglovchi skript tugashidan oldin ishga tushsa chiqadi.

O'zingiz to'ldiring: navbat.push(...) qatori bajarilayotgan paytda mehmon turgan zonaning qisqa nomi — .

3.3 Bu vazifalar da qanday ko'rinadi

Hoisting darsidagi tajribani eslang: render(); faylning boshiga ko'chirilganda Cannot access 'royxat' before initialization chiqdi. Xato render ichida, royxat ishlatilgan qatorda ko'rsatildi. Lekin render ning kodi to'g'ri edi — noto'g'ri faqat chaqiruv vaqti edi. TDZ xatosini ko'rganda o'zingizdan birinchi navbatda so'rang: "bu kod qachon chaqirildi?"

4. TDZ yashirinadigan joylar

4.1 O'ziga o'zi murojaat va soyalash

Eng ko'p uchraydigan TDZ — bir xil nom ikki qavatda:

let narx = 10000;

{
  const narx = narx * 1.1;
  console.log(narx);
}

ReferenceError: Cannot access 'narx' before initialization

Niyat tushunarli: "tashqi narx dan 10% qimmatroq yangi narx". Lekin ichki const narx blok boshidanoq muhitda — tashqisini soyalaydi (Leksik scope). O'ng tomondagi narx * 1.1 hisoblanayotganda e'lon hali tugamagan: ichki narx TDZ'da, tashqisiga esa yo'l yopiq. Tuzatish: boshqa nom — const yangiNarx = narx * 1.1.

Xuddi shu sabab bilan let son = son + 1; ham — tashqarida son bo'lsa ham, bo'lmasa ham — xato beradi.

4.2 typeof endi xavfsiz emas

typeof darsida ko'rgan edik: umuman e'lon qilinmagan nomda typeof xato bermaydi:

console.log(typeof yoqNom); // undefined

Bu xususiyat eski kodda "shu nom bormi?" deb tekshirish uchun ishlatilgan. Lekin TDZ'dagi nomda typeof ham ReferenceError beradi:

console.log(typeof narx);
let narx = 35000;

ReferenceError: Cannot access 'narx' before initialization

Uch holatni yonma-yon qo'yamiz:

Paradoks: umuman yo'q nom — xavfsiz, bor, lekin tayyor emas nom — xato. TDZ qoidasi typeof uchun ham istisno qilmaydi. Shuning uchun "typeof hech qachon xato bermaydi" degan eski qoida 2015-yildan (ES2015, let/const paydo bo'lgandan) beri to'g'ri emas.

4.3 Default parametrlar

Default qiymatlar darsidan: parametrlar chapdan o'ngga, navbat bilan initsializatsiya qilinadi. Har parametr — o'zining kichik TDZ'i bilan. Default qiymat faqat o'zidan chapdagi parametrlarni ishlata oladi:

function bronQil(odam = stollar * 4, stollar = 1) {
  return `${stollar} stol, ${odam} kishi`;
}

console.log(bronQil(undefined, 2));

ReferenceError: Cannot access 'stollar' before initialization

odam ning default'i hisoblanayotganda stollar hali TDZ'da — u o'ngda. Tartibni almashtiramiz:

function bronQil(stollar = 1, odam = stollar * 4) {
  return `${stollar} stol, ${odam} kishi`;
}

console.log(bronQil()); // 1 stol, 4 kishi
console.log(bronQil(3)); // 3 stol, 12 kishi
console.log(bronQil(2, 6)); // 2 stol, 6 kishi

Qiziq tafsilot: asl, xato variantda bronQil(5, 2) chaqirilsa — xato yo'q. Default faqat argument berilmaganda (undefined) hisoblanadi. TDZ xatosi faqat ba'zi chaqiruvlarda chiqadi — shuning uchun u testlarda ko'zdan qochishi oson.

Yana bir chegara: default qiymat funksiya tanasidagi o'zgaruvchilarni ko'rmaydi. function f(a = ichki) { const ichki = 1; } chaqirilsa — ReferenceError: ichki is not defined. Bu TDZ emas: parametrlar tanadan tashqaridagi alohida muhitda yashaydi, tananing nomlari u yerda umuman yo'q.

4.4 switch ning umumiy bloki

switch ning barcha case lari bitta blokni bo'lishadi. Bir case da let e'lon qilib, boshqasida ishlatsangiz:

function narxniAyt(taom) {
  switch (taom) {
    case "osh":
      let narx = 35000;
      return narx;
    case "manti":
      narx = 30000;
      return narx;
  }
}

console.log(narxniAyt("manti"));

ReferenceError: Cannot access 'narx' before initialization

narx butun switch bloki uchun bitta. "manti" bo'lganda case "osh" qatorlari bajarilmadi — let narx ga yetilmadi, TDZ tugamadi. Tuzatish: har case ni o'z { } bloki bilan o'rang — shunda har birida o'z narx i bo'ladi:

function narxniAyt(taom) {
  switch (taom) {
    case "osh": {
      const narx = 35000;
      return narx;
    }
    case "manti": {
      const narx = 30000;
      return narx;
    }
  }
}

console.log(narxniAyt("manti")); // 30000

Tekshirib ko'ring: function f(a = a) { return a; } — f(5) va f() nima beradi?

5. Nega JavaScript'ga TDZ kerak?

TDZ — "keraksiz qiyinchilik" emas. Uni ataylab, 2015-yilda let va const bilan birga qo'shishgan. Uch sabab:

1. Xatoni darhol ko'rsatish. var e'londan oldin jimgina undefined beradi va "Buyurtma: undefined" ekranga chiqib ketadi (var). TDZ esa dasturni aynan muammoli joyda to'xtatadi.
2. const va'dasi. const — "bu nom doim bitta qiymatga ega". Agar e'londan oldin undefined ko'rinsa, const ikki xil qiymatga ega bo'lib qolardi: avval undefined, keyin haqiqiysi. TDZ bunga yo'l qo'ymaydi: const ni faqat haqiqiy qiymati bilan ko'rish mumkin.
3. Kelajak uchun. Til mualliflari keyinroq qo'shiladigan imkoniyatlar "e'londan oldin qiymat yo'q" qoidasiga tayana olishini xohlagan. Masalan, class ham shu qoidaga bo'ysunadi — uni class sintaksisi darsida ko'ramiz.

Natijada qoida soddalashdi: let/const bilan "avval e'lon, keyin ishlatish" — buzilsa, darhol xato.

Tekshirib ko'ring: Agar TDZ bo'lmaganda va const e'londan oldin undefined qaytarganda, const narx = 35000; dan oldingi console.log(narx) nima chiqarardi? Bu nega yomon bo'lardi?

6. Ko'p uchraydigan xatolar

6.1 Xato qatorida sabab izlash

TDZ xatosi ko'rsatgan qator — ko'pincha to'g'ri kod. «Nega "temporal"» bo'limidagi kabi: stolniAyt ning return qatori to'g'ri, chaqiruv esa erta. Tuzatish: stack trace'ni pastga qarab o'qing (Execution context) — qaysi chaqiruv bu kodni e'londan oldin ishga tushirganini toping.

6.2 Qayta nomlash soyalash yaratadi

Funksiya ichidagi o'zgaruvchiga "chiroyliroq" nom berdingiz — u tasodifan tashqi nom bilan bir xil bo'lib qoldi, va o'ng tomonda tashqisi ishlatilgan edi. Natija — «O'ziga o'zi murojaat va soyalash» bo'limidagi xato. «Vazifalar qadami» da aynan shuni ko'rasiz. Tuzatish: qayta nomlashda VS Code'ning F2 sini ishlating — u to'qnashuvni ko'rsatadi. ESLint (kodni ishga tushirmasdan xatolarini qidiradigan vosita, 12-qismda o'rganamiz) ham no-shadow qoidasi bilan topadi.

6.3 Default parametrlar tartibi

(odam = stollar * 4, stollar = 1) — o'ngdagiga tayanish. Tuzatish: bog'liq parametrni o'ngga qo'ying.

6.4 typeof bilan "bor-yo'qligini" tekshirish

if (typeof sozlama === "undefined") — e'lon qilinmagan nomda ishlaydi, TDZ'dagisida — xato. Tuzatish: o'z kodingizda nomni avval e'lon qiling (let sozlama = null;), keyin qiymatini tekshiring.

7. Mashqlar

1-mashq (oson): Qaysi qator xato beradi?

Har raqamlangan qator uchun ayting: ishlaydimi yoki TDZ xatosimi? (Har birini alohida tasavvur qiling — birinchi xato dasturni to'xtatadi.)

console.log(typeof menyu);  // (1)
console.log(typeof taom);   // (2)
let taom = "osh";
console.log(taom);          // (3)
const tayyorla = () => taom.toUpperCase();
console.log(tayyorla());    // (4)

2-mashq (o'rta): Chegirma funksiyasi

Funksiya chegirmaQol() chaqirilganda xato beradi. Parametrlarni o'zgartirib tuzating: summa sukut bo'yicha 100000, foiz — summa 200 000 dan katta bo'lsa 15, aks holda 10.

function chegirmaQol(
  foiz = summa > 200000 ? 15 : 10,
  summa = 100000,
) {
  return summa - (summa * foiz) / 100;
}

console.log(chegirmaQol());

function chegirmaQol(
  summa = 100000,
  foiz = summa > 200000 ? 15 : 10,
) {
  return summa - (summa * foiz) / 100;
}

console.log(chegirmaQol()); // 90000
console.log(chegirmaQol(300000)); // 255000
console.log(chegirmaQol(300000, 5)); // 285000

3-mashq (qiyin): Nima uchun "ba'zan" ishlaydi?

Kod 3 ta osh uchun ishlaydi, 8 ta uchun — xato. Sababini toping, tuzating va tuzatilganini ikkala son bilan sinang.

function chekYoz(soni, chegirmaBor = soni > 5) {
  if (chegirmaBor) {
    return `${soni} ta osh: ${foiz}% chegirma`;
  }
  const foiz = 10;
  return `${soni} ta osh: ${foiz}% chegirma faqat 6 tadan`;
}

console.log(chekYoz(3));
console.log(chekYoz(8));

function chekYoz(soni, chegirmaBor = soni > 5) {
  const foiz = 10;
  if (chegirmaBor) {
    return `${soni} ta osh: ${foiz}% chegirma`;
  }
  return `${soni} ta osh: ${foiz}% chegirma faqat 6 tadan`;
}

console.log(chekYoz(3)); // 3 ta osh: 10% chegirma faqat 6 tadan
console.log(chekYoz(8)); // 8 ta osh: 10% chegirma

4-mashq: Vazifalar qadami — "begunoh" qayta nomlash

kurs/mashqlar/10/22-tdz/ ga vazifalar nusxasini oling (yoki Hoisting darsidagi nusxani qayta tiklang). Asl loyihaga tegmaymiz.

Nusxadagi qoshniId funksiyasi:

function qoshniId(id) {
  const qator = royxat.querySelector(`[data-id="${id}"]`);
  const qoshni =
    qator.nextElementSibling ?? qator.previousElementSibling;
  return qoshni === null ? null : Number(qoshni.dataset.id);
}

Jamoadoshingiz "qator — tushunarsiz nom, bu ro'yxatdagi element-ku" deb, qator ni hamma joyda royxat ga qayta nomladi (qo'lda, F2 siz).

1. Shu o'zgarishni nusxada qiling. Sahifa ochiladimi? Ro'yxat chiziladimi?
2. "Non olish" katagini bosing. Nima bo'ldi — ekranda va konsolda?
3. Nega sahifa ochilganda xato chiqmadi, bosganda chiqdi?
4. Javoblarni javoblar.md ga yozing va to'g'ri nom taklif qiling.

Uncaught ReferenceError: Cannot access 'royxat' before initialization

git add 10/22-tdz
git commit -m "10/22: qayta nomlashdagi TDZ xatosini tahlil qil"

8. Real ishda

• Intervyu. "TDZ nima?", "let ko'tariladimi?", "typeof qachon xato beradi?" — hoisting savoliga deyarli doim qo'shiladi. Eng kuchli javob — misol bilan: e'londan yuqorida yozilgan, lekin keyin chaqirilgan funksiya ishlaydi; demak TDZ — vaqt.
• Refaktoring. Kodni tartiblashda funksiya va o'zgaruvchilar joyi o'zgaradi — TDZ xatolari aynan shunday paydo bo'ladi. Modul fayllari bir-birini import qilganda (aylanma import) ham shu xabar chiqadi — buni Modul semantikasi darsida ko'ramiz.
• Linter. ESLint'ning no-use-before-define va no-shadow qoidalari TDZ xatolarining ko'pchiligini kod ishga tushmasdan oldin topadi (ESLint — 12-qismda). TypeScript ham "Block-scoped variable used before its declaration" deb ogohlantiradi (15-qismda).

Xulosa

• TDZ — let/const/class nomi scope boshidan e'lon qatori bajarilguncha bo'lgan davr; bu davrda har qanday murojaat — ReferenceError: Cannot access '…' before initialization.
• TDZ — vaqtga oid: e'londan yuqorida yozilgan kod, e'londan keyin bajarilsa, ishlaydi.
• typeof e'lon qilinmagan nomda xavfsiz, TDZ'dagi nomda — xato.
• Soyalash (const narx = narx * 1.1), default parametrlar (o'ngdagiga tayanish) va switch ning umumiy bloki — TDZ'ning uch asosiy yashirin joyi.
• TDZ xatosini ko'rsangiz, so'rang: "bu kod qachon chaqirildi?"

Keyingi dars: Closure: funksiya o'z muhitini eslab qoladi — leksik muhit funksiya tugagandan keyin ham yashashi mumkinmi? Shu savol JavaScript'ning eng kuchli imkoniyatlaridan biriga olib keladi.

Manbalar

• MDN: "let" — "Temporal dead zone (TDZ)" bo'limi; "typeof" — "typeof and the TDZ" — developer.mozilla.org
• ECMAScript 2025 Language Specification: "Declarative Environment Records" (InitializeBinding), "Static Semantics: Early Errors" — tc39.es/ecma262