JavaScript hoisting: e'lonlar qanday "ko'tariladi"

Qisqacha: Hoisting ("ko'tarish") — JavaScript kodni bajarishdan oldin, kontekstning yaratish bosqichida barcha e'lonlarni ro'yxatga olishi. Kod joyidan siljimaydi, faqat har e'lon turi boshqacha boshlang'ich holat oladi: function e'loni — to'liq funksiya, var — undefined, let, const va class — "tayyor emas" (TDZ). Shuning uchun function ni e'londan oldin chaqirsa bo'ladi, const arrow funksiyani esa — yo'q.

Bu darsda

• Hoisting aslida nima ekanini — va nima emasligini — tushuntira olasiz.
• Har e'lon turi (function, var, let, const, class) yaratish bosqichida qanday holat olishini bilasiz.
• Function expression va arrow funksiya nega e'londan oldin chaqirilmasligini tushuntirasiz.
• Kodni o'qib, e'londan oldingi murojaat natijasini — qiymat, undefined yoki xato — oldindan ayta olasiz.
• vazifalar.js dagi bo'limlar tartibi nega muhimligini tajribada ko'rasiz.

Oldin bilishingiz kerak: Execution context va call stack, Leksik scope va scope zanjiri, var va nega undan voz kechildi, Function expression va arrow funksiyalar.

1. Nega bu kerak?

Hoisting so'zini 08-qismda ikki marta eshitdingiz va har safar "keyinroq batafsil" degan edik:

• function bilan e'lon qilingan funksiyani e'londan oldin chaqirish mumkin (Funksiya e'lon qilish).
• var o'zgaruvchi e'londan oldin undefined (var).

Yana ikkita kuzatuv bor edi. const bilan yozilgan arrow funksiyani e'londan oldin chaqirsangiz — xato (Function expression va arrow). let ni e'londan oldin o'qisangiz ham — xato, lekin u not defined emas, before initialization (let va const).

Bular to'rtta alohida qoida emas. Execution context darsida ko'rgan yaratish bosqichi — hammasining sababi. Bugun shu bosqichda har e'lon turi bilan nima bo'lishini birma-bir ko'ramiz. Dars oxirida istalgan "e'londan oldin" jumboqqa javob bera olasiz — intervyuda bu savol deyarli doim chiqadi.

2. Hoisting nima va nima emas

2.1 Metafora va haqiqat

Hoisting ("ko'tarish") — e'lonlar go'yo o'z scope'ining tepasiga "ko'tarilgandek" ishlashi. Bu — metafora. Haqiqatda kod hech qayerga siljimaydi: fayl qanday yozilgan bo'lsa, shunday qoladi.

Haqiqatda bo'ladigan narsa sizga tanish. Kontekst yaratilganda JavaScript butun funksiya tanasini (yoki faylni) ko'zdan kechiradi va barcha e'lonlarni leksik muhitga yozadi (Leksik scope). Bajarish keyin boshlanadi. Natijada birinchi qator bajarilayotganda ham pastdagi e'lonlarning nomlari muhitda bor. "Ko'tarildi" degani — "yaratish bosqichida ro'yxatga olindi" degani.

Maktab jurnalini eslang (var): ismlar o'quv yili boshida yoziladi, baholar — dars bo'lganda. Bugun aniqlaymiz: jurnalda har "o'quvchi turi" boshqacha belgi bilan yoziladi.

2.2 Bitta jadval

Har e'lon turi yaratish bosqichida qanday holatga keladi — va e'londan oldin murojaat qilsangiz nima bo'ladi:

Function expression va arrow funksiya alohida qatorda emas — ular o'zgaruvchiga berilgan qiymat. Ular o'zgaruvchining qatoriga bo'ysunadi. Buni «Function expression va arrow» bo'limida ko'ramiz.

2.3 Qadamma-qadam

Uchta turni bitta faylda kuzatamiz. Keyingi tugmasini bosing. Birinchi qadamga alohida qarang — kod hali bajarilmagan, lekin muhitda uchala nom ham bor:

Oxirgi qadamdagi izohga e'tibor bering: function e'loni bajarish bosqichida "o'tkazib yuboriladi". U o'z ishini yaratishda qilib bo'lgan.

Tekshirib ko'ring: Yuqoridagi kodning ikkinchi qatoriga console.log(stol); qo'shsak nima bo'ladi?

3. function e'loni — to'liq ko'tariladi

3.1 Funksiya tanasi bilan birga

function kalit so'zi bilan boshlangan e'lon (function declaration) yaratish bosqichida to'liq tayyor bo'ladi — nomi ham, tanasi ham. Shuning uchun uni scope'ning istalgan joyidan chaqirish mumkin:

console.log(narxniHisobla(2)); // 70000

function narxniHisobla(soni) {
  return soni * oshNarxi();
}

function oshNarxi() {
  return 35000;
}

narxniHisobla ham, u chaqiradigan oshNarxi ham pastda. Ikkalasi ham ishladi: 1-qator bajarilganda ikkala funksiya allaqachon muhitda edi.

Bu xulq ba'zi jamoalarda ataylab ishlatiladi: faylning tepasida "asosiy" kod, pastda — yordamchi funksiyalar. Kitobni mundarijadan boshlab o'qigandek. Boshqa jamoalar esa "avval e'lon, keyin chaqiruv" qoidasiga amal qiladi. Ikkalasi ham to'g'ri — muhimi, bitta loyihada bitta uslub. Bu kursda biz Funksiya e'lon qilish darsidagi odatda qolamiz: avval e'lon.

3.2 Funksiya ichida ham

Hoisting har scope'da o'z-o'zidan ishlaydi. Funksiya ichidagi function e'loni o'sha funksiyaning tepasiga "ko'tariladi" — global'ga emas:

function chekYoz(soni) {
  return `Jami: ${hisobla()} so'm`;

  function hisobla() {
    return soni * 35000;
  }
}

console.log(chekYoz(3)); // Jami: 105000 so'm

hisobla — return dan keyin yozilgan. Bajarish bosqichi unga hech qachon yetmaydi. Lekin yaratish bosqichi butun tanani ko'radi — hisobla tayyor edi. Bunday yozuv qiziq, lekin o'qishga og'ir; uni kodda emas, intervyu jumboqlarida ko'proq uchratasiz.

3.3 Bir-birini chaqiradigan funksiyalar

To'liq hoisting'ning eng foydali natijasi — funksiyalar tartibidan qat'i nazar bir-birini chaqira olishi. Execution context darsidagi juftmi va toqmi ni eslang:

function juftmi(n) {
  return n === 0 ? true : toqmi(n - 1);
}

function toqmi(n) {
  return n === 0 ? false : juftmi(n - 1);
}

console.log(juftmi(4)); // true
console.log(toqmi(7)); // true

juftmi toqmi ni chaqiradi, lekin toqmi undan pastda yozilgan. Qaysi birini birinchi yozmang, ikkinchisi doim "keyin" bo'ladi. Muammo yo'q: ikkalasi yaratish bosqichida birdaniga tayyor bo'ladi. const arrow'lar bilan ham ishlaydi — chaqiruv (juftmi(4)) ikkala e'londan keyin bo'lsa. Muhimi chaqiruv vaqti, bu haqda TDZ darsida batafsil.

4. var — undefined bilan ko'tariladi

4.1 E'lon — ha, qiymat — yo'q

var ning xulqi var darsidan tanish: nom ko'tariladi, qiymat — joyida qoladi.

console.log(mehmon); // undefined
var mehmon = "Malika";
console.log(mehmon); // Malika

Bitta muhim tafsilot: var funksiyaning tepasiga ko'tariladi, blokning emas. if ichida yozilgan bo'lsa ham:

function chekYoz(tolandi) {
  if (tolandi) {
    var xabar = "Rahmat!";
  }
  console.log(xabar);
}

chekYoz(true); // Rahmat!
chekYoz(false); // undefined

chekYoz(false) da if ichi umuman bajarilmadi. Lekin xabar baribir mavjud — undefined. Yaratish bosqichi var xabar ni if ga qaramay butun funksiya muhitiga yozdi. let bo'lganda esa xabar faqat if blokida yashardi va console.log(xabar) — ReferenceError: xabar is not defined.

Bu ikki xulq — "e'londan oldin undefined" va "blokdan sizib chiqish" — var dan voz kechilganining asosiy sabablari. Yangi kodda var yozilmaydi, lekin eski kodni o'qish uchun uni bilish shart.

Tekshirib ko'ring: Nima chiqadi?

js

var narx = 30000;
function aksiya() {
  console.log(narx);
  var narx = 25000;
}
aksiya();

5. let, const, class — ko'tariladi, lekin "tayyor emas"

5.1 Ular ham ko'tariladimi?

Ko'p qo'llanmalarda "let va const ko'tarilmaydi" deb yoziladi. Bu noto'g'ri. Isboti — soyalash bilan. Scope asoslari darsidagi misol:

let narx = 10000;

function yangila() {
  console.log(narx);
  let narx = 12000;
}

yangila();

ReferenceError: Cannot access 'narx' before initialization

Agar ichki let narx ko'tarilmaganda, 4-qatorda JavaScript funksiya muhitida narx ni topmasdi. Zanjir bo'ylab tashqariga chiqib, global 10000 ni chiqarardi. Lekin xato chiqdi. Demak yaratish bosqichida ichki narx funksiya muhitiga yozilgan. U tashqisini to'sib qo'ydi — lekin o'zi hali "tayyor emas".

Xabarning so'zlari ham shuni aytadi. not defined emas — "aniqlanmagan" emas. before initialization — "boshlang'ich qiymat berilishidan oldin". Nom bor, qiymat yo'q.

Demak to'g'ri ifoda: let, const va class ko'tariladi, lekin initsializatsiya qilinmaydi. Initsializatsiya (initialization) — o'zgaruvchiga birinchi, boshlang'ich qiymat berish: let narx = 12000 qatorida aynan shu yuz beradi. E'lon qatoriga yetguncha ular "o'lik zonada" turadi — bu zonaning nomi TDZ (Temporal Dead Zone, "vaqtinchalik o'lik zona"). Bekatdagi avtobusga o'xshaydi: u bekatda turibdi (nom bor), lekin eshigi hali ochilmagan (qiymat yo'q) — chiqib bo'lmaydi. Uni keyingi darsda to'liq ko'ramiz.

5.2 class ham shunday

Klass — bir xil tuzilmali obyektlar yasash uchun qolip. Uni class sintaksisi darsida o'rganamiz — hozir faqat hoisting'dagi o'rnini bilib qo'ying:

const vazifa = new Vazifa("Non olish");

class Vazifa {
  constructor(matn) {
    this.matn = matn;
  }
}

ReferenceError: Cannot access 'Vazifa' before initialization

function dan farqli, class e'londan oldin ishlatilmaydi. Klasslarni har doim ishlatishdan oldin e'lon qiling.

6. Function expression va arrow — o'zgaruvchiga bo'ysunadi

6.1 Qiymat ko'tarilmaydi

Function expression — funksiya qiymat sifatida o'zgaruvchiga berilgan (Function expression va arrow). Hoisting faqat o'zgaruvchini ko'taradi. Funksiya — tayinlash qatoridagi qiymat — joyida qoladi.

var bilan:

chegirmaQol(100000);

var chegirmaQol = function (summa) {
  return summa - summa / 10;
};

TypeError: chegirmaQol is not a function

Tarjimasi: "chegirmaQol — funksiya emas". Nom bor (var ko'tarildi), lekin uning qiymati hozircha undefined. undefined() ni chaqirib bo'lmaydi. Xato turi — TypeError: noto'g'ri turdagi qiymat bilan amal (Stack trace va xato turlari).

const bilan — arrow ham, oddiy function expression ham:

chegirmaQol(100000);

const chegirmaQol = (summa) => summa - summa / 10;

ReferenceError: Cannot access 'chegirmaQol' before initialization

Bu safar ReferenceError — const TDZ'da. Uchta yozuvni yonma-yon qo'yamiz:

Butun darsni bitta sxemaga yig'amiz. "E'londan oldin murojaat qildim — nima bo'ladi?" savoliga tepadan pastga javob qidiring:

flowchart TD
  S{"Nom qanday<br/>e'lon qilingan?"}
  S -- "function nom() {}" --> F["Ishlaydi:<br/>to'liq funksiya"]
  S -- "var" --> V{"Chaqiryapsizmi?"}
  V -- "yo'q, o'qiyapman" --> U["undefined"]
  V -- "ha, nom()" --> T["TypeError:<br/>is not a function"]
  S -- "let, const, class" --> R["ReferenceError:<br/>before initialization"]
  S -- "hech qayerda" --> N["ReferenceError:<br/>is not defined"]

Xato turidan e'lon turini topish mumkin. is not a function + e'londan oldingi chaqiruv — deyarli doim var bilan berilgan funksiya. Cannot access ... before initialization — let/const/class.

6.2 Qaysi biri yaxshiroq?

function e'lonining "istalgan joyda chaqirish" erkinligi — qulaylik ham, xavf ham. const arrow esa tartibni majburlaydi: avval e'lon, keyin ishlatish. Ko'p zamonaviy jamoalar shu sababli yordamchi funksiyalarni const bilan yozadi. Boshqalar function ni afzal ko'radi: hoisting va stack trace'dagi aniq nom uchun. Kursda ikkalasi ham uchraydi, qoida bitta — tartib: e'lon chaqiruvdan oldin.

Tekshirib ko'ring: Stack trace'da TypeError: hisobla is not a function ko'rdingiz va chaqiruv qatori hisobla(5). Kodda hisobla — var hisobla = function .... Birinchi navbatda nimani tekshirasiz?

7. Ikki chekka holat

7.1 Bir nom — var va function

Bir scope'da bir nom bilan ham var, ham function e'lon qilinsa-chi? Modulda bu ruxsat etilmaydi — SyntaxError: Identifier 'narx' has already been declared. Eski, modul bo'lmagan skriptda esa yaratish bosqichida funksiya "yutadi", keyin var tayinlashi uni ustidan yozadi:

console.log(typeof narx); // function
var narx = 35000;
function narx() {}
console.log(typeof narx); // number

Eski kutubxonalarda bunday to'qnashuv uchrab qoladi. Yangi kodda — hech qachon: bir nom — bitta e'lon.

7.2 Blok ichidagi function

if ichida function e'lon qilish mumkin, lekin uning xulqi rejimga bog'liq. Modulda u blokka tegishli — blokdan tashqarida ko'rinmaydi. Eski skriptda esa tarixiy sabab bilan blokdan "sizib chiqadi". Farqni Strict mode darsida ko'ramiz. Amaliy qoida: funksiyani blok ichida e'lon qilmang. Shartga qarab funksiya kerak bo'lsa — const va arrow ishlating.

8. Ko'p uchraydigan xatolar

8.1 Funksiyani function dan arrow'ga o'zgartirib, chaqiruvni unutish

Kod ishlab turgan edi. Kimdir "zamonaviyroq" qilib function hisobla() ni const hisobla = () => ga almashtirdi — va Cannot access 'hisobla' before initialization chiqdi. Chaqiruv e'londan yuqorida qolgan edi. Tuzatish: almashtirishdan oldin chaqiruvlar e'londan pastda ekanini tekshiring yoki e'lonni tepaga ko'chiring.

8.2 "let ko'tarilmaydi" deb o'ylash

Shu tufayli soyalash bilan bog'liq xato tushunarsiz tuyuladi: "tashqarida narx bor-ku, nega ko'rmayapti?" Eslang: ichki let narx blok yoki funksiyaning boshidanoq muhitda — faqat tayyor emas. Tashqi nom unga to'silgan.

8.3 var ning undefined iga ishonib qolish

var e'londan oldin xato bermaydi — bu "jim" xato. Buyurtma: undefined kabi natijalar ekranga chiqib ketadi (var). Tuzatish: var ni let/const ga almashtiring — xato kerakli qatorda ko'rinadi.

8.4 Kod "ko'chadi" deb tasavvur qilish

"Hoisting e'lonni yuqoriga ko'chiradi" deb o'ylasangiz, var narx = 35000 ning qiymati ham ko'chadi deb kutasiz. Hech narsa ko'chmaydi: yaratish bosqichida faqat nom yoziladi. Eslang: hoisting = yaratish bosqichida ro'yxatga olish.

9. Mashqlar

1-mashq (oson): Uch natija

Ishga tushirmasdan ayting: har console.log nima chiqaradi?

console.log(typeof bronQil);
console.log(stol);

var stol = 7;

function bronQil() {
  return "Bron qilindi";
}

console.log(bronQil(), stol);

function
undefined
Bron qilindi 7

2-mashq (o'rta): Tartibni tuzating

Kod ReferenceError beradi. Faqat qatorlarni ko'chirib (hech narsani o'zgartirmasdan) tuzating. So'ng ayting: qaysi qatorlarni ko'chirish shart emas edi va nega?

console.log(chekYoz("Osh", 2));

const narxlar = { Osh: 35000, Manti: 30000 };

const somYoz = (son) => `${son} so'm`;

function chekYoz(taom, soni) {
  return `${taom} × ${soni} = ${somYoz(narxlar[taom] * soni)}`;
}

const narxlar = { Osh: 35000, Manti: 30000 };

const somYoz = (son) => `${son} so'm`;

function chekYoz(taom, soni) {
  return `${taom} × ${soni} = ${somYoz(narxlar[taom] * soni)}`;
}

console.log(chekYoz("Osh", 2)); // Osh × 2 = 70000 so'm

3-mashq (qiyin): Interpretator bo'lib ko'ring

Kod uchun yaratish bosqichidagi jadvalni yozing (har nom va uning boshlang'ich holati), keyin natijani ayting. Oxirida Node'da tekshiring.

function buyurtma() {
  console.log(typeof taomniTop, typeof hisob, typeof yordamchi);
  var hisob = 0;
  const yordamchi = () => "yordam";
  function taomniTop() {
    return "osh";
  }
  hisob = 35000;
  return `${taomniTop()} ${hisob} ${yordamchi()}`;
}

console.log(buyurtma());

ReferenceError: Cannot access 'yordamchi' before initialization

4-mashq: Vazifalar qadami — bo'limlar tartibi tajribasi

vazifalar.js 7 ta bo'limdan iborat: holat → elementlar → hisoblovchi funksiyalar → chizish → holatni o'zgartiruvchilar → fokus → hodisalar, oxirida render();. Bu tartib tasodifiy emasmi? Tajriba qilamiz — kurs/mashqlar/10/21-hoisting/ ga vazifalar papkasining nusxasini oling (asl loyihaga tegmaymiz).

1. Nusxadagi vazifalar.js da render(); qatorini faylning eng boshiga ko'chiring. Sahifani oching: nima chiqdi? Konsolda qaysi xato?
2. Qaytaring. Endi «Hodisalar» bo'limini butunlay faylning boshiga ko'chiring. Natija?
3. Qaytaring. Endi «Hisoblovchi funksiyalar» dan «Fokus va e'lon» gacha bo'lgan to'rt bo'limni (barcha function lar) faylning oxiriga, render(); dan keyinga ko'chiring. Natija?
4. Uch natijani javoblar.md ga yozing va har birini bitta gap bilan tushuntiring.

1. Uncaught ReferenceError: Cannot access 'royxat' before initialization
2. Uncaught ReferenceError: Cannot access 'forma' before initialization
3. Xato yo'q — ilova to'liq ishlaydi

git add 10/21-hoisting
git commit -m "10/21: vazifalar bo'limlari tartibi bilan tajriba"

10. Real ishda

• Intervyu. "Hoisting nima?", "let ko'tariladimi?", "bu kod nima chiqaradi?" — JavaScript intervyusining eng mashhur savollaridan. To'g'ri javob: "e'lonlar yaratish bosqichida ro'yxatga olinadi; function — to'liq, var — undefined, let/const/class — TDZ bilan".
• Linter. ESLint'ning no-use-before-define qoidasi e'londan oldingi murojaatni ogohlantiradi — const uchun ham, xohlasangiz function uchun ham (ESLint — 12-qismda). Ko'p jamoalar var ni no-var qoidasi bilan butunlay taqiqlaydi.
• Eski kod. jQuery (2010-yillarda juda mashhur bo'lgan brauzer kutubxonasi) davridagi skriptlar va kutubxonalarda var va blok ichidagi function ko'p. Ularni yangilaganda hoisting farqlari yashirin xatolarga olib keladi — yuqoridagi jadval shu yerda kerak.

Xulosa

• Hoisting — metafora: kod siljimaydi, e'lonlar kontekstning yaratish bosqichida ro'yxatga olinadi.
• function e'loni — to'liq ko'tariladi: scope'ning istalgan joyidan chaqirish mumkin.
• var — undefined bilan, va blokka emas, funksiyaga ko'tariladi.
• let, const, class ham ko'tariladi, lekin e'lon qatorigacha "tayyor emas" (TDZ) — murojaat ReferenceError.
• Function expression va arrow o'zgaruvchining qoidasiga bo'ysunadi: var bilan — TypeError, const bilan — ReferenceError.
• Amaliy qoida: avval e'lon, keyin ishlatish; funksiya ichidagi const lar chaqiruvdan oldin tayyor bo'lsin.

Keyingi dars: Temporal Dead Zone (TDZ) — "tayyor emas" zonasining aniq chegaralari, typeof va default parametrlardagi tuzoqlar.

Manbalar

• MDN: "Hoisting" (Glossary), "var", "let", "Temporal dead zone" — developer.mozilla.org
• ECMAScript 2025 Language Specification: "FunctionDeclarationInstantiation", "GlobalDeclarationInstantiation" — tc39.es/ecma262