Chapter 43 — Memory Management & Garbage Collection

Bu bobda JavaScript engine xotirani qanday boshqarishini, va nega ba'zida dasturlar "xotira sizib chiqishi" (memory leak)ga duch kelishini o'rganamiz.

---

43.1 Xotira hayot sikli

Simple Explanation

Har qanday dasturlash tilida, xotira odatda 3 bosqichdan o'tadi:

1. Ajratish (Allocation) — kerakli xotira "band qilinadi".
2. Ishlatish (Use) — xotiradagi ma'lumot o'qiladi/yoziladi.
3. Ozod qilish (Release) — endi kerak bo'lmagan xotira "bo'shatiladi".

JavaScript'da xotira avtomatik boshqariladi

Ko'p tillardan (masalan, C++) farqli, JavaScript'da dasturchi xotirani qo'lda ozod qilishi shart emas — buni Garbage Collector (GC) avtomatik bajaradi.

Example

script.js
JavaScriptNusxalash
01let user = { name: "Ali" }; // xotira ajratiladi
02 
03user = null; // endi "Ali" object'iga hech kim ishora qilmaydi
04// Garbage Collector uni keyinroq avtomatik "tozalaydi"

43.2 ⚠️ Qiyin mavzu: Reachability (Yetib bo'lish) tushunchasi

Simple Explanation

Garbage Collector — "bu obyekt kerakmi yoki yo'qmi"ni Reachability (yetib bo'lish) tamoyili orqali aniqlaydi: agar biror obyektga hech qanday yo'l bilan yetib bo'lmasa (unga hech qanday havola qolmasa), u "chiqindi" (garbage) hisoblanadi va tozalanadi.

Real-Life Analogy

🏝️ Reachability'ni orolga o'xshating: agar biror oroldan (root — asosiy dastur) hech qanday ko'prik yoki yo'l orqali boshqa bir oroliga (obyekt) yetib bo'lmasa, o'sha orol "yo'qolgan" hisoblanadi, garchi u jismonan hali mavjud bo'lsa ham.

"Root" (Ildiz) obyektlar

Har doim "yetib bo'ladigan" hisoblanadigan asosiy obyektlar:

• Global variable'lar
• Joriy ishlayotgan function'lardagi local variable'lar va parametrlar
• Call Stack'dagi barcha function'larning o'z ichki variable'lari (Chapter 29)

Diagram — Reachability

code.text
TEXTNusxalash
01[Root: global scope]
02        │
03        ├──▶ user ──▶ { name: "Ali" }  ← yetib bo'ladi, TIRIK
04        │
05        └──▶ oldUser = null            ← endi hech kimga yo'l yo'q
06                    │
07                    ▼
08             { name: "Vali" }  ← YETIB BO'LMAYDI, GC TOZALAYDI

💡 Key Idea
Garbage Collector — "bu obyekt ishlatilyaptimi" deb emas, "bu obyektga hali ham yo'l bormi" deb so'raydi. Agar yo'l bo'lmasa (reachable emas), obyekt — chiqindi.

43.3 ⚠️ Qiyin mavzu: Memory Leak (Xotira sizib chiqishi)

Simple Explanation

Memory Leak — dastur endi kerak bo'lmagan obyektga tasodifan hali ham havola saqlab qolishi, natijada Garbage Collector uni "tirik" deb hisoblab, tozalay olmasligi.

Nega bu muhim?

Agar dastur uzoq vaqt (masalan, bir necha soat) ishlasa va har safar kichik-kichik "sizib chiqishlar" to'planib borsa, oxir-oqibat dastur juda ko'p xotira egallab, sekinlashishi yoki hatto "yiqilishi" (crash) mumkin.

Muammo 1 — Unutilgan Global Variable'lar

script.js
JavaScriptNusxalash
01function createGlobalLeak() {
02    accidentalGlobal = "Men global bo'lib qoldim"; // 'let'/'var' yozilmagan!
03}
04 
05createGlobalLeak();

Explanation
let/const/var yozilmasdan variable'ga qiymat berilsa, JavaScript uni avtomatik ravishda global qiladi (strict mode'da bo'lmasa). Bu — function tugagandan keyin ham, o'sha ma'lumot hech qachon tozalanmasligini anglatadi, chunki global scope — har doim "root" dan yetib bo'ladi.

⚠️ Common Mistake
Chapter 11'da o'rgangan qoidani eslash muhim: har doim let/const bilan variable e'lon qiling. Bu — nafaqat Scope tushunchasi uchun, balki xotira boshqaruvi uchun ham muhim.

Muammo 2 — Unutilgan Timer'lar (setInterval)

script.js
JavaScriptNusxalash
01function startTracking(element) {
02    setInterval(function () {
03        console.log(element.innerHTML); // element'ga doimiy havola saqlanadi
04    }, 1000);
05}
06 
07let box = document.getElementById("box");
08startTracking(box);
09 
10box = null; // dasturchi "box"ni tozalamoqchi, lekin...
11// setInterval ICHIDAGI closure hali ham 'element'ga (asl box'ga) ishora qilib turibdi!

Explanation
Bu — Chapter 30'da o'rgangan setIntervalning yashirin xavfi: agar clearInterval() chaqirilmasa, timer abadiy ishlayveradi, va uning ichidagi closure (Chapter 12) orqali ushlab turilgan element obyekti ham hech qachon Garbage Collector tomonidan tozalanmaydi — garchi tashqi box variable'i null qilingan bo'lsa ham.

🔗 Connection
Bu — Chapter 30.2'dagi "setIntervalni to'xtatishni unutish" ogohlantirishining, endi xotira nuqtai nazaridan tushuntirilishi.

Muammo 3 — Unutilgan Event Listener'lar

script.js
JavaScriptNusxalash
01function attachHandler() {
02    let largeData = new Array(1000000).fill("ma'lumot");
03 
04    document.getElementById("btn").addEventListener("click", function () {
05        console.log(largeData.length); // largeData'ga doimiy havola
06    });
07}
08 
09attachHandler();

Explanation
Event listener ichidagi closure — largeDataga (juda katta array) doimiy ravishda ishora qilib turadi. Agar bu tugma DOM'dan o'chirilsa ham (element.remove() — Chapter 32), lekin listener avval removeEventListener orqali olib tashlanmasa, ba'zi hollarda largeData xotirada "tirik" qolib ketishi mumkin.

43.4 Memory Leak'larning oldini olish

Jadval — Yaxshi amaliyotlar

Amaliy misol — to'g'ri "tozalash" (cleanup)

script.js
JavaScriptNusxalash
01class Timer {
02    constructor() {
03        this.intervalId = null;
04    }
05 
06    start() {
07        this.intervalId = setInterval(() => {
08            console.log("Ishlayapti...");
09        }, 1000);
10    }
11 
12    stop() {
13        if (this.intervalId) {
14            clearInterval(this.intervalId);
15            this.intervalId = null;
16        }
17    }
18}
19 
20let timer = new Timer();
21timer.start();
22 
23// Kerak bo'lmay qolganda:
24timer.stop(); // xotira to'g'ri "bo'shatiladi"

🔥 Important
Har safar setInterval, addEventListener, yoki uzoq muddatli obuna (Chapter 42'dagi Observer Pattern) yaratganda, doim "buni qanday va qachon to'xtataman/tozalayman?" deb o'ylab qo'yish — professional dasturlashning muhim odati hisoblanadi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
Quyidagi kodda potentsial xotira muammosini toping va tushuntiring:

script.js
JavaScriptNusxalash
01function saveData() {
02    globalData = { info: "muhim ma'lumot" };
03}

Required Concepts:

• Global variable leak
  Hint:
  let/const yozilganmi yoki yo'qmi, diqqat bilan qarang.

🟡 Exercise 2 — Medium

Task:
Timer class yozing (Chapter 43.4'dagi kabi), start() va stop() metodlari bilan. stop() chaqirilmasdan oldin va keyin intervalIdning holatini tekshirib ko'ring.
Required Concepts:

• clearInterval
• Class bilan resurslarni boshqarish
  Hint:
  Chapter 43.4'dagi misolni to'g'ridan-to'g'ri qo'llang.

🔴 Exercise 3 — Hard

Task:
EventManager class yarating — addListener(element, event, callback) metodi listener'ni qo'shadi va uni ichki array'da "eslab qoladi" ({element, event, callback} shaklida). removeAllListeners() metodi — barcha saqlangan listener'larni removeEventListener orqali to'g'ri olib tashlasin.
Required Concepts:

• addEventListener/removeEventListener (Chapter 33)
• Array (saqlash uchun)
  Hint:
  Har bir addListener chaqiruvida, {element, event, callback} object'ini ichki array'ga push qiling.

🔮 Predict the Output

script.js
JavaScriptNusxalash
01function createUser() {
02    let user = { name: "Ali" };
03    return user;
04}
05 
06let user1 = createUser();
07let user2 = user1;
08 
09user1 = null;
10 
11console.log(user2.name);

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

<details> <summary>Answer</summary> "Ali"

Why?
user1 = null — faqat user1 variable'ining { name: "Ali" } obyektiga bo'lgan havolasini olib tashlaydi. Lekin user2 hali ham o'zining havolasi orqali o'sha obyektga "yetib boradi" (reachable). Shuning uchun Garbage Collector obyektni tozalamaydi, va user2.name hamon "Ali"ni qaytaradi.

</details>

🐛 Debugging Challenge

Quyidagi kodda xotira sizib chiqishi (memory leak) bor:

script.js
JavaScriptNusxalash
01let cache = {};
02 
03function processRequest(id, data) {
04    cache[id] = data; // har bir so'rov natijasi CHEKSIZ saqlanmoqda
05    return data;
06}
07 
08for (let i = 0; i < 100000; i++) {
09    processRequest(i, { largeInfo: "..." });
10}

Your Task:

• Nima uchun bu kod xotira muammosiga olib kelishini tushuntiring.
• Kodni tuzating (masalan, cache hajmini cheklab qo'yish orqali).

<details> <summary>Solution</summary> Muammo: cache — global object, va unga qo'shilgan har bir element hech qachon o'chirilmaydi. 100000 marta chaqirilganda, cache cheksiz o'sib boradi, bu esa xotirani asta-sekin "yeb qo'yadi".

Yechim — cache hajmini cheklash:

script.js
JavaScriptNusxalash
01let cache = {};
02const MAX_CACHE_SIZE = 100;
03 
04function processRequest(id, data) {
05    let keys = Object.keys(cache);
06 
07    if (keys.length >= MAX_CACHE_SIZE) {
08        delete cache[keys[0]]; // eng eskisini o'chirish
09    }
10 
11    cache[id] = data;
12    return data;
13}

</details>

📌 Chapter Summary

• JavaScript'da xotira avtomatik, Garbage Collector orqali boshqariladi.
• Reachability — obyektga "root"dan yetib bo'lish-bo'lmasligini aniqlaydigan tamoyil.
• Memory Leak — kerak bo'lmagan obyektga tasodifan havola saqlanib qolishi.
• Eng ko'p uchraydigan sabablar: unutilgan global variable'lar, to'xtatilmagan timer'lar, olib tashlanmagan event listener'lar.
• Yaxshi amaliyot — har doim resurslarni (timer, listener) qachon "tozalash" kerakligini rejalashtirish.

🎯 Key Takeaways

• let/const ishlatish — tasodifiy global variable yaratilishining, demak memory leak'ning oldini oladi.
• Har bir setInterval yoki uzoq muddatli obuna uchun, uni to'xtatish mexanizmini oldindan rejalashtiring.
• Reachability — "obyekt ishlatilyaptimi" emas, "obyektga yo'l bormi" degan savolga asoslanadi.
• Closure'lar (Chapter 12) — kuchli, lekin ular yopib turgan katta ma'lumotlarni keraksiz uzoq "tirik" ushlab turishi mumkin.
• Memory Leak'lar — odatda darhol emas, balki dastur uzoq ishlagach sezilarli bo'ladi, shuning uchun ularni oldindan bilib, oldini olish muhim.

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01// Yaxshi amaliyotlar:
02let value = 10; // hech qachon let/const'siz yozmang
03 
04let id = setInterval(fn, 1000);
05clearInterval(id); // kerak bo'lmaganda albatta to'xtating
06 
07element.addEventListener("click", handler);
08element.removeEventListener("click", handler); // kerak bo'lmaganda olib tashlang
09 
10let bigData = loadData();
11// ishlatilgach:
12bigData = null; // GC'ga signal beradi

---