Chapter 40 — Generators & Iterators

Bu — kitobdagi eng murakkab va noodatiy mavzulardan biri. Generator'lar JavaScript'ga function'larning ishlashini "pauza qilish" va "davom ettirish" imkonini beradi — bu boshqa hech qanday oddiy function'da mavjud bo'lmagan xususiyat.

---

40.1 Iterator nima?

Simple Explanation

Iterator — to'plam (masalan, array)ning elementlarini birma-bir, tartib bilan "aylanib chiqish" imkonini beruvchi maxsus object.

Why Does It Exist?

Chapter 5'da for...of loop'ni ko'rgan edik — u array, string kabi narsalar ustida ishlaydi. Buning "sahna orqasida" — bu narsalar Iterable protokoliga amal qilgani uchun ishlaydi, va bu protokolning asosini Iterator tashkil qiladi.

Iterator Protokoli

Iterator — next() nomli metodga ega bo'lgan har qanday object, bu metod har chaqirilganda { value, done } shaklidagi object qaytaradi.

Example — Iterator'ni qo'lda yaratish

script.js
JavaScriptNusxalash
01function createIterator(array) {
02    let index = 0;
03 
04    return {
05        next: function () {
06            if (index < array.length) {
07                return { value: array[index++], done: false };
08            } else {
09                return { value: undefined, done: true };
10            }
11        }
12    };
13}
14 
15let iterator = createIterator(["a", "b", "c"]);
16 
17console.log(iterator.next()); // { value: "a", done: false }
18console.log(iterator.next()); // { value: "b", done: false }
19console.log(iterator.next()); // { value: "c", done: false }
20console.log(iterator.next()); // { value: undefined, done: true }

Explanation

Har safar next() chaqirilganda, u keyingi elementni qaytaradi va indexni oshiradi. done: true — barcha elementlar tugaganini bildiradi.

💡 Key Idea
for...of loop (Chapter 5) — aslida sahna orqasida shu next() metodini avtomatik, done: true bo'lguncha, ketma-ket chaqirib turadi.

40.2 ⚠️ Qiyin mavzu: Generator Function nima?

Simple Explanation

Generator Function — Iterator yaratishning ancha oson, o'qish qulay usuli. U function* (yulduzcha bilan) yoziladi va yield kalit so'zi orqali qiymatlarni "birma-bir chiqarib beradi".

Nega bu tushuncha qiyin?

Chunki generator function — oddiy function'lardan tubdan farq qiladi: u chaqirilganda darhol ishlamaydi, balki "pauza qila oladigan" maxsus object (generator object) qaytaradi.

Real-Life Analogy

⏸️▶️ Oddiy function — bu filmni "Play" tugmasi bosilgach, oxirigacha to'xtovsiz ko'rsatadigan pleer. Generator function esa — "Pauza" tugmasi ham bor pleer: siz filmni istalgan joyda to'xtatib, keyinroq aynan o'sha joydan davom ettirishingiz mumkin.

Example — Eng oddiy Generator

script.js
JavaScriptNusxalash
01function* simpleGenerator() {
02    console.log("Boshlandi");
03    yield 1;
04    console.log("Birinchi yield'dan keyin");
05    yield 2;
06    console.log("Ikkinchi yield'dan keyin");
07    yield 3;
08    console.log("Tugadi");
09}
10 
11let gen = simpleGenerator();
12 
13console.log(gen.next()); // "Boshlandi" chiqadi, { value: 1, done: false }
14console.log(gen.next()); // "Birinchi yield'dan keyin" chiqadi, { value: 2, done: false }
15console.log(gen.next()); // "Ikkinchi yield'dan keyin" chiqadi, { value: 3, done: false }
16console.log(gen.next()); // "Tugadi" chiqadi, { value: undefined, done: true }

Bosqichma-bosqich nima sodir bo'lyapti?

1. simpleGenerator() chaqirilganda, function ichidagi kod darhol ishlamaydi — faqat "generator object" qaytariladi.
2. Birinchi gen.next() chaqirilganda, kod ishga tushadi va birinchi yield 1gacha bajariladi, o'sha yerda "pauza" qiladi, { value: 1, done: false } qaytaradi.
3. Ikkinchi gen.next() — funksiya to'xtagan joyidan davom etadi (birinchi yielddan keyingi qatordan), ikkinchi yield 2gacha ishlaydi.
4. Bu jarayon, function to'liq tugaguncha (barcha kod bajarilib, done: true qaytarilguncha) davom etadi.

Diagram

code.text
TEXTNusxalash
01simpleGenerator() chaqiriladi → generator object yaratiladi (hali ishlamaydi)
02 
03next() #1 → "Boshlandi" → yield 1 da PAUZA → { value: 1, done: false }
04next() #2 → davom etadi → "Birinchi yield'dan keyin" → yield 2 da PAUZA → { value: 2, done: false }
05next() #3 → davom etadi → "Ikkinchi yield'dan keyin" → yield 3 da PAUZA → { value: 3, done: false }
06next() #4 → davom etadi → "Tugadi" → function tugaydi → { value: undefined, done: true }

🔥 Important
Bu — oddiy function'da mutlaqo mumkin bo'lmagan xususiyat: oddiy function chaqirilganda, u to'liq bajarilmaguncha "to'xtay olmaydi". Generator esa o'z holatini "eslab qolib", xohlagan joyda pauza qilib, keyin davom etishi mumkin.

40.3 Generator'lar for...of bilan

Simple Explanation

Generator'lar avtomatik ravishda Iterable hisoblanadi, shuning uchun ularni to'g'ridan-to'g'ri for...of bilan aylanib chiqish mumkin (next()ni qo'lda chaqirmasdan).

Example

script.js
JavaScriptNusxalash
01function* countTo(max) {
02    for (let i = 1; i <= max; i++) {
03        yield i;
04    }
05}
06 
07for (let num of countTo(5)) {
08    console.log(num);
09}
10// 1, 2, 3, 4, 5

Explanation

for...of — sahna orqasida next()ni avtomatik, done: true bo'lguncha chaqiradi, aynan Chapter 40.1'dagi qo'lda yozilgan Iterator kabi, lekin bu safar Generator sintaksisi orqali ancha oson yozilgan.

40.4 ⚠️ Qiyin mavzu: Cheksiz (Infinite) Generator'lar

Simple Explanation

Generator'larning eng kuchli xususiyatlaridan biri — ular cheksiz ketma-ketlik yaratishi mumkin, chunki qiymatlar faqat kerak bo'lganda, birma-bir hisoblanadi (bu — "lazy evaluation" deb ataladi).

Nega bu foydali?

Agar cheksiz array yaratishga urinilsa ([1, 2, 3, ...] — cheksiz), dastur xotirasi darhol tugaydi. Lekin Generator — hech qachon "hammasini bir vaqtda" hisoblamaydi, u faqat so'ralganda, bittadan qiymat beradi.

Example — Cheksiz sonlar generatori

script.js
JavaScriptNusxalash
01function* infiniteNumbers() {
02    let num = 1;
03    while (true) {
04        yield num;
05        num++;
06    }
07}
08 
09let numbers = infiniteNumbers();
10 
11console.log(numbers.next().value); // 1
12console.log(numbers.next().value); // 2
13console.log(numbers.next().value); // 3
14// ... va h.k., abadiy davom etishi mumkin, lekin xotira TUGAMAYDI

Explanation

while (true) — odatda cheksiz loop yaratib, dasturni "osilib qoldiradi" (Chapter 5'da ko'rgan edik). Lekin Generator ichida bu xavfsiz, chunki loop faqat har yieldda "pauza" qiladi va tashqaridan next() chaqirilmaguncha hech narsa qilmaydi.

💡 Key Idea
Bu — "lazy evaluation" (dangasa hisoblash) tamoyilining amaliy namunasi: qiymatlar faqat aniq kerak bo'lgan paytda hisoblanadi, oldindan emas. Bu — katta yoki cheksiz ma'lumotlar bilan ishlashda xotirani tejashning kuchli usuli.

Amaliy misol — birinchi N ta natijani olish

script.js
JavaScriptNusxalash
01function take(generator, count) {
02    let results = [];
03    for (let i = 0; i < count; i++) {
04        results.push(generator.next().value);
05    }
06    return results;
07}
08 
09console.log(take(infiniteNumbers(), 5)); // [1, 2, 3, 4, 5]

40.5 yield orqali qiymat qabul qilish

Simple Explanation

yield — nafaqat qiymat "chiqarib berishi", balki next() chaqirilganda tashqaridan qiymat qabul qilishi ham mumkin.

Example

script.js
JavaScriptNusxalash
01function* chatBot() {
02    let name = yield "Ismingiz nima?";
03    let age = yield `Salom, ${name}! Necha yoshdasiz?`;
04    return `${name}, ${age} yoshda ekansiz. Xayr!`;
05}
06 
07let bot = chatBot();
08 
09console.log(bot.next().value);        // "Ismingiz nima?"
10console.log(bot.next("Ali").value);   // "Salom, Ali! Necha yoshdasiz?"
11console.log(bot.next(25).value);      // "Ali, 25 yoshda ekansiz. Xayr!"

Explanation

bot.next("Ali") — bu qiymat ("Ali") generator ichidagi kutib turgan yield "Ismingiz nima?" ifodasining natijasi sifatida name variable'iga o'tadi. Bu — generator va tashqi kod orasida ikki tomonlama muloqot imkonini beradi.

🔗 Connection
Bu mexanizm — Chapter 28'da o'rgangan async/awaitning ichki ishlash tamoyiliga juda o'xshaydi. Aslida, async/await — Generator'lar va Promise'larning kombinatsiyasi asosida qurilgan (bu — ilg'or, ixtiyoriy bilim, kundalik dasturlashda buni bilish shart emas).

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
function* colors() nomli generator yozing, u ketma-ket "qizil", "yashil", "ko'k" qiymatlarini yield qilsin. for...of bilan barchasini chiqaring.
Required Concepts:

• Generator functions
• yield
  Hint:
  yield "qizil"; yield "yashil"; yield "ko'k";

🟡 Exercise 2 — Medium

Task:
function* range(start, end) nomli generator yozing — u startdan endgacha (ikkalasi ham kiritilgan) barcha sonlarni birma-bir yield qilsin. for...of bilan sinab ko'ring.
Required Concepts:

• Generator + loop
  Hint:
  Generator ichida oddiy for loop ishlatib, har bir qadamda yield i qiling.

🔴 Exercise 3 — Hard

Task:
Cheksiz Fibonacci ketma-ketligi generatorini yozing (function* fibonacci()), u 0, 1, 1, 2, 3, 5, 8, ... tartibida cheksiz davom etsin. Chapter 40.4'dagi take() function yordamida, faqat birinchi 10 ta Fibonacci sonini array sifatida oling.
Required Concepts:

• Infinite generators
• Destructuring (Chapter 16) — o'zgaruvchan qiymatlarni yangilash uchun
  Hint:
  let [prev, curr] = [0, 1]; while(true) { yield prev; [prev, curr] = [curr, prev + curr]; }

🔮 Predict the Output

script.js
JavaScriptNusxalash
01function* gen() {
02    yield 1;
03    yield 2;
04    return 3;
05    yield 4; // bu qatorga yetib bo'lamizmi?
06}
07 
08let g = gen();
09 
10console.log(g.next());
11console.log(g.next());
12console.log(g.next());
13console.log(g.next());

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

<details> <summary>Answer</summary> { value: 1, done: false } { value: 2, done: false } { value: 3, done: true } { value: undefined, done: true }

Why?
return 3 — generator'ni darhol tugatadi (done: true bilan), xuddi oddiy function'dagi return kabi (Chapter 6). Shuning uchun yield 4 qatoriga hech qachon yetib bo'linmaydi. To'rtinchi next() chaqirilganda, generator allaqachon "tugagan", shuning uchun u doimiy ravishda { value: undefined, done: true } qaytaraveradi.

</details>

🐛 Debugging Challenge

Quyidagi kodda muammo bor:

script.js
JavaScriptNusxalash
01function* countdown(start) {
02    while (start > 0) {
03        yield start;
04        start--;
05    }
06}
07 
08let counter = countdown(3);
09 
10console.log(counter.value); // dasturchi "3" kutgan, lekin undefined chiqadi

Your Task:

• Nima uchun counter.value undefined ekanini tushuntiring.
• Kodni to'g'ri ishlaydigan qilib tuzating.

<details> <summary>Solution</summary> Muammo: countdown(3) chaqirilishi — hali hech qanday kodni bajarmaydi, u faqat generator objectni qaytaradi. counterning o'zida .value propertysi mavjud emas — qiymatni olish uchun .next() chaqirish, va uning natijasidan .valueni olish kerak.

Yechim:

script.js
JavaScriptNusxalash
01let counter = countdown(3);
02 
03console.log(counter.next().value); // 3
04console.log(counter.next().value); // 2
05console.log(counter.next().value); // 1

</details>

📌 Chapter Summary

• Iterator — next() metodiga ega, { value, done } qaytaradigan object.
• Generator Function (function*) — Iterator yaratishning oson, "pauza qila oladigan" usuli.
• yield — qiymatni "chiqarib berish" va function'ni pauza qilish uchun ishlatiladi.
• Generator'lar — cheksiz ketma-ketliklarni xotira sarflamasdan yaratish imkonini beradi (lazy evaluation).
• next(value) — generator ichidagi kutib turgan yieldga qiymat "yuborish" imkonini beradi.

🎯 Key Takeaways

• Generator function chaqirilishi — kodni darhol ishga tushirmaydi, faqat generator object yaratadi.
• Har bir next() chaqiruvi — keyingi yieldgacha kodni davom ettiradi.
• for...of — generator'lar bilan avtomatik, next()ni qo'lda chaqirmasdan ishlaydi.
• Cheksiz generator'lar — faqat kerak bo'lgan miqdordagi qiymatni hisoblash orqali xotirani tejaydi.
• Generator'lar — async/awaitning ichki ishlash mexanizmining asosini tashkil qiladi.

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01function* myGenerator() {
02    yield 1;
03    yield 2;
04    yield 3;
05}
06 
07let gen = myGenerator();
08 
09gen.next(); // { value: 1, done: false }
10 
11for (let value of myGenerator()) {
12    console.log(value);
13}
14 
15function* infinite() {
16    let i = 0;
17    while (true) yield i++;
18}

---