JavaScript Iterator Helpers dan Eksekusi Paralel: Penyelaman Mendalam ke Pemrosesan Aliran Konkuren

Dalam lanskap pengembangan web yang terus berkembang, performa bukan hanya sebuah fitur; itu adalah persyaratan mendasar. Seiring aplikasi menangani kumpulan data yang semakin besar dan operasi yang kompleks, sifat sekuensial tradisional dari JavaScript dapat menjadi hambatan yang signifikan. Mulai dari mengambil ribuan catatan dari API hingga memproses file besar, kemampuan untuk melakukan tugas secara bersamaan adalah yang terpenting.

Masuklah proposal Iterator Helpers, sebuah proposal TC39 Tahap 3 yang siap merevolusi cara pengembang bekerja dengan data yang dapat diulang (iterable) di JavaScript. Meskipun tujuan utamanya adalah untuk menyediakan API yang kaya dan dapat dirangkai (chainable) untuk iterator (mirip dengan yang ditawarkan `Array.prototype` untuk array), sinerginya dengan operasi asinkron membuka cakrawala baru: pemrosesan aliran konkuren yang elegan, efisien, dan asli.

Artikel ini akan memandu Anda melalui paradigma eksekusi paralel menggunakan asynchronous iterator helpers. Kita akan menjelajahi 'mengapa', 'bagaimana', dan 'apa selanjutnya', memberikan Anda pengetahuan untuk membangun pipeline pemrosesan data yang lebih cepat dan lebih tangguh di JavaScript modern.

Hambatan: Sifat Sekuensial dari Iterasi

Sebelum kita mendalami solusinya, mari kita tetapkan masalahnya dengan kuat. Pertimbangkan skenario umum: Anda memiliki daftar ID pengguna, dan untuk setiap ID, Anda perlu mengambil data pengguna terperinci dari API.

Pendekatan tradisional menggunakan loop `for...of` dengan `async/await` terlihat bersih dan mudah dibaca, tetapi memiliki kelemahan performa yang tersembunyi.

            
async function fetchUserDetailsSequentially(userIds) {
  const userDetails = [];
  console.time("Sequential Fetch");

  for (const id of userIds) {
    // Setiap 'await' menjeda seluruh loop hingga promise selesai.
    const response = await fetch(`https://api.example.com/users/${id}`);
    const user = await response.json();
    userDetails.push(user);
    console.log(`Fetched user ${id}`);
  }

  console.timeEnd("Sequential Fetch");
  return userDetails;
}

const ids = [1, 2, 3, 4, 5];
// Jika setiap panggilan API memakan waktu 1 detik, seluruh fungsi ini akan memakan waktu ~5 detik.
fetchUserDetailsSequentially(ids);

            

              
                Copy
              
            
          

Dalam kode ini, setiap `await` di dalam loop memblokir eksekusi lebih lanjut hingga permintaan jaringan spesifik tersebut selesai. Jika Anda memiliki 100 ID dan setiap permintaan memakan waktu 500ms, total waktu akan menjadi 50 detik yang mengejutkan! Ini sangat tidak efisien karena operasi-operasi tersebut tidak saling bergantung; mengambil data pengguna 2 tidak memerlukan data pengguna 1 untuk ada terlebih dahulu.

Solusi Klasik: `Promise.all`

Solusi yang sudah mapan untuk masalah ini adalah `Promise.all`. Ini memungkinkan kita untuk memulai semua operasi asinkron sekaligus dan menunggu semuanya selesai.

            
async function fetchUserDetailsWithPromiseAll(userIds) {
  console.time("Promise.all Fetch");

  const promises = userIds.map(id => 
    fetch(`https://api.example.com/users/${id}`).then(res => res.json())
  );

  // Semua permintaan dijalankan secara bersamaan.
  const userDetails = await Promise.all(promises);

  console.timeEnd("Promise.all Fetch");
  return userDetails;
}

// Jika setiap panggilan API memakan waktu 1 detik, sekarang ini hanya akan memakan waktu ~1 detik (waktu permintaan terlama).
fetchUserDetailsWithPromiseAll(ids);

            

              
                Copy
              
            
          

`Promise.all` adalah peningkatan besar. Namun, ia memiliki keterbatasannya sendiri:

• Konsumsi Memori: Ini memerlukan pembuatan array dari semua promise di awal dan menampung semua hasil di memori sebelum mengembalikannya. Ini bermasalah untuk aliran data yang sangat besar atau tak terbatas.
• Tanpa Kontrol Backpressure: Ini menjalankan semua permintaan secara bersamaan. Jika Anda memiliki 10.000 ID, Anda mungkin membanjiri sistem Anda sendiri, batas laju server, atau koneksi jaringan. Tidak ada cara bawaan untuk membatasi konkurensi, misalnya, 10 permintaan sekaligus.
• Penanganan Kesalahan 'Semua atau Tidak Sama Sekali': Jika satu promise dalam array ditolak (reject), `Promise.all` akan segera menolak, membuang hasil dari semua promise lain yang berhasil.

Di sinilah kekuatan iterator asinkron dan helper yang diusulkan benar-benar bersinar. Mereka memungkinkan pemrosesan berbasis aliran dengan kontrol yang sangat detail atas konkurensi.

Memahami Iterator Asinkron

Sebelum kita bisa berlari, kita harus berjalan. Mari kita rekap singkat tentang iterator asinkron. Sementara metode `.next()` dari iterator biasa mengembalikan objek seperti `{ value: 'some_value', done: false }`, metode `.next()` dari iterator asinkron mengembalikan Promise yang akan selesai (resolve) menjadi objek tersebut.

Ini memungkinkan kita untuk melakukan iterasi pada data yang datang seiring waktu, seperti potongan dari aliran file, hasil API yang dipaginasi, atau peristiwa dari WebSocket.

Kita menggunakan loop `for await...of` untuk mengonsumsi iterator asinkron:

            
// Sebuah fungsi generator yang menghasilkan nilai setiap detik.
async function* createSlowStream() {
  for (let i = 1; i <= 5; i++) {
    await new Promise(resolve => setTimeout(resolve, 1000));
    yield i;
  }
}

async function consumeStream() {
  const stream = createSlowStream();
  // Loop berhenti di setiap 'await' untuk menunggu nilai berikutnya dihasilkan.
  for await (const value of stream) {
    console.log(`Received: ${value}`); // Mencatat 1, 2, 3, 4, 5, satu per detik
  }
}

consumeStream();

            

              
                Copy
              
            
          

Pengubah Permainan: Proposal Iterator Helpers

Proposal TC39 Iterator Helpers menambahkan metode yang sudah dikenal seperti `.map()`, `.filter()`, dan `.take()` secara langsung ke semua iterator (baik sinkron maupun asinkron) melalui `Iterator.prototype` dan `AsyncIterator.prototype`. Ini memungkinkan kita membuat pipeline pemrosesan data yang kuat dan deklaratif tanpa harus terlebih dahulu mengubah iterator menjadi array.

Pertimbangkan aliran asinkron dari pembacaan sensor. Dengan async iterator helpers, kita bisa memprosesnya seperti ini:

            
async function processSensorData() {
  const sensorStream = getAsyncSensorReadings(); // Mengembalikan iterator asinkron

  // Sintaks hipotetis di masa depan dengan async iterator helpers bawaan
  const processedStream = sensorStream
    .filter(reading => reading.temperature > 30) // Filter untuk suhu tinggi
    .map(reading => ({ ...reading, temperature: toFahrenheit(reading.temperature) })) // Konversi ke Fahrenheit
    .take(10); // Hanya ambil 10 pembacaan kritis pertama

  for await (const criticalReading of processedStream) {
    await sendAlert(criticalReading);
  }
}

            

              
                Copy
              
            
          

Ini elegan, hemat memori (memproses satu item pada satu waktu), dan sangat mudah dibaca. Namun, helper `.map()` standar, bahkan untuk iterator asinkron, masih sekuensial. Setiap operasi pemetaan harus selesai sebelum yang berikutnya dimulai.

Bagian yang Hilang: Pemetaan Konkuren

Kekuatan sejati untuk optimisasi performa datang dari gagasan peta konkuren. Bagaimana jika operasi `.map()` bisa mulai memproses item berikutnya sementara yang sebelumnya masih ditunggu (await)? Inilah inti dari eksekusi paralel dengan iterator helpers.

Meskipun helper `mapConcurrent` tidak secara resmi menjadi bagian dari proposal saat ini, blok bangunan yang disediakan oleh iterator asinkron memungkinkan kita untuk mengimplementasikan pola ini sendiri. Memahami cara membangunnya memberikan wawasan mendalam tentang konkurensi JavaScript modern.

Membangun Helper `map` Konkuren

Mari kita rancang helper `asyncMapConcurrent` kita sendiri. Ini akan menjadi fungsi generator asinkron yang mengambil iterator asinkron, fungsi pemeta (mapper), dan batas konkurensi.

Tujuan kita adalah:

1. Memproses beberapa item dari iterator sumber secara paralel.
2. Membatasi jumlah operasi konkuren ke tingkat yang ditentukan (mis., 10 sekaligus).
3. Menghasilkan hasil dalam urutan asli kemunculannya di aliran sumber.
4. Menangani backpressure secara alami: jangan mengambil item dari sumber lebih cepat daripada yang bisa diproses dan dikonsumsi.

Strategi Implementasi

Kita akan mengelola sebuah kumpulan (pool) tugas aktif. Ketika sebuah tugas selesai, kita akan memulai yang baru, memastikan jumlah tugas aktif tidak pernah melebihi batas konkurensi kita. Kita akan menyimpan promise yang tertunda dalam sebuah array dan menggunakan `Promise.race()` untuk mengetahui kapan tugas berikutnya telah selesai, memungkinkan kita untuk menghasilkan hasilnya dan menggantinya.

            
/**
 * Memproses item dari iterator asinkron secara paralel dengan batas konkurensi.
 * @param {AsyncIterable} source Iterator asinkron sumber.
 * @param {(item: T) => Promise} mapper Fungsi asinkron untuk diterapkan pada setiap item.
 * @param {number} concurrency Jumlah maksimum operasi paralel.
 * @returns {AsyncGenerator}
 */
async function* asyncMapConcurrent(source, mapper, concurrency) {
  const executing = []; // Kumpulan promise yang sedang dieksekusi
  const iterator = source[Symbol.asyncIterator]();

  async function processNext() {
    const { value, done } = await iterator.next();
    if (done) {
      return; // Tidak ada item lagi untuk diproses
    }
    
    // Mulai operasi pemetaan dan tambahkan promise ke kumpulan
    const promise = Promise.resolve(mapper(value)).then(mappedValue => ({ 
        result: mappedValue,
        sourceValue: value
    }));

    executing.push(promise);
  }

  // Isi kumpulan dengan tugas awal hingga batas konkurensi
  for (let i = 0; i < concurrency; i++) {
    processNext();
  }

  while (executing.length > 0) {
    // Tunggu salah satu promise yang dieksekusi untuk selesai
    const finishedPromise = await Promise.race(executing);

    // Temukan indeks dan hapus promise yang sudah selesai dari kumpulan
    const index = executing.indexOf(finishedPromise);
    executing.splice(index, 1);

    const { result } = await finishedPromise;
    yield result;

    // Karena ada slot yang terbuka, mulai tugas baru jika masih ada item
    processNext();
  }
}

            

              
                Copy
              
            
          

            
// Helper untuk mensimulasikan panggilan API dengan penundaan acak
function fetchUser(id) {
  const delay = Math.random() * 1000 + 500; // penundaan 500ms - 1500ms
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(`Resolved fetch for user ${id}`);
      resolve({ id, name: `User ${id}`, fetchedAt: Date.now() });
    }, delay);
  });
}

// Generator asinkron untuk membuat aliran ID
async function* createIdStream() {
  for (let i = 1; i <= 20; i++) {
    yield i;
  }
}

async function main() {
  const idStream = createIdStream();
  const concurrency = 5; // Proses 5 permintaan sekaligus

  console.time("Concurrent Stream Processing");

  const userStream = asyncMapConcurrent(idStream, fetchUser, concurrency);

  // Konsumsi aliran yang dihasilkan
  for await (const user of userStream) {
    console.log(`Processed and received:`, user);
  }

  console.timeEnd("Concurrent Stream Processing");
}

main();

            

              
                Copy