Javascript intervyu savollari: Hoisting

Yaqinda bir loyihaga qo'shilish uchun intervyu bo'lib o'tdi. Intervyuda har xil savollar berildi. Shulardan biri ushbu:

x = 30;

for (var i = 0; i < 10; i++) {
  output(x + i);
}

const output = (...args) => console.log(args);

var x;

dasturidir. Savolda ushbu dasturning natijasi haqida so'raldi. Agar ushbu kod parchasini brauzerni konsolida ishlatib ko'rsak, bunday xatolikni ko'rishimiz mumkin.

Uncaught ReferenceError: Cannot access 'output' before initialization at <anonymous>:4:3

Xatolikni tushunish uchun avval biz Hosting bilan tanishib chiqishimiz kerak.

Hoisting

Hoisting bu Javascript kompilyatoridagi sodir bo'ladigan jarayonlardan biri bo'lib unda sodda qilib aytganda barcha funksiya va o'zgaruvchilar e'loni dastur kodining yuqorisiga ko'chiriladi. Lekin aslini olganda dasturning kompilyatsiya fazasida funksiya va o'zgaruvchilar e'loni xotiraga saqlanadi. Jarayonni tushunish uchun ushbu kodga e'tiborimizni qaratsak:

console.log(multiply(2,5)) // 10

function multiply(a,b) {
  return a * b;
}

Javascriptda har qanday kodni bajarishdan oldin funksiya e'lonini xotiraga saqlashning foydali tarafi biz funksiyani e'lon qilishdan oldin ishlatishimiz mumkin.

Faqat o'zgaruvchi yoki funksiya e'lonlari yuqoriga ko'tariladi.

Javascriptda faqat e'lonlar (declaration) yuqoriga ko'tariladi, ilitsializatsiyalar emas.

console.log(year); // undefined
var year;
year = 2021;

Yuqoridagi kodda year o'zgaruvchisi e'lon qilinganda unga boshlang'ich undefined qiymat tenglab qo'yiladi. Biz year o'zgaruvchisini 2021 ga tenglangandan oldin ishlatganimiz uchun uning qimati undefined bo'ladi.

Demak declaration - bu o'zgaruvchi yoki funksiya e'loni, initialization esa, o'zgaruvchiga qiymat belgilash bosqichi. Hoisting faqat declaration uchun ishlaydi.

let va const yordamida initialize qilingan o'zgaruvchilar ham yuqoriga ko'tarilmaydi.

// let-ga misol:
a = 1; // initsializatsiya.
let a; // Throws ReferenceError: Cannot access 'a' before initialization

// const-ga misol:
a = 1; // initsializatsiya.
const a; // Throws SyntaxError: Missing initializer in const declaration

Anonim funksiyalardan dasturning yuqori qismida foydalanib bo'lmaydi

Quyidagi dasturga qaraydigan bo'lsak, biz calc funksiyasini e'lon qilishdan oldin ishlatmoqdamiz. Bu yerda Javascript xatolik qaytaradi chunki biz anonim funksiyani calc o'zgaruvchisiga initsializatsiya qilayabmiz. var yordamida hosil qilingan o'zgaruvchi dasturning yuqorisiga ko'tariladi lekin faqat uning nomi, qiymati emas. Soddaroq qilib aytganda kod ishga tushayotganda Javascript calc nomli o'zgaruvchi borligini biladi. Lekin uning qiymati nima ekanligini bilmaydi. Shuning uchun biz xuddi undefined qiymatni funksiyasi sifatida ishlatganday bo'lib qolayabmiz va Javascript "Uzurkuya lekin qiymati calc o'zgaruvchisi funksiya emas" degan xatolik qaytarayabdi.

console.log(calc(1,2)); // Uncaught TypeError: calc is not a function
var calc = function (a,b) {
  return a + b;
}

Yuqoridagi masalamizga qaytadigan bo'lsak.

// x o'zgaruvchisi initsializatsiya qilindi.
x = 30;

for (var i = 0; i < 10; i++) {
  // siklni ichida output funksiyasini chaqirayabmiz
  // lekin output funksiyasi const kalit so'zi bilan
  // e'lon qilingani uchun yuqorida ishlatib bo'lmaydi.
  output(x + i);
}

const output = (...args) => console.log(args);

var x;

Ushbu koddagi xatolikni to'g'irlash uchun output funksiyasini dasturning siklning yuqorisiga ko'chirishimiz mumkin yoki function kalit so'zi bilan nomlangan funksiya e'lon qilishimiz mumkin.

Natija:

x = 30;

for (var i = 0; i < 10; i++) {
  output(x + i);
}

function output(...args) { console.log(args) };

var x;

Xulosa:

Hoisting jarayoni Javascriptni tushunishimizda muhim ro'l o'ynaydi. Chunki Javascript kodimizni yuqoridan pastga o'qigani uchun, funksiyalarimiz yoki o'zgaruvchilarimiz yuqorida bo'lsagina biz uni dasturning quyi qismida ishlatishimiz mumkin. Umumiy xulosalarimiz shuki:

• O'zgaruvchi va funksiya e'lonlari dasturimiz ishga tushishidan oldin Javascript kompilyatori tomonidan dasturning yuqorisiga ko'tariladi.

• let, const kalit so'zlari yordamida e'lon qilinga o'zgaruvchilarni biz dasturning yuqori qismida ishlata olmaymiz. var kalit so'zi bilan hosil qilingan o'zgaruvchidan foydalana olsak ham, lekin qiymati undefined bo'ladi.

• function kalit so'zi bilan e'lon qilingan nomli funksiyalar dastur ishlashdan oldin eng yuqoriga qo'yiladi. Anonim funksiyalar bundan mustasno.

---

Qo'shimcha o'qish uchun manba:

MDN veb sayti