Chapter 11 — Scope & Hoisting (Chuqur)

Bu — JavaScript'ni chuqur tushunish uchun eng muhim va, ayni paytda, eng ko'p chalkashtiriladigan mavzulardan biri. Chapter 1'da Scope haqida yuzaki gapirgan edik — endi uni ichki mexanizmigacha ochib beramiz.

---

11.1 Scope turlari

Simple Explanation

Scope — kodning qaysi qismida variable "ko'rinishi" (ishlatilishi mumkinligi)ni belgilaydigan hudud.
JavaScript'da 3 xil scope mavjud:

• Global Scope — butun fayl bo'ylab ko'rinadi.
• Function Scope — faqat o'sha function ichida ko'rinadi.
• Block Scope — faqat {} ichida ko'rinadi (let/const uchun).

Real-Life Analogy

🏢 Bir binoni tasavvur qiling:

• Global Scope — binoning umumiy hovlisi, hamma kira oladi.
• Function Scope — alohida ofis xonasi, faqat o'sha xona xodimlari kira oladi.
• Block Scope — ofis ichidagi kichik yig'ilishlar xonasi, faqat yig'ilish davomida "mavjud".

Example

script.js
JavaScriptNusxalash
01let globalVar = "Men hammayoqdan ko'rinaman";
02 
03function myFunction() {
04    let functionVar = "Men faqat shu function ichida ko'rinaman";
05 
06    if (true) {
07        let blockVar = "Men faqat shu block ichida ko'rinaman";
08        console.log(globalVar);   // ✅ ishlaydi
09        console.log(functionVar); // ✅ ishlaydi
10        console.log(blockVar);    // ✅ ishlaydi
11    }
12 
13    console.log(blockVar); // ❌ Xatolik — blockVar bu yerda mavjud emas
14}

Diagram

code.text
TEXTNusxalash
01Global Scope
02│
03├── globalVar
04│
05└── Function Scope (myFunction)
06    │
07    ├── functionVar
08    │
09    └── Block Scope (if)
10        │
11        └── blockVar

Explanation

Ichki scope tashqi scope'dagi variable'larni ko'ra oladi, lekin aksincha emas. Bu — "lexical scoping" deb ataladi (scope kod qanday yozilganiga qarab belgilanadi, dastur ishlash vaqtida emas).

11.2 var vs let/const — scope farqi

Simple Explanation

var — faqat function scopega ega, let/const esa block scopega ega. Bu farq ko'p xatolarga sabab bo'ladi.

Example — muammoli holat

script.js
JavaScriptNusxalash
01if (true) {
02    var x = 10;
03    let y = 20;
04}
05 
06console.log(x); // 10 — ishlaydi! (var block'ni "sezmaydi")
07console.log(y); // Xatolik — y aniqlanmagan

Explanation

var bilan yaratilgan x — if blokining ichida yozilgan bo'lsa-da, u block scope'ni "hurmat qilmaydi", faqat function (yoki global) scope'ni hurmat qiladi. Shuning uchun if blokidan tashqarida ham ko'rinadi.
let bilan yaratilgan y esa haqiqiy block scope'ga ega — if blokidan tashqarida umuman mavjud emas.

⚠️ Common Mistake
Loop ichida var ishlatish — klassik xato manbai:

script.js
JavaScriptNusxalash
01for (var i = 0; i < 3; i++) {
02    setTimeout(() => console.log(i), 100);
03}
04// Natija: 3, 3, 3 (kutilgan: 0, 1, 2)

Sabab: var — function/global scope'ga ega, shuning uchun barcha setTimeout callback'lari bitta xuddi shu i o'zgaruvchisiga ishora qiladi, va loop tugagach uning qiymati 3 bo'lib qoladi.

✅ To'g'ri:

script.js
JavaScriptNusxalash
01for (let i = 0; i < 3; i++) {
02    setTimeout(() => console.log(i), 100);
03}
04// Natija: 0, 1, 2

let har bir iteratsiyada yangi i yaratadi, shuning uchun har bir callback o'zining alohida isini "eslab qoladi" (bu — Chapter 12'dagi Closure tushunchasi bilan bog'liq).

11.3 ⚠️ Qiyin mavzu: Hoisting

Simple Explanation

Hoisting — JavaScript engine kodni ishga tushirishdan oldin, variable va function e'lonlarini "yuqoriga ko'taradi" (xotirada oldindan ajratib qo'yadi).

Nega bu mavzu qiyin?

Chunki natija "sehrli" ko'rinadi — kod yozilgan tartibga zid ravishda ishlaydi:

script.js
JavaScriptNusxalash
01console.log(message);
02 
03var message = "Salom";

Natija: undefined (xatolik emas!).

Ichki mexanizm qanday ishlaydi? (Technical Explanation)

JavaScript kodni ikki bosqichda ishlaydi:

1. 1-bosqich — Compilation (tayyorgarlik):
   Engine butun kodni "skanerlab chiqadi" va barcha var va function e'lonlarini xotiraga oldindan yozib qo'yadi (lekin qiymatlarisiz, faqat "bunday nom mavjud" deb).
2. 2-bosqich — Execution (bajarish):
   Kod yuqoridan pastga qarab, qatorma-qator bajariladi, va shu paytda variable'larga haqiqiy qiymatlar beriladi.

Diagram

code.text
TEXTNusxalash
01Yozilgan kod:              JavaScript qanday "ko'radi":
02 
03console.log(message);      var message; // hoisting bo'ladi
04                           console.log(message); // undefined
05var message = "Salom";     message = "Salom";

Function Hoisting

Function Declaration'lar to'liq hoisting qilinadi (nomi ham, tanasi ham):

script.js
JavaScriptNusxalash
01sayHi(); // ✅ ishlaydi!
02 
03function sayHi() {
04    console.log("Salom!");
05}

Lekin Function Expression hoisting qilinmaydi (Chapter 6'da ko'rgan edik):

script.js
JavaScriptNusxalash
01sayHi(); // ❌ Xatolik
02 
03const sayHi = function () {
04    console.log("Salom!");
05};

💡 Key Idea
Faqat e'lon (declaration) hoisting qilinadi, qiymat berish (assignment) emas. Shuning uchun var x = 5 da faqat var x hoisting bo'ladi, = 5 qismi o'z joyida qoladi.

11.4 ⚠️ Qiyin mavzu: Temporal Dead Zone (TDZ)

Simple Explanation

let va const ham aslida hoisting qilinadi, lekin ular vardan farqli — e'londan oldin ishlatishga urinilsa, undefined emas, xatolik beradi.
Ushbu "e'londan oldingi, ishlatib bo'lmaydigan hudud" — Temporal Dead Zone (TDZ) deb ataladi.

Real-Life Analogy

🚧 TDZ'ni qurilish maydoni deb tasavvur qiling: bino (variable) rejalashtirilgan (xotirada joy ajratilgan), lekin hali qurilmagan. Siz o'sha yerga kira olmaysiz (variable'ni ishlata olmaysiz) toki qurilish (e'lon qatori) tugamaguncha.

Example

script.js
JavaScriptNusxalash
01console.log(age); // ❌ ReferenceError: Cannot access 'age' before initialization
02 
03let age = 25;

var bilan solishtirish

🔥 Important
TDZ aslida xavfsizlik xususiyati — u dasturchini "hali tayyor bo'lmagan" variable'ni ishlatishdan ogohlantiradi, vardagi kabi jimgina undefined bilan yashirmaydi.

11.5 Nested Scope va Scope Chain

Simple Explanation

Agar variable joriy scope'da topilmasa, JavaScript uni tashqi scope'lardan qidiradi — bu jarayon Scope Chain deb ataladi.

Example

script.js
JavaScriptNusxalash
01let a = "global";
02 
03function outer() {
04    let b = "outer";
05 
06    function inner() {
07        let c = "inner";
08        console.log(a, b, c); // "global outer inner"
09    }
10 
11    inner();
12}
13 
14outer();

How It Works

1. inner() ichida c qidiriladi — topiladi (o'z scope'ida).
2. b qidiriladi — innerda yo'q, outerdan topiladi.
3. a qidiriladi — innerda ham, outerda ham yo'q, global scope'dan topiladi.

Diagram

code.text
TEXTNusxalash
01Global Scope (a)
02   ↓
03outer() Scope (b)
04   ↓
05inner() Scope (c)
06 
07inner() → c → b (outer'dan) → a (global'dan)

🔗 Connection
Scope Chain — Chapter 12'da o'rganiladigan Closure tushunchasining asosini tashkil qiladi. Closure aslida — function o'zining scope chain'ini "eslab qolishi"dir.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
Global scope'da bitta variable, function ichida boshqa variable yarating va ikkalasini ham function ichidan chiqarib ko'ring.
Required Concepts:

• Global scope
• Function scope
  Hint:
  Function ichidan global variable'ga murojaat qilish mumkinligini eslang.

---

🟡 Exercise 2 — Medium

Task:
Quyidagi kodni ishga tushirmasdan, natijasini oldindan ayting, keyin tekshiring:

script.js
JavaScriptNusxalash
01console.log(typeof myVar);
02console.log(typeof myLet);
03 
04var myVar = "test";
05let myLet = "test";

Required Concepts:

• Hoisting
• Temporal Dead Zone
  Hint:
  var va let hoisting'da boshqacha xatti-harakat qiladi.

---

🔴 Exercise 3 — Hard

Task:
Loop ichida var ishlatilgani sabab yuzaga kelgan xatoni let yordamida tuzating:

script.js
JavaScriptNusxalash
01for (var i = 1; i <= 3; i++) {
02    setTimeout(function () {
03        console.log("Son: " + i);
04    }, 1000);
05}
06// Muammo: 3 marta "Son: 4" chiqadi

Required Concepts:

• var vs let scope
• setTimeout
  Hint:
  Faqat varni letga almashtiring va nima o'zgarishini kuzating.

🔮 Predict the Output

script.js
JavaScriptNusxalash
01function test() {
02    console.log(a);
03    var a = 5;
04    console.log(a);
05}
06 
07test();

🧠 Think first! Javobni ko'rishdan oldin kamida 30 soniya o'ylang.

<details> <summary>Answer</summary> undefined 5

Why?
var a hoisting tufayli function boshiga "ko'tariladi" (lekin qiymatisiz), shuning uchun birinchi console.log xatolik bermaydi, faqat undefined chiqaradi. Ikkinchi console.loggacha aga 5 qiymati berilgan bo'ladi.

</details>

🐛 Debugging Challenge

Quyidagi kodda muammo bor:

script.js
JavaScriptNusxalash
01function createCounters() {
02    let counters = [];
03 
04    for (var i = 0; i < 3; i++) {
05        counters.push(function () {
06            return i;
07        });
08    }
09 
10    return counters;
11}
12 
13let myCounters = createCounters();
14console.log(myCounters[0]());
15console.log(myCounters[1]());
16console.log(myCounters[2]());

Your Task:

• Kod nima natija berishini bashorat qiling (kutilgan: 0, 1, 2).
• Nima uchun natija boshqacha ekanini tushuntiring.
• Kodni tuzating.

<details> <summary>Solution</summary> Muammo: Barcha uchta natija 3 bo'lib chiqadi, chunki var — function scope'ga ega, va barcha function'lar bitta umumiy iga ishora qiladi. Loop tugagach, i qiymati 3 bo'lib qoladi.

Yechim: varni letga almashtirish kerak — har bir iteratsiyada yangi i yaratiladi:

script.js
JavaScriptNusxalash
01function createCounters() {
02    let counters = [];
03 
04    for (let i = 0; i < 3; i++) {
05        counters.push(function () {
06            return i;
07        });
08    }
09 
10    return counters;
11}
12 
13let myCounters = createCounters();
14console.log(myCounters[0]()); // 0
15console.log(myCounters[1]()); // 1
16console.log(myCounters[2]()); // 2

</details>

📌 Chapter Summary

• Scope 3 xil: Global, Function, Block.
• var — function scope, let/const — block scope.
• Hoisting — e'lonlarni yuqoriga "ko'tarish" mexanizmi.
• TDZ — let/const e'londan oldin ishlatilsa xatolik beradigan hudud.
• Scope Chain — variable topilmasa, tashqi scope'lardan qidirish jarayoni.

🎯 Key Takeaways

• Zamonaviy kodda vardan qochib, let/const ishlatish tavsiya etiladi — block scope xavfsizroq.
• Hoisting faqat e'lonni ko'taradi, qiymatni emas.
• Function Declaration to'liq hoisting qilinadi, Function Expression esa yo'q.
• TDZ — xato emas, balki xavfsizlik mexanizmi.
• Loop ichida let ishlatish — har bir iteratsiyada yangi scope yaratadi, bu closure bilan ishlashda muhim.

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01// Scope turlari
02let global1 = "global";      // Global scope
03function fn() {
04    let local = "function";  // Function scope
05    if (true) {
06        let block = "block"; // Block scope
07    }
08}
09 
10// Hoisting
11console.log(x); // undefined (var hoisting)
12var x = 5;
13 
14console.log(y); // ReferenceError (TDZ)
15let y = 5;

---