Ekstensi Protokol Generator JavaScript: Menguasai Antarmuka Iterator yang Ditingkatkan

Dalam dunia JavaScript yang dinamis, pemrosesan data yang efisien dan manajemen aliran kontrol sangatlah penting. Aplikasi modern terus-menerus berurusan dengan aliran data, operasi asinkron, dan urutan yang kompleks, yang menuntut solusi yang kuat dan elegan. Panduan komprehensif ini mendalami ranah Generator JavaScript yang menarik, secara khusus berfokus pada ekstensi protokol mereka yang meningkatkan iterator sederhana menjadi alat yang ampuh dan serbaguna. Kita akan mengeksplorasi bagaimana peningkatan ini memberdayakan pengembang untuk membuat kode yang sangat efisien, dapat disusun, dan mudah dibaca untuk berbagai skenario kompleks, mulai dari pipeline data hingga alur kerja asinkron.

Sebelum kita memulai perjalanan ke dalam kemampuan generator lanjutan ini, mari kita tinjau secara singkat konsep dasar iterator dan iterable di JavaScript. Memahami blok bangunan inti ini sangat penting untuk menghargai kecanggihan yang dibawa oleh generator.

Dasar-dasar: Iterable dan Iterator di JavaScript

Pada intinya, konsep iterasi di JavaScript berkisar pada dua protokol fundamental:

• Protokol Iterable: Mendefinisikan bagaimana sebuah objek dapat diiterasi menggunakan loop for...of. Sebuah objek dapat diiterasi jika memiliki metode bernama [Symbol.iterator] yang mengembalikan sebuah iterator.
• Protokol Iterator: Mendefinisikan bagaimana sebuah objek menghasilkan urutan nilai. Sebuah objek adalah iterator jika memiliki metode next() yang mengembalikan sebuah objek dengan dua properti: value (item berikutnya dalam urutan) dan done (boolean yang menunjukkan apakah urutan telah selesai).

Memahami Protokol Iterable (Symbol.iterator)

Objek apa pun yang memiliki metode yang dapat diakses melalui kunci [Symbol.iterator] dianggap sebagai iterable. Metode ini, ketika dipanggil, harus mengembalikan sebuah iterator. Tipe bawaan seperti Array, String, Map, dan Set semuanya dapat diiterasi secara alami.

Pertimbangkan array sederhana:

            const myArray = [1, 2, 3];
const iterator = myArray[Symbol.iterator]();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

            

              
                Copy
              
            
          

Loop for...of secara internal menggunakan protokol ini untuk mengiterasi nilai. Ia secara otomatis memanggil [Symbol.iterator]() sekali untuk mendapatkan iterator, dan kemudian berulang kali memanggil next() sampai done menjadi true.

Memahami Protokol Iterator (next(), value, done)

Objek yang mematuhi Protokol Iterator menyediakan metode next(). Setiap panggilan ke next() mengembalikan objek dengan dua properti utama:

• value: Item data aktual dari urutan. Ini bisa berupa nilai JavaScript apa pun.
• done: Bendera boolean. false menunjukkan ada lebih banyak nilai yang akan dihasilkan; true menunjukkan iterasi selesai, dan value seringkali akan menjadi undefined (meskipun secara teknis bisa berupa hasil akhir apa pun).

Mengimplementasikan iterator secara manual bisa bertele-tele:

            function createRangeIterator(start, end) {
    let current = start;
    return {
        next() {
            if (current <= end) {
                return { value: current++, done: false };
            } else {
                return { value: undefined, done: true };
            }
        }
    };
}

const range = createRangeIterator(1, 3);
console.log(range.next()); // { value: 1, done: false }
console.log(range.next()); // { value: 2, done: false }
console.log(range.next()); // { value: 3, done: false }
console.log(range.next()); // { value: undefined, done: true }

            

              
                Copy
              
            
          

Generator: Menyederhanakan Pembuatan Iterator

Di sinilah generator bersinar. Diperkenalkan di ECMAScript 2015 (ES6), fungsi generator (dideklarasikan dengan function*) menyediakan cara yang jauh lebih ergonomis untuk menulis iterator. Ketika fungsi generator dipanggil, ia tidak segera mengeksekusi bodinya; sebaliknya, ia mengembalikan Objek Generator. Objek ini sendiri sesuai dengan Protokol Iterable dan Iterator.

Keajaiban terjadi dengan kata kunci yield. Ketika yield ditemui, generator menjeda eksekusi, mengembalikan nilai yang di-yield, dan menyimpan statusnya. Ketika next() dipanggil lagi pada objek generator, eksekusi dilanjutkan dari tempat ia berhenti, berlanjut hingga yield berikutnya atau badan fungsi selesai.

Contoh Generator Sederhana

Mari kita tulis ulang createRangeIterator kita menggunakan generator:

            function* rangeGenerator(start, end) {
    for (let i = start; i <= end; i++) {
        yield i;
    }
}

const myRange = rangeGenerator(1, 3);
console.log(myRange.next()); // { value: 1, done: false }
console.log(myRange.next()); // { value: 2, done: false }
console.log(myRange.next()); // { value: 3, done: false }
console.log(myRange.next()); // { value: undefined, done: true }

// Generator juga dapat diiterasi, sehingga Anda dapat menggunakan for...of secara langsung:
console.log("Menggunakan for...of:");
for (const num of rangeGenerator(4, 6)) {
    console.log(num); // 4, 5, 6
}

            

              
                Copy
              
            
          

Perhatikan betapa lebih bersih dan intuitifnya versi generator dibandingkan dengan implementasi iterator manual. Kemampuan fundamental ini saja sudah membuat generator sangat berguna. Tetapi ada lebih banyak lagi – jauh lebih banyak – pada kekuatannya, terutama ketika kita mendalami ekstensi protokol mereka.

Antarmuka Iterator yang Ditingkatkan: Ekstensi Protokol Generator

Bagian "ekstensi" dari protokol generator mengacu pada kemampuan yang melampaui sekadar menghasilkan nilai. Peningkatan ini menyediakan mekanisme untuk kontrol yang lebih besar, komposisi, dan komunikasi di dalam dan di antara generator dan pemanggilnya. Secara khusus, kita akan mengeksplorasi yield* untuk delegasi, mengirim nilai kembali ke generator, dan mengakhiri generator dengan baik atau dengan kesalahan.

1. yield*: Delegasi ke Iterable Lain

Ekspresi yield* (yield-star) adalah fitur canggih yang memungkinkan generator untuk mendelegasikan ke objek iterable lainnya. Ini berarti generator dapat secara efektif "menghasilkan semua" nilai dari iterator lain, menjeda eksekusi generator tersebut hingga iterator yang didelegasikan habis. Ini sangat berguna untuk menyusun pola iterasi yang kompleks dari pola yang lebih sederhana, mempromosikan modularitas dan kemampuan penggunaan kembali.

Cara Kerja yield*

Ketika generator menemukan yield* iterable, ia melakukan hal berikut:

1. Ia mengambil iterator dari objek iterable.
2. Ia kemudian mulai menghasilkan setiap nilai yang dihasilkan oleh iterator dalam tersebut.
3. Nilai apa pun yang dikirim kembali ke generator yang mendelegasikan melalui metode next()-nya diteruskan ke metode next() dari iterator yang didelegasikan.
4. Jika iterator yang didelegasikan memunculkan kesalahan, kesalahan tersebut dilemparkan kembali ke generator yang mendelegasikan.
5. Yang terpenting, ketika iterator yang didelegasikan selesai (next() mengembalikan { done: true, value: X }), nilai X menjadi nilai pengembalian ekspresi yield* itu sendiri di generator yang mendelegasikan. Ini memungkinkan iterator dalam untuk mengkomunikasikan hasil akhir kembali.

Contoh Praktis: Menggabungkan Urutan Iterasi

            function* naturalNumbers() {
    yield 1;
    yield 2;
    yield 3;
}

function* evenNumbers() {
    yield 2;
    yield 4;
    yield 6;
}

function* combinedNumbers() {
    console.log("Memulai angka asli...");
    yield* naturalNumbers(); // Mendelegasikan ke generator naturalNumbers
    console.log("Selesai angka asli, memulai angka genap...");
    yield* evenNumbers();    // Mendelegasikan ke generator evenNumbers
    console.log("Semua angka diproses.");
}

const combined = combinedNumbers();

for (const num of combined) {
    console.log(num);
}
// Output:
// Memulai angka asli...
// 1
// 2
// 3
// Selesai angka asli, memulai angka genap...
// 2
// 4
// 6
// Semua angka diproses.

            

              
                Copy
              
            
          

Seperti yang Anda lihat, yield* secara mulus menggabungkan keluaran dari naturalNumbers dan evenNumbers menjadi satu urutan berkelanjutan, sementara generator yang mendelegasikan mengelola aliran keseluruhan dan dapat menyuntikkan logika atau pesan tambahan di sekitar urutan yang didelegasikan.

yield* dengan Nilai Pengembalian

Salah satu aspek terkuat dari yield* adalah kemampuannya untuk menangkap nilai pengembalian akhir dari iterator yang didelegasikan. Generator dapat mengembalikan nilai secara eksplisit menggunakan pernyataan return. Nilai ini ditangkap oleh properti value dari panggilan next() terakhir, tetapi juga oleh ekspresi yield* jika mendelegasikan ke generator tersebut.

            function* processData(data) {
    let sum = 0;
    for (const item of data) {
        sum += item;
        yield item * 2; // Menghasilkan item yang diproses
    }
    return sum; // Mengembalikan jumlah data asli
}

function* analyzePipeline(rawData) {
    console.log("Memulai pemrosesan data...");
    // yield* menangkap nilai pengembalian dari processData
    const totalSum = yield* processData(rawData);
    console.log(`Jumlah data asli: ${totalSum}`);
    yield "Pemrosesan selesai!";
    return `Jumlah akhir dilaporkan: ${totalSum}`;
}

const pipeline = analyzePipeline([10, 20, 30]);

let result = pipeline.next();
while (!result.done) {
    console.log(`Output pipeline: ${result.value}`);
    result = pipeline.next();
}
console.log(`Hasil akhir pipeline: ${result.value}`);

// Output yang Diharapkan:
// Memulai pemrosesan data...
// Output pipeline: 20
// Output pipeline: 40
// Output pipeline: 60
// Jumlah data asli: 60
// Output pipeline: Pemrosesan selesai!
// Hasil akhir pipeline: Jumlah akhir dilaporkan: 60

            

              
                Copy
              
            
          

Di sini, processData tidak hanya menghasilkan nilai yang ditransformasi tetapi juga mengembalikan jumlah data asli. analyzePipeline menggunakan yield* untuk mengonsumsi nilai yang ditransformasi dan secara bersamaan menangkap jumlah tersebut, memungkinkan generator yang mendelegasikan untuk bereaksi terhadap atau memanfaatkan hasil akhir dari operasi yang didelegasikan.

Kasus Penggunaan Tingkat Lanjut: Traversal Pohon

yield* sangat baik untuk struktur rekursif seperti pohon.

            class TreeNode {
    constructor(value) {
        this.value = value;
        this.children = [];
    }

    addChild(node) {
        this.children.push(node);
    }

    // Membuat node dapat diiterasi untuk traversal kedalaman pertama
    *[Symbol.iterator]() {
        yield this.value; // Menghasilkan nilai node saat ini
        for (const child of this.children) {
            yield* child; // Mendelegasikan ke anak untuk traversal mereka
        }
    }
}

const root = new TreeNode('A');
const nodeB = new TreeNode('B');
const nodeC = new TreeNode('C');
const nodeD = new TreeNode('D');
const nodeE = new TreeNode('E');

root.addChild(nodeB);
root.addChild(nodeC);
nodeB.addChild(nodeD);
nodeC.addChild(nodeE);

console.log("Traversal pohon (Kedalaman Pertama):");
for (const val of root) {
    console.log(val);
}
// Output:
// Traversal pohon (Kedalaman Pertama):
// A
// B
// D
// C
// E

            

              
                Copy
              
            
          

Ini secara elegan mengimplementasikan traversal kedalaman pertama menggunakan yield*, menunjukkan kekuatannya untuk pola iterasi rekursif.

2. Mengirim Nilai ke Generator: Metode next() dengan Argumen

Salah satu "ekstensi protokol" generator yang paling mencolok adalah kemampuan komunikasi dua arahnya. Sementara yield mengirim nilai keluar dari generator, metode next() juga dapat menerima argumen, memungkinkan Anda untuk mengirim nilai kembali ke generator yang dijeda. Ini mengubah generator dari produsen data sederhana menjadi konstruksi seperti coroutine yang kuat yang mampu menjeda, menerima input, memproses, dan melanjutkan.

Cara Kerjanya

Ketika Anda memanggil generatorObject.next(valueToInject), valueToInject menjadi hasil dari ekspresi yield yang menyebabkan generator dijeda. Jika generator tidak dijeda oleh yield (misalnya, baru saja dimulai atau telah selesai), nilai yang disuntikkan diabaikan.

            function* interactiveProcess() {
    const input1 = yield "Tolong berikan angka pertama:";
    console.log(`Menerima angka pertama: ${input1}`);

    const input2 = yield "Sekarang, berikan angka kedua:";
    console.log(`Menerima angka kedua: ${input2}`);

    const sum = Number(input1) + Number(input2);
    yield `Jumlahnya adalah: ${sum}`;
    return "Proses selesai.";
}

const process = interactiveProcess();

// Panggilan next() pertama memulai generator, argumen diabaikan.
// Ini menghasilkan prompt pertama.
let response = process.next();
console.log(response.value); // Tolong berikan angka pertama:

// Kirim angka pertama kembali ke generator
response = process.next(10);
console.log(response.value); // Sekarang, berikan angka kedua:

// Kirim angka kedua kembali
response = process.next(20);
console.log(response.value); // Jumlahnya adalah: 30

// Selesaikan proses
response = process.next();
console.log(response.value); // Proses selesai.
console.log(response.done);  // true

            

              
                Copy
              
            
          

Contoh ini dengan jelas menunjukkan bagaimana generator menjeda, meminta input, dan kemudian menerima input tersebut untuk melanjutkan eksekusinya. Ini adalah pola fundamental untuk membangun sistem interaktif yang canggih, mesin keadaan, dan transformasi data yang lebih kompleks di mana langkah berikutnya bergantung pada umpan balik eksternal.

Kasus Penggunaan Komunikasi Dua Arah

• Coroutines dan Multitasking Kooperatif: Generator dapat bertindak sebagai coroutine ringan, secara sukarela menyerahkan kontrol dan menerima data, berguna untuk mengelola keadaan kompleks atau tugas yang berjalan lama tanpa memblokir utas utama (ketika digabungkan dengan event loop atau setTimeout).
• Mesin Keadaan: Keadaan internal generator (variabel lokal, penunjuk program) dipertahankan di seluruh panggilan yield, menjadikannya ideal untuk memodelkan mesin keadaan di mana transisi dipicu oleh input eksternal.
• Simulasi Input/Output (I/O): Untuk mensimulasikan operasi asinkron atau input pengguna, next() dengan argumen menyediakan cara sinkron untuk menguji dan mengontrol aliran generator.
• Pipeline Transformasi Data dengan Konfigurasi Eksternal: Bayangkan sebuah pipeline di mana langkah pemrosesan tertentu membutuhkan parameter yang ditentukan secara dinamis selama eksekusi.

3. Metode throw() dan return() pada Objek Generator

Selain next(), objek generator juga mengekspos metode throw() dan return(), yang menyediakan kontrol tambahan atas aliran eksekusinya dari luar. Metode-metode ini memungkinkan kode eksternal untuk menyuntikkan kesalahan atau memaksa pengakhiran dini, secara signifikan meningkatkan penanganan kesalahan dan manajemen sumber daya dalam sistem berbasis generator yang kompleks.

generatorObject.throw(exception): Menyuntikkan Kesalahan

Memanggil generatorObject.throw(exception) menyuntikkan pengecualian ke dalam generator pada keadaan jeda saat ini. Pengecualian ini berperilaku persis seperti pernyataan throw di dalam badan generator. Jika generator memiliki blok try...catch di sekitar pernyataan yield tempat ia dijeda, ia dapat menangkap dan menangani kesalahan eksternal ini.

Jika generator tidak menangkap pengecualian, ia akan disebarkan ke pemanggil throw(), sama seperti pengecualian yang tidak tertangani.

            function* dataProcessor() {
    try {
        const data = yield "Menunggu data...";
        console.log(`Memproses: ${data}`);
        if (typeof data !== 'number') {
            throw new Error("Tipe data tidak valid: diharapkan angka.");
        }
        yield `Data diproses: ${data * 2}`;
    } catch (error) {
        console.error(`Kesalahan tertangkap di dalam generator: ${error.message}`);
        return "Kesalahan ditangani dan generator diakhiri."; // Generator dapat mengembalikan nilai saat terjadi kesalahan
    } finally {
        console.log("Pembersihan generator selesai.");
    }
}

const processor = dataProcessor();

console.log(processor.next().value); // Menunggu data...

// Mensimulasikan kesalahan eksternal yang dilemparkan ke generator
console.log("Mencoba melemparkan kesalahan ke generator...");
let resultWithError = processor.throw(new Error("Interupsi eksternal!"));
console.log(`Hasil setelah kesalahan eksternal: ${resultWithError.value}`); // Kesalahan ditangani dan generator diakhiri.
console.log(`Selesai setelah kesalahan: ${resultWithError.done}`); // true

console.log("\n--- Percobaan kedua dengan data valid, lalu kesalahan tipe internal ---");
const processor2 = dataProcessor();
console.log(processor2.next().value); // Menunggu data...
console.log(processor2.next(5).value); // Data diproses: 10

// Sekarang, kirim data tidak valid, yang akan menyebabkan kesalahan internal
let resultInvalidData = processor2.next("abc");
// Generator akan menangkap lemparannya sendiri
console.log(`Hasil setelah data tidak valid: ${resultInvalidData.value}`); // Kesalahan ditangani dan generator diakhiri.
console.log(`Selesai setelah kesalahan: ${resultInvalidData.done}`); // true

            

              
                Copy
              
            
          

Metode throw() sangat berharga untuk menyebarkan kesalahan dari event loop eksternal atau rantai promise kembali ke generator, memungkinkan penanganan kesalahan terpadu di seluruh operasi asinkron yang dikelola oleh generator.

generatorObject.return(value): Pengakhiran Paksa

Metode generatorObject.return(value) memungkinkan Anda untuk mengakhiri generator secara prematur. Ketika dipanggil, generator segera selesai, dan metode next()-nya kemudian akan mengembalikan { value: value, done: true } (atau { value: undefined, done: true } jika tidak ada value yang diberikan). Blok finally apa pun di dalam generator akan tetap dieksekusi, memastikan pembersihan yang tepat.

            function* resourceIntensiveOperation() {
    try {
        let count = 0;
        while (true) {
            yield `Memproses item ${++count}`;
            // Simulasikan beberapa pekerjaan berat
            if (count > 50) { // Batas keamanan
                return "Memproses banyak item, mengembalikan.";
            }
        }
    } finally {
        console.log("Pembersihan sumber daya untuk operasi intensif.");
    }
}

const op = resourceIntensiveOperation();

console.log(op.next().value); // Memproses item 1
console.log(op.next().value); // Memproses item 2
console.log(op.next().value); // Memproses item 3

// Memutuskan untuk berhenti lebih awal
console.log("Keputusan eksternal: mengakhiri operasi lebih awal.");
let finalResult = op.return("Operasi dibatalkan oleh pengguna.");

console.log(`Hasil akhir setelah pengakhiran: ${finalResult.value}`); // Operasi dibatalkan oleh pengguna.
console.log(`Selesai: ${finalResult.done}`); // true

// Panggilan selanjutnya akan menunjukkan bahwa itu sudah selesai
console.log(op.next()); // { value: undefined, done: true }

            

              
                Copy
              
            
          

Ini sangat berguna untuk skenario di mana kondisi eksternal menentukan bahwa proses iteratif yang berjalan lama atau memakan sumber daya perlu dihentikan dengan baik, seperti pembatalan pengguna atau mencapai ambang batas tertentu. Blok finally memastikan bahwa sumber daya apa pun yang dialokasikan dilepaskan dengan benar, mencegah kebocoran.

Pola Tingkat Lanjut dan Kasus Penggunaan Global

Ekstensi protokol generator meletakkan dasar untuk beberapa pola paling kuat dalam JavaScript modern, terutama dalam mengelola asinkronisitas dan aliran data yang kompleks. Sementara konsep inti tetap sama secara global, penerapannya dapat sangat menyederhanakan pengembangan di berbagai proyek internasional.

Iterasi Asinkron dengan Generator Asinkron dan for await...of

Membangun di atas protokol iterator dan generator, ECMAScript memperkenalkan Generator Asinkron dan loop for await...of. Ini menyediakan cara yang terlihat sinkron untuk mengiterasi sumber data asinkron, memperlakukan aliran promise atau respons jaringan seolah-olah itu adalah array sederhana.

Protokol Iterator Asinkron

Sama seperti rekan sinkron mereka, iterable asinkron memiliki metode [Symbol.asyncIterator] yang mengembalikan iterator asinkron. Iterator asinkron memiliki metode async next() yang mengembalikan promise yang menyelesaikannya menjadi objek { value: ..., done: ... }.

Fungsi Generator Asinkron (async function*)

async function* secara otomatis mengembalikan iterator asinkron. Anda menggunakan await di dalam bodinya untuk menjeda eksekusi untuk promise dan yield untuk menghasilkan nilai secara asinkron.

            async function* fetchPaginatedData(url) {
    let nextPage = url;
    while (nextPage) {
        const response = await fetch(nextPage);
        const data = await response.json();
        yield data.results; // Menghasilkan hasil dari halaman saat ini

        // Asumsikan API menunjukkan URL halaman berikutnya
        nextPage = data.next_page_url; 
        if (nextPage) {
            console.log(`Mengambil halaman berikutnya: ${nextPage}`);
        }
        await new Promise(resolve => setTimeout(resolve, 100)); // Mensimulasikan penundaan jaringan untuk pengambilan berikutnya
    }
    return "Semua halaman diambil.";
}

// Contoh penggunaan:
async function processAllData() {
    console.log("Memulai pengambilan data...");
    try {
        for await (const pageResults of fetchPaginatedData("https://api.example.com/items?page=1")) {
            console.log("Memproses halaman hasil:", pageResults.length, "item.");
            // Bayangkan memproses setiap halaman data di sini
            // mis., menyimpan dalam database, mengubah untuk tampilan
            for (const item of pageResults) {
                console.log(`  - ID Item: ${item.id}`);
            }
        }
        console.log("Selesai semua pengambilan dan pemrosesan data.");
    } catch (error) {
        console.error("Terjadi kesalahan selama pengambilan data:", error.message);
    }
}

// Dalam aplikasi nyata, ganti dengan URL dummy atau mock fetch
// Untuk contoh ini, mari kita ilustrasikan strukturnya dengan placeholder:
// (Catatan: `fetch` dan URL sebenarnya akan memerlukan lingkungan browser atau Node.js)
// await processAllData(); // Panggil ini dalam konteks async

            

              
                Copy
              
            
          

Pola ini sangat kuat untuk menangani urutan operasi asinkron apa pun di mana Anda ingin memproses item satu per satu, tanpa menunggu seluruh aliran selesai. Pikirkan tentang:

• Membaca file besar atau aliran jaringan potongan demi potongan.
• Memproses data dari API yang dipaginasi secara efisien.
• Membangun pipeline pemrosesan data real-time.

Secara global, pendekatan ini menstandardisasi cara pengembang dapat mengonsumsi dan menghasilkan aliran data asinkron, membina konsistensi di berbagai lingkungan backend dan frontend.

Generator sebagai Mesin Keadaan dan Coroutine

Kemampuan generator untuk menjeda dan melanjutkan, dikombinasikan dengan komunikasi dua arah, menjadikannya alat yang sangat baik untuk membangun mesin keadaan eksplisit atau coroutine ringan.

            function* vendingMachine() {
    let balance = 0;
    yield "Selamat datang! Masukkan koin (nilai: 1, 2, 5).";

    while (true) {
        const coin = yield `Saldo saat ini: ${balance}. Menunggu koin atau "beli".`;
        if (coin === "buy") {
            if (balance >= 5) { // Mengasumsikan item berharga 5
                balance -= 5;
                yield `Ini barang Anda! Kembalian: ${balance}.`;
            } else {
                yield `Dana tidak cukup. Perlu ${5 - balance} lagi.`;
            }
        } else if ([1, 2, 5].includes(Number(coin))) {
            balance += Number(coin);
            yield `Dimasukkan ${coin}. Saldo baru: ${balance}.`;
        } else {
            yield "Input tidak valid. Silakan masukkan 1, 2, 5, atau 'beli'.";
        }
    }
}

const machine = vendingMachine();
console.log(machine.next().value); // Selamat datang! Masukkan koin (nilai: 1, 2, 5).
console.log(machine.next().value); // Saldo saat ini: 0. Menunggu koin atau "beli".
console.log(machine.next(2).value); // Dimasukkan 2. Saldo baru: 2.
console.log(machine.next(5).value); // Dimasukkan 5. Saldo baru: 7.
console.log(machine.next("buy").value); // Ini barang Anda! Kembalian: 2.
console.log(machine.next("buy").value); // Saldo saat ini: 2. Menunggu koin atau "beli".
console.log(machine.next("exit").value); // Input tidak valid. Silakan masukkan 1, 2, 5, atau 'beli'.

            

              
                Copy
              
            
          

Contoh mesin penjual otomatis ini mengilustrasikan bagaimana generator dapat mempertahankan keadaan internal (balance) dan bertransisi antar keadaan berdasarkan input eksternal (coin atau "buy"). Pola ini sangat berharga untuk loop permainan, wizard UI, atau proses apa pun dengan langkah-langkah berurutan yang terdefinisi dengan baik dan interaksi.

Membangun Pipeline Transformasi Data yang Fleksibel

Generator, terutama dengan yield*, sangat cocok untuk membuat pipeline transformasi data yang dapat disusun. Setiap generator dapat mewakili tahap pemrosesan, dan mereka dapat dirangkai bersama.

            function* filterEvens(numbers) {
    for (const num of numbers) {
        if (num % 2 === 0) {
            yield num;
        }
    }
}

function* doubleValues(numbers) {
    for (const num of numbers) {
        yield num * 2;
    }
}

function* sumUpTo(numbers, limit) {
    let sum = 0;
    for (const num of numbers) {
        if (sum + num > limit) {
            return sum; // Berhenti jika menambahkan angka berikutnya melebihi batas
        }
        sum += num;
        yield sum; // Menghasilkan jumlah kumulatif
    }
    return sum;
}

// Generator orkestrasi pipeline
function* dataPipeline(data) {
    console.log("Tahap Pipeline 1: Memfilter angka genap...");
    // `yield*` di sini melakukan iterasi, tidak menangkap nilai pengembalian dari filterEvens 
    // kecuali filterEvens secara eksplisit mengembalikannya (yang tidak dilakukannya secara default).
    // Untuk pipeline yang benar-benar dapat disusun, setiap tahap harus mengembalikan generator atau iterable baru secara langsung.
    
    // Merangkai generator secara langsung seringkali lebih fungsional:
    const filteredAndDoubled = doubleValues(filterEvens(data));

    console.log("Tahap Pipeline 2: Menjumlahkan hingga batas (100)...");
    const finalSum = yield* sumUpTo(filteredAndDoubled, 100);
    return `Jumlah akhir dalam batas: ${finalSum}`;
}

const rawData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
const pipelineExecutor = dataPipeline(rawData);

let pipelineResult = pipelineExecutor.next();
while (!pipelineResult.done) {
    console.log(`Output pipeline perantara: ${pipelineResult.value}`);
    pipelineResult = pipelineExecutor.next();
}
console.log(pipelineResult.value);

// Pendekatan chaining yang dikoreksi untuk ilustrasi (komposisi fungsional langsung):
console.log("\n--- Contoh Chaining Langsung (Komposisi Fungsional) ---");
const processedNumbers = doubleValues(filterEvens(rawData)); // Merangkai iterable
let cumulativeSumIterator = sumUpTo(processedNumbers, 100); // Membuat iterator dari tahap terakhir

for (const val of cumulativeSumIterator) {
    console.log(`Jumlah Kumulatif: ${val}`);
}
// Nilai pengembalian akhir sumUpTo (jika tidak dikonsumsi oleh for...of) akan diakses melalui .return() atau .next() setelah done
console.log(`Jumlah kumulatif akhir (dari nilai pengembalian iterator): ${cumulativeSumIterator.next().value}`);

// Output yang diharapkan akan menunjukkan angka genap yang difilter, lalu digandakan, lalu jumlah kumulatifnya hingga 100.
// Urutan contoh untuk rawData [1,2,3...20] diproses oleh filterEvens -> doubleValues -> sumUpTo(..., 100):
// Angka genap yang difilter: [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
// Angka genap yang digandakan: [4, 8, 12, 16, 20, 24, 28, 32, 36, 40]
// Jumlah kumulatif hingga 100:
// Jumlah: 4
// Jumlah: 12 (4+8)
// Jumlah: 24 (12+12)
// Jumlah: 40 (24+16)
// Jumlah: 60 (40+20)
// Jumlah: 84 (60+24)
// Jumlah kumulatif akhir (dari nilai pengembalian iterator): 84 (karena menambahkan 28 akan melebihi 100)

            

              
                Copy
              
            
          

Contoh chaining yang dikoreksi menunjukkan bagaimana komposisi fungsional secara alami difasilitasi oleh generator. Setiap generator mengambil iterable (atau generator lain) dan menghasilkan iterable baru, memungkinkan pemrosesan data yang sangat fleksibel dan efisien. Pendekatan ini sangat dihargai di lingkungan yang berurusan dengan kumpulan data besar atau alur kerja analitis yang kompleks, yang umum di berbagai industri secara global.

Praktik Terbaik untuk Menggunakan Generator

Untuk memanfaatkan generator dan ekstensi protokolnya secara efektif, pertimbangkan praktik terbaik berikut:

• Jaga Generator Tetap Fokus: Idealnya, setiap generator harus melakukan satu tugas yang terdefinisi dengan baik (misalnya, memfilter, memetakan, mengambil halaman). Ini meningkatkan kemampuan penggunaan kembali dan pengujian.
• Konvensi Penamaan yang Jelas: Gunakan nama deskriptif untuk fungsi generator dan nilai yang mereka yield. Contohnya, fetchUsersPage() atau processCsvRows().
• Tangani Kesalahan dengan Baik: Manfaatkan blok try...catch di dalam generator dan bersiaplah untuk menggunakan generatorObject.throw() dari kode eksternal untuk mengelola kesalahan secara efektif, terutama dalam konteks asinkron.
• Kelola Sumber Daya dengan finally: Jika generator memperoleh sumber daya (misalnya, membuka handel file, membuat koneksi jaringan), gunakan blok finally untuk memastikan sumber daya ini dilepaskan, bahkan jika generator diakhiri lebih awal melalui return() atau pengecualian yang tidak tertangani.
• Utamakan yield* untuk Komposisi: Saat menggabungkan keluaran dari beberapa iterable atau generator, yield* adalah cara terbersih dan paling efisien untuk mendelegasikan, membuat kode Anda modular dan lebih mudah dipahami.
• Pahami Komunikasi Dua Arah: Bersikaplah yang disengaja saat menggunakan next() dengan argumen. Ini sangat kuat tetapi bisa membuat generator lebih sulit diikuti jika tidak digunakan dengan bijak. Dokumentasikan dengan jelas kapan input diharapkan.
• Pertimbangkan Kinerja: Meskipun generator efisien, terutama untuk evaluasi malas, perhatikan rantai delegasi yield* yang terlalu dalam atau panggilan next() yang terlalu sering dalam loop yang kritis terhadap kinerja. Lakukan profil jika perlu.
• Uji Secara Menyeluruh: Uji generator seperti fungsi lainnya. Verifikasi urutan nilai yang dihasilkan, nilai pengembalian, dan bagaimana mereka berperilaku ketika throw() atau return() dipanggil pada mereka.

Dampak pada Pengembangan JavaScript Modern

Ekstensi protokol generator telah memberikan dampak besar pada evolusi JavaScript:

• Menyederhanakan Kode Asinkron: Sebelum async/await, generator dengan pustaka seperti co adalah mekanisme utama untuk menulis kode asinkron yang terlihat sinkron. Mereka membuka jalan bagi sintaks async/await yang kita gunakan hari ini, yang secara internal sering memanfaatkan konsep serupa dari menjeda dan melanjutkan eksekusi.
• Peningkatan Streaming dan Pemrosesan Data: Generator unggul dalam memproses kumpulan data besar atau urutan tak terbatas secara malas. Ini berarti data diproses sesuai permintaan, daripada memuat semuanya ke dalam memori sekaligus, yang sangat penting untuk kinerja dan skalabilitas dalam aplikasi web, Node.js sisi server, dan alat analitik data.
• Mempromosikan Pola Fungsional: Dengan menyediakan cara alami untuk membuat iterable dan iterator, generator memfasilitasi paradigma pemrograman fungsional yang lebih banyak, memungkinkan komposisi transformasi data yang elegan.
• Membangun Alur Kontrol yang Kuat: Kemampuan mereka untuk menjeda, melanjutkan, menerima input, dan menangani kesalahan menjadikannya alat yang serbaguna untuk mengimplementasikan alur kontrol yang kompleks, mesin keadaan, dan arsitektur yang digerakkan oleh peristiwa.

Dalam lanskap pengembangan global yang semakin saling terhubung, di mana tim yang beragam berkolaborasi dalam proyek mulai dari platform analitik data real-time hingga pengalaman web interaktif, generator menawarkan fitur bahasa yang kuat dan umum untuk mengatasi masalah kompleks dengan kejelasan dan efisiensi. Kemampuan universal mereka menjadikan mereka keterampilan yang berharga bagi pengembang JavaScript mana pun di seluruh dunia.

Kesimpulan: Membuka Potensi Penuh Iterasi

Generator JavaScript, dengan protokolnya yang diperluas, mewakili lompatan maju yang signifikan dalam cara kita mengelola iterasi, operasi asinkron, dan alur kontrol yang kompleks. Mulai dari delegasi elegan yang ditawarkan oleh yield* hingga komunikasi dua arah yang kuat melalui argumen next(), dan penanganan kesalahan/pengakhiran yang kuat dengan throw() dan return(), fitur-fitur ini memberi pengembang tingkat kontrol dan fleksibilitas yang belum pernah ada sebelumnya.

Dengan memahami dan menguasai antarmuka iterator yang ditingkatkan ini, Anda tidak hanya mempelajari sintaks baru; Anda memperoleh alat untuk menulis kode yang lebih efisien, lebih mudah dibaca, dan lebih mudah dikelola. Baik Anda membangun pipeline data canggih, mengimplementasikan mesin keadaan yang rumit, atau menyederhanakan operasi asinkron, generator menawarkan solusi yang kuat dan idiomatik.

Rangkullah antarmuka iterator yang ditingkatkan. Jelajahi kemungkinannya. Kode JavaScript Anda – dan proyek Anda – akan menjadi lebih baik karenanya.