Chapter 12 — Closures

Closure — JavaScript'dagi eng kuchli, ayni paytda eng qiyin tushuniladigan mavzulardan biri. Aslida, agar Chapter 11 (Scope Chain)ni tushungan bo'lsangiz, Closure sizga unchalik qiyin tuyulmaydi — chunki Closure aynan Scope Chain'ning tabiiy natijasidir.

---

12.1 Closure nima?

Simple Explanation

Closure — function o'zi yaratilgan muhitdagi (scope'dagi) variable'larni "eslab qolishi" va o'sha function boshqa joyda chaqirilganda ham o'sha variable'larga murojaat qila olishi.

Why Does It Exist?

Closure orqali:

• Ma'lumotni "yashirin" (private) holda saqlash mumkin.
• Function'ga "xotira" berish mumkin.
• Bir marta sozlangan function'dan qayta-qayta moslashtirilgan versiyalar yaratish mumkin.

Real-Life Analogy

🎒 Closure'ni "sayohatga olib ketiladigan ryukzak" deb tasavvur qiling. Function tug'ilgan joyidan (scope'idan) uzoqlashsa ham, o'sha yerdagi kerakli narsalarni (variable'larni) ryukzagiga solib, o'zi bilan olib ketadi.

Eng oddiy misol

script.js
JavaScriptNusxalash
01function outer() {
02    let message = "Salom, Closure!";
03 
04    function inner() {
05        console.log(message);
06    }
07 
08    return inner;
09}
10 
11let myFunction = outer();
12myFunction(); // "Salom, Closure!"

Bu yerda nima sodir bo'lyapti? (bosqichma-bosqich)

Bu — ko'pchilikni chalg'itadigan joy, shuning uchun batafsil ko'ramiz:

1. outer() chaqiriladi.
2. outer() ichida message variable yaratiladi va inner nomli function e'lon qilinadi.
3. outer() — inner functionning o'zini (chaqirmasdan) return qiladi.
4. Odatiy holatda, outer() ishlashi tugagach, uning ichidagi message variable "yo'qolishi" kerak edi (chunki function scope tugadi).
5. Lekin — inner function messagega bog'liq bo'lgani uchun, JavaScript engine messageni xotiradan o'chirmaydi, balki inner bilan birga "saqlab qoladi".
6. myFunction — aslida inner functionning o'zi, va u hali ham messagega kira oladi, garchi outer() allaqachon "tugagan" bo'lsa ham.

Diagram

code.text
TEXTNusxalash
01outer() chaqiriladi
02   │
03   ├── message = "Salom, Closure!" yaratiladi
04   │
05   └── inner function yaratiladi (message'ni "eslab qoladi")
06         │
07         └── return inner  →  outer() tugaydi, LEKIN
08                                message o'chmaydi, chunki
09                                inner unga hali ham bog'liq

🔥 Important
Bu — Closure'ning eng muhim va eng "sehrli" tomoni: odatda function tugagach uning ichidagi local variable'lar xotiradan tozalanadi (garbage collection), lekin agar ichki function tashqi variable'ga bog'liq bo'lib qolsa, o'sha variable "tirik" qolaveradi.

12.2 Closure va Private Variables

Simple Explanation

Closure'ning eng ko'p ishlatiladigan qo'llanilishi — private (tashqaridan bevosita o'zgartirib bo'lmaydigan) ma'lumot yaratish.

Example — Counter yaratish

script.js
JavaScriptNusxalash
01function createCounter() {
02    let count = 0;
03 
04    return {
05        increment: function () {
06            count++;
07            return count;
08        },
09        decrement: function () {
10            count--;
11            return count;
12        },
13        getCount: function () {
14            return count;
15        }
16    };
17}
18 
19let counter = createCounter();
20 
21console.log(counter.increment()); // 1
22console.log(counter.increment()); // 2
23console.log(counter.decrement()); // 1
24console.log(counter.count);       // undefined — to'g'ridan-to'g'ri kirib bo'lmaydi!

Explanation

count variable createCounter() ichida "yashiringan". Uni faqat increment, decrement, getCount orqaligina o'zgartirish yoki ko'rish mumkin — to'g'ridan-to'g'ri counter.count deb yozib bo'lmaydi.

💡 Key Idea
Bu — boshqa dasturlash tillaridagi encapsulation (Chapter 24'da OOP orqali ham o'rganamiz) tushunchasining Closure yordamida amalga oshirilishi.

12.3 ⚠️ Qiyin mavzu: Loop ichida Closure

Simple Explanation

Bu — Chapter 11'da ko'rgan var muammosining Closure nuqtai nazaridan tushuntirilishi. Endi buni chuqurroq ko'ramiz.

Muammoli misol

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

Nima uchun barchasi "4" chiqadi?

Bu yerda 3 ta alohida function yaratilganday tuyuladi, lekin aslida ularning barchasi bitta xuddi shu i variable'ga closure orqali bog'langan (chunki var — function scope, u loop uchun alohida nusxa yaratmaydi).
Loop tugagach, i qiymati 4 bo'lib qoladi (chunki i <= 3 sharti false bo'lganda i allaqachon 4ga teng bo'ladi), va barcha 3 ta function xuddi shu ini "ko'radi".

Diagram

code.text
TEXTNusxalash
01i (bitta, umumiy) = 4 (loop tugagandan keyin)
02      ↑        ↑        ↑
03  funcs[0]  funcs[1]  funcs[2]
04  (barchasi bitta i ga ishora qiladi)

Yechim 1 — let ishlatish

script.js
JavaScriptNusxalash
01for (let i = 1; i <= 3; i++) {
02    functions.push(function () {
03        console.log(i);
04    });
05}
06// Natija: 1, 2, 3

Nima uchun ishlaydi? let — har bir iteratsiyada yangi i yaratadi (Chapter 11, block scope). Shuning uchun har bir function o'zining alohida i nusxasiga closure orqali bog'lanadi.

Diagram (let bilan)

code.text
TEXTNusxalash
01i=1 (o'z nusxasi) ← funcs[0]
02i=2 (o'z nusxasi) ← funcs[1]
03i=3 (o'z nusxasi) ← funcs[2]

Yechim 2 — IIFE (agar var ishlatish shart bo'lsa)

script.js
JavaScriptNusxalash
01for (var i = 1; i <= 3; i++) {
02    (function (currentI) {
03        functions.push(function () {
04            console.log(currentI);
05        });
06    })(i);
07}

Explanation

Har bir iteratsiyada darhol chaqiriladigan function (IIFE — Immediately Invoked Function Expression) yaratiladi, va u ining joriy qiymatini currentI parametriga nusxalab oladi — shu orqali har bir iteratsiya uchun alohida "muzlatilgan" qiymat hosil bo'ladi.

🔗 Connection
Bugungi kunda let mavjud bo'lgani uchun, IIFE usuli kamdan-kam ishlatiladi, lekin eski kodlarni tushunish uchun buni bilish muhim.

12.4 Closure yordamida Function Factory

Simple Explanation

Closure orqali "sozlangan" function'lar yaratuvchi function'lar (function factory) yasash mumkin.

Example

script.js
JavaScriptNusxalash
01function createMultiplier(multiplier) {
02    return function (number) {
03        return number * multiplier;
04    };
05}
06 
07let double = createMultiplier(2);
08let triple = createMultiplier(3);
09 
10console.log(double(5)); // 10
11console.log(triple(5)); // 15

Explanation

double va triple — ikkalasi ham createMultiplierdan yaratilgan, lekin har biri o'zining multiplier qiymatini (mos ravishda 2 va 3) closure orqali "eslab qoladi".

🎯 Bu naqsh — dasturlashda "partial application" yoki **"currying"**ning oddiy shakli hisoblanadi (Chapter 45'da chuqurroq o'rganamiz).

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
greet(name) function qaytaradigan createGreeter() function yozing — natijada name parametrini "eslab qolgan" yangi function hosil bo'lsin.
Required Concepts:

• Closure asoslari
• Return function
  Hint:
  createGreeter() ichida function qaytaring, u nameni parametr sifatida qabul qilsin.

---

🟡 Exercise 2 — Medium

Task:
createCounter() funksiyasini kengaytirib, unga reset() metodini qo'shing — bu metod countni 0ga qaytarsin.
Required Concepts:

• Closure
• Object bilan bir nechta method qaytarish
  Hint:
  return qilinayotgan object ichiga yana bitta method qo'shing.

---

🔴 Exercise 3 — Hard

Task:
Bank hisobini simulyatsiya qiluvchi closure yozing: balance — private bo'lsin, faqat deposit(amount), withdraw(amount), getBalance() orqali unga ta'sir qilish mumkin bo'lsin. withdraw — agar balansdan ko'p pul yechilsa, xatolik xabarini chiqarsin.
Required Concepts:

• Closure
• Private state
• Conditional logic
  Hint:
  withdraw ichida if (amount > balance) shartini tekshiring.

🔮 Predict the Output

script.js
JavaScriptNusxalash
01function outer() {
02    let count = 0;
03 
04    return function () {
05        count++;
06        return count;
07    };
08}
09 
10let counter1 = outer();
11let counter2 = outer();
12 
13console.log(counter1()); // ?
14console.log(counter1()); // ?
15console.log(counter2()); // ?

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

<details> <summary>Answer</summary> 1 2 1

Why?
counter1 va counter2 — ikkalasi ham outer()ning alohida chaqiruvidan yaratilgan, shuning uchun har biri o'zining alohida count nusxasiga ega. counter1ni chaqirish counter2ning countiga ta'sir qilmaydi.

</details>

🐛 Debugging Challenge

Quyidagi kodda muammo bor:

script.js
JavaScriptNusxalash
01function createButtons() {
02    for (var i = 1; i <= 3; i++) {
03        document.body.innerHTML += `<button onclick="console.log(${i})">Button</button>`;
04    }
05}

Dasturchi 3 ta tugma yaratmoqchi: birinchisi 1, ikkinchisi 2, uchinchisi 3 chiqarishi kerak. Lekin barcha tugmalar bosilganda faqat oxirgi qiymat chiqadi (agar closure orqali yozilganda edi).

Your Task:

• Agar bu closure orqali (template string emas, balki addEventListener bilan) yozilganda, qanday muammo yuzaga kelishini tushuntiring.
• varni letga almashtirib, closure asosidagi to'g'ri yechim yozing.

<details> <summary>Solution</summary> Tushuntirish: Agar kod quyidagicha yozilganda edi:

script.js
JavaScriptNusxalash
01// ❌ Muammoli versiya
02for (var i = 1; i <= 3; i++) {
03    button.addEventListener("click", function () {
04        console.log(i);
05    });
06}

Barcha tugmalar 4ni chiqargan bo'lardi, chunki barcha click handler'lar bitta umumiy iga bog'langan bo'lardi.

Yechim:

script.js
JavaScriptNusxalash
01// ✅ To'g'ri versiya
02for (let i = 1; i <= 3; i++) {
03    button.addEventListener("click", function () {
04        console.log(i);
05    });
06}

let har bir iteratsiya uchun alohida i yaratadi, shuning uchun har bir tugma o'zining closure orqali "eslab qolingan" qiymatini chiqaradi.

</details>

📌 Chapter Summary

• Closure — function o'zi yaratilgan scope'dagi variable'larni "eslab qolishi".
• Closure orqali private (yashirin) ma'lumot yaratish mumkin.
• Loop ichida var bilan closure ishlatilsa, barcha function'lar bitta umumiy variable'ga bog'lanadi.
• let — har bir iteratsiyada yangi scope yaratib, bu muammoni hal qiladi.
• Closure — function factory (moslashtirilgan function'lar yaratish) uchun ishlatiladi.

🎯 Key Takeaways

• Closure — Scope Chain'ning tabiiy natijasi, "sehr" emas.
• Har bir function chaqiruvi (outer()) o'zining alohida closure muhitini yaratadi.
• Closure orqali ma'lumotni tashqaridan to'g'ridan-to'g'ri o'zgartirib bo'lmaydigan qilib "yashirish" mumkin.
• Loop + closure + var — klassik xato manbai, let bilan hal qilinadi.
• Closure — zamonaviy JavaScript'da (React hooks, module pattern va h.k.) juda keng qo'llaniladi.

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01function outer() {
02    let secret = "hidden";
03 
04    return function () {
05        return secret; // closure orqali secret'ga kirish
06    };
07}
08 
09let getSecret = outer();
10console.log(getSecret()); // "hidden"
11 
12// Private counter pattern
13function createCounter() {
14    let count = 0;
15    return {
16        increment: () => ++count,
17        getCount: () => count
18    };
19}

---