JavaScript Ko'tarilish (Hoisting) Mexanizmlari: O'zgaruvchilarni E'lon Qilish va Funksiya Doirasi

Ko'tarilish (Hoisting) JavaScript-dagi asosiy tushuncha bo'lib, u ko'pincha yangi dasturchilarni hayratda qoldiradi. Bu JavaScript interpreteri o'zgaruvchilar va funksiyalarning e'lonlarini kod bajarilishidan oldin o'z doirasining (scope) yuqorisiga ko'chirib o'tkazadigandek tuyuladigan mexanizmdir. Bu kod jismonan ko'chirilganini anglatmaydi; aksincha, interpretator e'lonlarni qiymat berishdan farqli ravishda qayta ishlaydi.

Ko'tarilishni Tushunish: Chuqurroq Tahlil

Ko'tarilishni to'liq tushunish uchun JavaScript bajarilishining ikki bosqichini bilish juda muhim: Kompilyatsiya va Bajarish.

• Kompilyatsiya Bosqichi: Ushbu bosqichda JavaScript dvigateli kodni e'lonlar (o'zgaruvchilar va funksiyalar) uchun skanerlaydi va ularni xotirada ro'yxatdan o'tkazadi. Aynan shu yerda ko'tarilish amalda sodir bo'ladi.
• Bajarish Bosqichi: Bu bosqichda kod qatorma-qator bajariladi. O'zgaruvchilarga qiymat berish va funksiyalarni chaqirish amalga oshiriladi.

O'zgaruvchilarning Ko'tarilishi: var, let va const

Ko'tarilishning xususiyatlari ishlatilgan o'zgaruvchi e'lon qilish kalit so'ziga qarab sezilarli darajada farq qiladi: var, let va const.

var bilan ko'tarilish

var bilan e'lon qilingan o'zgaruvchilar o'z doirasining (global yoki funksiya doirasi) yuqorisiga ko'tariladi va undefined qiymati bilan initsializatsiya qilinadi. Bu shuni anglatadiki, siz var o'zgaruvchisiga kodda e'lon qilinishidan oldin murojaat qilishingiz mumkin, lekin uning qiymati undefined bo'ladi.

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

            

              
                Copy
              
            
          

Tushuntirish:

1. Kompilyatsiya paytida, myVar ko'tariladi va undefined ga initsializatsiya qilinadi.
2. Birinchi console.logda, myVar mavjud, lekin uning qiymati undefined.
3. myVar = 10 qiymat berish amali myVarga 10 qiymatini beradi.
4. Ikkinchi console.log 10 ni chiqaradi.

let va const bilan ko'tarilish

let va const bilan e'lon qilingan o'zgaruvchilar ham ko'tariladi, lekin ular initsializatsiya qilinmaydi. Ular "Vaqtinchalik O'lik Zona" (Temporal Dead Zone - TDZ) deb nomlanuvchi holatda bo'ladi. let yoki const o'zgaruvchisiga e'lon qilinishidan oldin murojaat qilish ReferenceErrorga olib keladi.

            
console.log(myLet); // Natija: ReferenceError: Cannot access 'myLet' before initialization
let myLet = 20;
console.log(myLet); // Natija: 20

            

              
                Copy
              
            
          

            
console.log(myConst); // Natija: ReferenceError: Cannot access 'myConst' before initialization
const myConst = 30;
console.log(myConst); // Natija: 30

            

              
                Copy
              
            
          

Tushuntirish:

1. Kompilyatsiya paytida, myLet va myConst ko'tariladi, lekin TDZda initsializatsiya qilinmagan holda qoladi.
2. Ularga e'lon qilinishidan oldin murojaat qilishga urinish ReferenceError xatosini beradi.
3. E'lon qatoriga yetib kelganda, myLet va myConst initsializatsiya qilinadi.
4. Keyingi console.log bayonotlari ularga berilgan qiymatlarni chiqaradi.

Nima uchun Vaqtinchalik O'lik Zona mavjud?

TDZ dasturchilarga keng tarqalgan dasturlash xatolaridan qochishga yordam berish uchun kiritilgan. Bu o'zgaruvchilarni o'z doirasining boshida e'lon qilishga undaydi va initsializatsiya qilinmagan o'zgaruvchilardan tasodifiy foydalanishning oldini oladi. Bu esa kodni yanada bashorat qilinadigan va qo'llab-quvvatlanadigan qiladi.

O'zgaruvchilarni E'lon Qilishning Eng Yaxshi Amaliyotlari

• O'zgaruvchilarni ishlatishdan oldin har doim e'lon qiling. Bu chalkashlik va ko'tarilish bilan bog'liq potentsial xatolarning oldini oladi.
• Standart holatda constdan foydalaning. Agar o'zgaruvchining qiymati o'zgarmasa, uni const bilan e'lon qiling. Bu tasodifiy qayta qiymat berishning oldini olishga yordam beradi.
• Qayta qiymat berilishi kerak bo'lgan o'zgaruvchilar uchun letdan foydalaning. Agar o'zgaruvchining qiymati o'zgaradigan bo'lsa, uni let bilan e'lon qiling.
• Zamonaviy JavaScript-da vardan foydalanishdan saqlaning. let va const yaxshiroq doira (scoping) ta'minlaydi va keng tarqalgan xatolarning oldini oladi.

Funksiyalarning Ko'tarilishi: E'lonlar va Ifodalar

Funksiyalarning ko'tarilishi funksiya e'lonlari va funksiya ifodalari uchun turlicha ishlaydi.

Funksiya E'lonlari

Funksiya e'lonlari to'liq ko'tariladi. Bu shuni anglatadiki, siz funksiya e'lon qilish sintaksisi yordamida e'lon qilingan funksiyani kodda haqiqiy e'lon qilinishidan oldin chaqirishingiz mumkin. Butun funksiya tanasi funksiya nomi bilan birga ko'tariladi.

            
myFunction(); // Natija: Hello from myFunction

function myFunction() {
  console.log("Hello from myFunction");
}

            

              
                Copy
              
            
          

Tushuntirish:

1. Kompilyatsiya paytida, butun myFunction doiraning yuqorisiga ko'tariladi.
2. Shuning uchun, myFunction()ni e'lon qilinishidan oldin chaqirish hech qanday xatosiz ishlaydi.

Funksiya Ifodalari

Boshqa tomondan, funksiya ifodalari xuddi shunday tarzda ko'tarilmaydi. Funksiya ifodasi var bilan e'lon qilingan o'zgaruvchiga tayinlanganida, o'zgaruvchi ko'tariladi, lekin funksiyaning o'zi emas. O'zgaruvchi undefined bilan initsializatsiya qilinadi va uni qiymat berishdan oldin chaqirish TypeErrorga olib keladi.

            
myFunctionExpression(); // Natija: TypeError: myFunctionExpression is not a function

var myFunctionExpression = function() {
  console.log("Hello from myFunctionExpression");
};

            

              
                Copy
              
            
          

Agar funksiya ifodasi let yoki const bilan e'lon qilingan o'zgaruvchiga tayinlansa, unga e'lon qilinishidan oldin murojaat qilish let va const bilan o'zgaruvchilarning ko'tarilishiga o'xshash tarzda ReferenceErrorga olib keladi.

            
myFunctionExpressionLet(); // Natija: ReferenceError: Cannot access 'myFunctionExpressionLet' before initialization

let myFunctionExpressionLet = function() {
  console.log("Hello from myFunctionExpressionLet");
};

            

              
                Copy
              
            
          

Tushuntirish:

1. var bilan myFunctionExpression ko'tariladi, lekin undefinedga initsializatsiya qilinadi. undefinedni funksiya sifatida chaqirish TypeErrorga olib keladi.
2. let bilan myFunctionExpressionLet ko'tariladi, lekin TDZda qoladi. Uni e'lon qilishdan oldin murojaat qilish ReferenceErrorga olib keladi.

Nomlangan Funksiya Ifodalari

Nomlangan funksiya ifodalari ko'tarilish borasida anonim funksiya ifodalariga o'xshash tarzda ishlaydi. O'zgaruvchi o'zining e'lon turiga (var, let, const) muvofiq ko'tariladi va funksiya tanasi faqat unga qiymat berilgan kod qatoridan keyin mavjud bo'ladi.

            
myNamedFunctionExpression(); // Natija: TypeError: myNamedFunctionExpression is not a function

var myNamedFunctionExpression = function myFunc() {
  console.log("Hello from myNamedFunctionExpression");
};

            

              
                Copy
              
            
          

Strelkali Funksiyalar va Ko'tarilish

ES6 (ECMAScript 2015) da kiritilgan strelkali funksiyalar funksiya ifodalari sifatida qabul qilinadi va shuning uchun funksiya e'lonlari kabi ko'tarilmaydi. Ular let yoki const bilan e'lon qilingan o'zgaruvchilarga tayinlangan funksiya ifodalari bilan bir xil ko'tarilish xususiyatini namoyish etadi - agar e'lon qilinishidan oldin murojaat qilinsa, ReferenceErrorga olib keladi.

            
myArrowFunction(); // Natija: ReferenceError: Cannot access 'myArrowFunction' before initialization

const myArrowFunction = () => {
  console.log("Hello from myArrowFunction");
};

            

              
                Copy
              
            
          

Funksiya E'lonlari va Ifodalari uchun Eng Yaxshi Amaliyotlar

• Funksiya ifodalaridan ko'ra funksiya e'lonlarini afzal ko'ring. Funksiya e'lonlari ko'tariladi, bu esa kodingizni o'qilishi osonroq va bashorat qilinadigan qiladi.
• Agar funksiya ifodalaridan foydalansangiz, ularni ishlatishdan oldin e'lon qiling. Bu potentsial xatolar va chalkashliklarning oldini oladi.
• Funksiya ifodalarini tayinlashda var, let va const o'rtasidagi farqlarni yodda tuting. let va const yaxshiroq doira (scoping) ta'minlaydi va keng tarqalgan xatolarning oldini oladi.

Amaliy Misollar va Qo'llash Holatlari

Keling, ko'tarilishning real hayotdagi stsenariylarga ta'sirini ko'rsatish uchun ba'zi amaliy misollarni ko'rib chiqamiz.

1-misol: Tasodifiy O'zgaruvchining Soyalanishi (Variable Shadowing)

            
var x = 1;

function example() {
  console.log(x); // Natija: undefined
  var x = 2;
  console.log(x); // Natija: 2
}

example();
console.log(x); // Natija: 1

            

              
                Copy
              
            
          

Tushuntirish:

• example funksiyasi ichida, var x = 2 e'loni xni funksiya doirasining yuqorisiga ko'taradi.
• Biroq, var x = 2 qatori bajarilmaguncha u undefinedga initsializatsiya qilinadi.
• Bu birinchi console.log(x)ning qiymati 1 bo'lgan global x o'rniga undefinedni chiqarishiga olib keladi.

letdan foydalanish bu tasodifiy soyalanishning oldini olgan va ReferenceErrorga olib kelgan bo'lardi, bu esa xatoni aniqlashni osonlashtiradi.

2-misol: Shartli Funksiya E'lonlari (Qoching!)

Garchi ba'zi muhitlarda texnik jihatdan mumkin bo'lsa-da, shartli funksiya e'lonlari turli JavaScript dvigatellarida nomuvofiq ko'tarilish tufayli oldindan aytib bo'lmaydigan xatti-harakatlarga olib kelishi mumkin. Ulardan qochish odatda eng yaxshisidir.

            
if (true) {
  function sayHello() {
    console.log("Hello");
  }
} else {
  function sayHello() {
    console.log("Goodbye");
  }
}

sayHello(); // Natija: (Xatti-harakat muhitga qarab o'zgaradi)

            

              
                Copy
              
            
          

Buning o'rniga, let yoki const bilan e'lon qilingan o'zgaruvchilarga tayinlangan funksiya ifodalaridan foydalaning:

            
let sayHello;
if (true) {
  sayHello = function() {
    console.log("Hello");
  };
} else {
  sayHello = function() {
    console.log("Goodbye");
  };
}

sayHello(); // Natija: Hello

            

              
                Copy
              
            
          

3-misol: Klozuralar (Closures) va Ko'tarilish

Ko'tarilish klozuralarning xatti-harakatiga ta'sir qilishi mumkin, ayniqsa sikllarda vardan foydalanganda.

            
for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

// Natija: 5 5 5 5 5

            

              
                Copy
              
            
          

Tushuntirish:

• var i ko'tarilganligi sababli, sikl ichida yaratilgan barcha klozuralar bir xil i o'zgaruvchisiga ishora qiladi.
• setTimeout qayta chaqiruvlari (callbacks) bajarilgunga qadar, sikl allaqachon tugagan bo'ladi va ining qiymati 5 ga teng bo'ladi.

Buni tuzatish uchun letdan foydalaning, u siklning har bir iteratsiyasida i uchun yangi bog'lanish yaratadi:

            
for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

// Natija: 0 1 2 3 4

            

              
                Copy
              
            
          

Umumiy Mulohazalar va Eng Yaxshi Amaliyotlar

Ko'tarilish JavaScript-ning til xususiyati bo'lsa-da, uning nozik tomonlarini tushunish turli muhitlarda va turli darajadagi tajribaga ega dasturchilar uchun bashorat qilinadigan va qo'llab-quvvatlanadigan kod yozish uchun juda muhimdir. Quyida ba'zi umumiy mulohazalar keltirilgan:

• Kodning O'qilishi va Qo'llab-quvvatlanishi: Ko'tarilish kodni o'qish va tushunishni qiyinlashtirishi mumkin, ayniqsa bu tushuncha bilan tanish bo'lmagan dasturchilar uchun. Eng yaxshi amaliyotlarga rioya qilish kodning ravshanligini oshiradi va xatolar ehtimolini kamaytiradi.
• Brauzerlararo Moslik: Garchi ko'tarilish standartlashtirilgan xatti-harakat bo'lsa-da, brauzerlardagi JavaScript dvigatellari implementatsiyalaridagi nozik farqlar ba'zan kutilmagan natijalarga olib kelishi mumkin, ayniqsa eski brauzerlar yoki nostandart kod na'munalari bilan. Sinchkovlik bilan test qilish zarur.
• Jamoaviy Hamkorlik: Jamoada ishlaganda, o'zgaruvchi va funksiya e'lonlari bo'yicha aniq kodlash standartlari va yo'riqnomalarini o'rnatish izchillikni ta'minlashga va ko'tarilish bilan bog'liq xatolarning oldini olishga yordam beradi. Kodni ko'rib chiqish (Code review) ham potentsial muammolarni erta aniqlashga yordam beradi.
• ESLint va Kod Linterlari: Potentsial ko'tarilish bilan bog'liq muammolarni avtomatik ravishda aniqlash va kodlashning eng yaxshi amaliyotlarini joriy etish uchun ESLint yoki boshqa kod linterlaridan foydalaning. Linterni e'lon qilinmagan o'zgaruvchilarni, soyalanishni va boshqa keng tarqalgan ko'tarilish bilan bog'liq xatolarni belgilash uchun sozlang.
• Eski Kodni Tushunish: Eski JavaScript kod bazalari bilan ishlaganda, ko'tarilishni tushunish kodni diskriminatsiya qilish va samarali qo'llab-quvvatlash uchun zarur. Eski kodda var va funksiya e'lonlarining potentsial tuzoqlaridan xabardor bo'ling.
• Xalqarolashtirish (i18n) va Mahalliylashtirish (l10n): Ko'tarilishning o'zi i18n yoki l10nga to'g'ridan-to'g'ri ta'sir qilmasa-da, uning kodning ravshanligi va qo'llab-quvvatlanishiga ta'siri kodni turli tillar uchun moslashtirish osonligiga bilvosita ta'sir qilishi mumkin. Aniq va yaxshi tuzilgan kodni tarjima qilish va moslashtirish osonroq.

Xulosa

JavaScript ko'tarilishi kuchli, ammo potentsial chalkash mexanizmdir. O'zgaruvchi e'lonlari (var, let, const) va funksiya e'lonlari/ifodalari qanday ko'tarilishini tushunib, siz yanada bashorat qilinadigan, qo'llab-quvvatlanadigan va xatosiz JavaScript kodi yoza olasiz. Ko'tarilishning kuchidan foydalanish va uning tuzoqlaridan qochish uchun ushbu qo'llanmada keltirilgan eng yaxshi amaliyotlarni qo'llang. Zamonaviy JavaScript-da var o'rniga const va letdan foydalanishni va kodning o'qilishiga ustuvorlik berishni unutmang.

Qo'shimcha Resurslar

• MDN Web Docs: Hoisting
• W3Schools: JavaScript Hoisting
• javascript.info: Closures