Fungsi Generator dalam JavaScript

Dalam artikel ini, kami akan menjelaskan fungsi generator dalam JavaScript.

YouTube Video

Fungsi Generator dalam JavaScript

Fungsi generator JavaScript adalah fungsi khusus yang berbeda dari fungsi biasa karena dapat melakukan eksekusi tertunda (lazy execution) dan berhenti sejenak serta melanjutkan kembali. Dengan memahami fungsi generator, Anda dapat menangani operasi asinkron dan pemrosesan data besar secara sequential (berurutan) dengan efisien. Di sini, kami akan memberikan penjelasan rinci tentang cara kerja fungsi generator, cara menggunakannya, dan kasus penggunaannya secara praktis.

Apa itu Fungsi Generator?

Fungsi generator didefinisikan dengan function* (pendefinisian fungsi dengan tanda bintang) dan, tidak seperti fungsi biasa, dapat menghentikan eksekusi di tengah jalan dan melanjutkannya sambil mempertahankan statusnya. Fungsi generator memungkinkan "eksekusi tertunda (lazy execution)" dan mengembalikan hasil secara bertahap, memungkinkan pengelolaan memori yang efisien dan pemrosesan berurutan.

Sintaksis

1function* generatorFunction() {
2    yield 'First value';
3    yield 'Second value';
4    return 'Done';
5}

Dengan cara ini, fungsi generator dapat memiliki beberapa ekspresi yield dan menggunakan yield untuk menghentikan eksekusinya sementara waktu. Ketika fungsi generator dipanggil, isi fungsinya tidak dieksekusi langsung, dan sebuah objek generator dikembalikan. Anda dapat memanggil metode next() pada objek ini untuk melanjutkan fungsi dari titik penghentian terakhir.

Penggunaan Dasar Fungsi Generator

Selanjutnya, mari kita lihat contoh dasar penggunaan fungsi generator.

 1function* simpleGenerator() {
 2    yield 1;
 3    yield 2;
 4    yield 3;
 5}
 6
 7const gen = simpleGenerator();
 8
 9console.log(gen.next()); // { value: 1, done: false }
10console.log(gen.next()); // { value: 2, done: false }
11console.log(gen.next()); // { value: 3, done: false }
12console.log(gen.next()); // { value: undefined, done: true }

Hal penting yang perlu dicatat di sini adalah bahwa generator mengembalikan nilai setiap kali dengan yield, dan selama properti done adalah false, ini menunjukkan masih ada nilai yang akan datang. Panggilan terakhir ke next() mengembalikan done: true, yang menunjukkan bahwa generator telah selesai.

Kata Kunci yield dan Penghentian Nilai

yield adalah kata kunci yang menunjukkan titik penghenti dalam fungsi generator. Nilai yang berada di sebelah kanan yield dikembalikan saat next() dipanggil. Selain itu, yield memungkinkan komunikasi dua arah. Dengan kata lain, saat memberikan nilai sebagai argumen ke metode next(), nilai tersebut dikirimkan ke fungsi generator.

 1function* generatorWithYield() {
 2    const value1 = yield 'First yield';
 3    console.log('Received value:', value1);
 4    const value2 = yield 'Second yield';
 5    console.log('Received value:', value2);
 6}
 7
 8const gen = generatorWithYield();
 9
10console.log(gen.next());        // { value: 'First yield', done: false }
11console.log(gen.next('Apple')); // Received value: Apple
12                                // { value: 'Second yield', done: false }
13console.log(gen.next('Banana'));// Received value: Banana
14                                // { value: undefined, done: true }

Dalam contoh ini, pemanggilan next('Apple') mengirimkan nilai 'Apple' ke fungsi generator, di mana nilai tersebut digunakan di dalam fungsi.

Mengelola Status Generator

Generator dapat mempertahankan status eksekusi mereka, yang memungkinkan representasi yang ringkas untuk loop panjang atau pemrosesan berurutan. Contoh berikut menunjukkan generator yang menghasilkan angka tanpa batas.

 1function* infiniteGenerator() {
 2    let i = 0;
 3    while (true) {
 4        yield i++;
 5        if (i > 10) {
 6            break;
 7        }
 8    }
 9}
10
11const gen = infiniteGenerator();
12
13console.log(gen.next().value); // 0
14console.log(gen.next().value); // 1
15console.log(gen.next().value); // 2
16// Continues...

Generator ini secara terus-menerus menghasilkan angka menggunakan loop while(true), memungkinkan Anda untuk mendapatkan nilai sesuai kebutuhan. Hal ini memungkinkan pemrosesan kumpulan data besar secara efisien.

Aplikasi Fungsi Generator

Fungsi generator cocok untuk menjalankan banyak proses secara berurutan. Sebagai contoh, fungsi ini berguna untuk memproses permintaan API secara berurutan atau membagi dan memproses file besar.

1function* apiRequestGenerator() {
2    yield fetch('https://codesparklab.com/json/example1.json');
3    yield fetch('https://codesparklab.com/json/example2.json');
4    yield fetch('https://codesparklab.com/json/example3.json');
5}

Dengan demikian, generator, yang dapat digunakan untuk pemrosesan asinkron, sangat bermanfaat untuk penanganan data secara berurutan yang efisien.

Generator Asinkron

Generator asinkron yang diperkenalkan dalam ES2018 memungkinkan Anda untuk mengembalikan nilai-nilai asinkron secara berurutan dengan menggabungkan async dan yield. Hal ini memungkinkan penulisan pemrosesan asinkron secara ringkas dalam kombinasi dengan await.

Sintaksis

 1async function* asyncGenerator() {
 2    yield await Promise.resolve(1);
 3    yield await Promise.resolve(2);
 4    yield await Promise.resolve(3);
 5}
 6
 7const gen = asyncGenerator();
 8
 9(async () => {
10    for await (const value of gen) {
11        console.log(value); // 1, 2, 3
12    }
13})();

Generator asinkron dapat mengambil nilai secara berurutan menggunakan loop for await...of. Pola ini sangat berguna ketika menangani aliran data asinkron.

Contoh Praktis: Menyederhanakan Pemrosesan Asinkron dengan Generator

Fungsi generator juga digunakan untuk menyederhanakan alur pemrosesan asinkron. Sebagai contoh, dengan menggabungkan yield dan Promise seperti yang ditunjukkan di bawah ini, Anda dapat menulis operasi asinkron agar tampak seperti sinkron.

 1function* asyncFlow() {
 2    const data1 = yield fetch('https://codesparklab.com/json/example1.json');
 3    console.log(data1);
 4    const data2 = yield fetch('https://codesparklab.com/json/example2.json');
 5    console.log(data2);
 6}
 7
 8const gen = asyncFlow();
 9
10function handleAsync(generator) {
11    const next = (promise) => {
12        promise.then((result) => {
13        const { value, done } = generator.next(result);
14        if (!done) {
15            next(value);
16        }
17        });
18    };
19
20    next(generator.next().value);
21}
22
23handleAsync(gen);

Kode ini secara berurutan membuat permintaan API menggunakan generator dan memproses hasilnya.

Ringkasan

Fungsi generator adalah salah satu fitur kuat JavaScript, dengan kemampuan untuk menghentikan dan melanjutkan eksekusi fungsi. Hal ini memungkinkan pemrosesan berurutan, pemrosesan asinkron, dan manipulasi kumpulan data besar secara efisien. Memahami generator adalah langkah penting dalam menguasai teknik-teknik tingkat lanjut di JavaScript.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video