Dalam tutorial ini, Anda akan belajar tentang generator JavaScript dengan bantuan contoh.
Dalam JavaScript, generator menyediakan cara baru untuk bekerja dengan fungsi dan iterator.
Menggunakan generator,
- Anda bisa menghentikan eksekusi suatu fungsi dari mana saja di dalam fungsi tersebut
- dan melanjutkan menjalankan kode dari posisi terhenti
Buat Generator JavaScript
Untuk membuat generator, Anda harus terlebih dahulu mendefinisikan fungsi generator dengan function*simbol. Objek dari fungsi generator disebut generator.
// define a generator function function* generator_function() (… ) // creating a generator const generator_obj = generator_function();
Catatan : Fungsi generator dilambangkan dengan *. Anda dapat menggunakan function* generatorFunc() (… )atau function *generatorFunc()(… )membuatnya.
Menggunakan hasil untuk Pause Execution
Seperti disebutkan di atas, Anda dapat menghentikan sementara eksekusi fungsi generator tanpa menjalankan seluruh badan fungsi. Untuk itu, kami menggunakan yieldkata kunci. Sebagai contoh,
// generator function function* generatorFunc() ( console.log("1. code before the first yield"); yield 100; console.log("2. code before the second yield"); yield 200; ) // returns generator object const generator = generatorFunc(); console.log(generator.next());
Keluaran
1. kode sebelum hasil pertama (nilai: 100, selesai: salah)
Sini,
- Objek generator bernama
generatordibuat. - Saat
generator.next()dipanggil, kode hingga yang pertamayielddijalankan. Ketikayieldditemukan, program mengembalikan nilai dan menghentikan fungsi generator.
Catatan : Anda perlu menetapkan objek generator ke variabel sebelum Anda menggunakannya.
Bekerja dari beberapa pernyataan hasil
The yieldekspresi mengembalikan nilai. Namun, tidak seperti returnpernyataan tersebut, itu tidak menghentikan program. Itulah mengapa Anda dapat melanjutkan menjalankan kode dari posisi terakhir yang dihasilkan. Sebagai contoh,
function* generatorFunc() ( console.log("1. code before first yield"); yield 100; console.log("2. code before the second yield"); yield 200; console.log("3. code after the second yield"); ) const generator = generatorFunc(); console.log(generator.next()); console.log(generator.next()); console.log(generator.next());
Keluaran
1. kode sebelum hasil pertama (nilai: 100, selesai: salah) 2. kode sebelum hasil kedua (nilai: 200, selesai: salah) (nilai: tidak ditentukan, selesai: benar)
Berikut adalah cara kerja program ini.
generator.next()Pernyataan pertama mengeksekusi kode hingga pernyataan hasil pertama dan menghentikan sementara eksekusi program.- Yang kedua
generator.next()memulai program dari posisi jeda. - Ketika semua elemen diakses, ia kembali (nilai: tidak ditentukan, selesai: benar).
Cara kerja fungsi generator di JavaScript
Meneruskan Argumen ke Fungsi Generator
Anda juga bisa meneruskan argumen ke fungsi generator. Sebagai contoh,
// generator function function* generatorFunc() ( // returns 'hello' at first next() let x = yield 'hello'; // returns passed argument on the second next() console.log(x); console.log('some code'); // returns 5 on second next() yield 5; ) const generator = generatorFunc(); console.log(generator.next()); console.log(generator.next(6)); console.log(generator.next());
Keluaran
(nilai: "halo", selesai: salah) 6 beberapa kode (nilai: 5, selesai: salah) (nilai: tidak ditentukan, selesai: benar)
Dalam program di atas,
- Yang pertama
generator.next()mengembalikan nilaiyield(dalam hal ini, 'halo'). Namun, nilai tersebut tidak diberikan ke variabel x inlet x = yield 'hello';(nilai: "halo", selesai: salah)
- Ketika
generator.next(6)ditemukan, kode dimulai lagi dilet x = yield 'hello';dan argumen 6 ditetapkan ke x. Juga, kode yang tersisa dieksekusi hingga detikyield.6 beberapa kode (nilai: 5, selesai: salah)
- Ketika yang ketiga
next()dijalankan, program kembali (nilai: tidak ditentukan, selesai: benar). Itu karena tidak ada pernyataan hasil lainnya.(nilai: tidak ditentukan, selesai: benar)
Generator Digunakan untuk Mengimplementasikan Iterables
Generator menyediakan cara yang lebih mudah untuk mengimplementasikan iterator.
Jika Anda ingin menerapkan iterator secara manual, Anda harus membuat iterator dengan next()metode dan menyimpan status. Sebagai contoh,
// creating iterable object const iterableObj = ( // iterator method (Symbol.iterator)() ( let step = 0; return ( next() ( step++; if (step === 1) ( return ( value: '1', done: false); ) else if (step === 2) ( return ( value: '2', done: false); ) else if (step === 3) ( return ( value: '3', done: false); ) return ( value: '', done: true ); ) ) ) ) for (const i of iterableObj) ( console.log(i); )
Keluaran
1 2 3
Karena generator bersifat iterable, Anda dapat mengimplementasikan iterator dengan cara yang lebih mudah. Kemudian Anda dapat melakukan iterasi melalui generator menggunakan for… ofloop. Sebagai contoh,
// generator function function* generatorFunc() ( yield 1; yield 2; yield 3; ) const obj = generatorFunc(); // iteration through generator for (let value of obj) ( console.log(value); )
Metode Generator
| metode | Deskripsi |
|---|---|
next() | Mengembalikan nilai hasil |
return() | Mengembalikan nilai dan menghentikan generator |
throw() | Melempar kesalahan dan menghentikan generator |
JavaScript mengembalikan Vs hasil Kata kunci
| kembali Kata Kunci | menghasilkan Kata Kunci |
|---|---|
| Mengembalikan nilai dan menghentikan fungsinya. | Mengembalikan nilai dan menghentikan fungsi tetapi tidak menghentikan fungsinya. |
| Tersedia dalam fungsi normal dan fungsi generator. | Hanya tersedia di fungsi generator. |
Fungsi Generator JavaScript Dengan pengembalian
You can use the return statement in a generator function. The return statement returns a value and terminates the function (similar to regular functions). For example,
// generator function function* generatorFunc() ( yield 100; return 123; console.log("2. some code before second yield"); yield 200; ) // returns generator object const generator = generatorFunc(); console.log(generator.next()); console.log(generator.next()); console.log(generator.next());
Output
(value: 100, done: false) (value: 123, done: true) (value: undefined, done: true)
In the above program, when the return statement is encountered, it returns the value and done property becomes true, and the function terminates. Hence, the next() method after the return statement does not return anything.
Note: You can also use the return() method instead of the return statement like generator.return(123); in the above code.
JavaScript Generator Throw Method
Anda bisa secara eksplisit melempar kesalahan pada fungsi generator menggunakan metode throw (). Penggunaan throw()metode melempar kesalahan dan menghentikan fungsi. Sebagai contoh,
// generator function function* generatorFunc() ( yield 100; yield 200; ) // returns generator object const generator = generatorFunc(); console.log(generator.next()); // throws an error // terminates the generator console.log(generator.throw(new Error('Error occurred.'))); console.log(generator.next());
Keluaran
(nilai: 1, selesai: salah) Kesalahan: Terjadi kesalahan.
Kegunaan Generator
- Generator memungkinkan kita menulis kode yang lebih bersih saat menulis tugas asinkron.
- Generator menyediakan cara yang lebih mudah untuk mengimplementasikan iterator.
- Generator menjalankan kodenya hanya jika diperlukan.
- Generator hemat memori.
Generator diperkenalkan di ES6 . Beberapa browser mungkin tidak mendukung penggunaan generator. Untuk mempelajari lebih lanjut, kunjungi dukungan JavaScript Generators.
