Cara JavaScript Berjalan: Engine, Event Loop, Async · 9/9

Iterator dan generator

Cara kerja for...of sebenarnya, dan function yang bisa berhenti di tengah jalan.

Baca 25 menit

Setelah pelajaran ini kamu bisa

Menjelaskan apa yang membuat sebuah value bisa dipakai dengan `for...of`
Menulis iterable buatan sendiri
Memakai generator untuk menghasilkan value secara lazy
Mengonsumsi stream asinkron dengan `for await...of`

for...of bukan bawaan array. Ia bekerja dengan value apa pun yang mengikuti kesepakatan kecil bernama iterable protocol. Begitu kamu melihat kesepakatannya, kamu bisa membuat datamu sendiri bisa dipakai dengan for...of, spread, dan destructuring.

Kesepakatannya: punya method bernama Symbol.iterator yang mengembalikan object dengan method next(), dan next() mengembalikan { value, done }. Cuma itu.

Coba sendiri

Menjalankan iterator sebuah array secara manual, persis yang dilakukan for...of untukmu.

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Iterable buatan sendiri

Coba sendiri

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Generator

Menulis protokol itu secara manual itu melelahkan. Generator — function* dengan yield — membangunnya untukmu. Function generator bisa berhenti di setiap yield, menyerahkan sebuah value, lalu melanjutkan dari tempat ia berhenti saat diminta value berikutnya.

Coba sendiri

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Baca log yang saling menyela itu dengan teliti: badan generator-nya hanya maju saat kamu meminta. Ini evaluasi lazy — pekerjaannya terjadi saat dibutuhkan, bukan di awal.

Karena generator sudah bersifat iterable, contoh range di atas menyusut jadi beberapa baris saja.

Coba sendiri

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Iterasi asinkron

async function* menghasilkan promise, dan for await...of meng-await masing-masingnya. Ini cara kamu mengonsumsi sebuah stream — baris yang datang dari database, potongan yang datang dari response jaringan, atau token yang datang dari sebuah language model.

Coba sendiri

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Tugas praktik

Tulis generator chunk(array, size) yang menghasilkan potongan berurutan sebanyak size item — chunk([1,2,3,4,5], 2) menghasilkan [1,2], [3,4], [5]. Lalu pastikan [...chunk([1,2,3,4,5], 2)] memberi ketiganya, dan for...of atasnya berhenti dengan benar.

Hasil yang diharapkan

[[1,2],[3,4],[5]]

Tampilkan contoh solusi

Coba dulu minimal sepuluh menit sebelum membuka ini. Bagian yang terasa susah itu justru yang mengajari kamu.

function* chunk(array, size) {
  for (let i = 0; i < array.length; i += size) {
    yield array.slice(i, i + size);
  }
}

console.log([...chunk([1, 2, 3, 4, 5], 2)]);

for (const group of chunk([1, 2, 3, 4, 5], 2)) {
  console.log("group:", group);
}