Helper iterator telah menjadi Dasar Pengukuran yang baru tersedia

Jeremy Wagner
Jeremy Wagner

Dipublikasikan: 1 Mei 2025

Jika Anda menulis JavaScript, iterasi adalah hal yang sering Anda lakukan. Anda menulis loop untuk menggunakan array, atau menggunakan metode pemrograman fungsional seperti map, filter, dan metode serupa lainnya untuk memproses semua jenis data.

Namun, satu masalah yang dihadapi saat menggunakan metode ini adalah metode ini hanya tersedia di array. Jika ingin menggunakannya pada iterable, Anda harus mengonversinya menjadi array, lalu memanggil metode yang diperlukan. Hal ini dapat menjadi pemborosan, atau jika interable mewakili set data yang tidak terbatas menggunakan fungsi generator, hal ini tidak mungkin dilakukan. Namun, sekarang setelah helper iterator menjadi Dasar Pengukuran yang baru tersedia, kemampuan ini akhirnya tersedia di seluruh browser.

Bagaimana cara kerja helper iterasi?

Helper iterator diekspos dengan menentukan metode baru pada prototype objek Iterator. Metode ini selaras dengan banyak metode pemrograman fungsional yang biasa Anda gunakan, seperti map, filter, reduce, dan metode serupa lainnya.

Misalnya, Anda dapat menggunakan helper iterator pada metode filter untuk memfilter item daftar berdasarkan konten properti innerText untuk kumpulan node DOM, yang kemudian dapat Anda gunakan nanti dalam loop for:

const posts = document.querySelectorAll("ul#specific-list > li")
  .values()
  .filter(item => item.textContent.includes("kiwi"));

// For-of loops can only be used on iterables, which `posts` is!
for (const post of posts) {
  console.log(post.textContent);
}

Dalam cuplikan kode sebelumnya, metode helper iterator untuk filter digunakan untuk melakukan iterasi pada semua elemen <li> dalam elemen <ul> tertentu. Kriteria pemfilteran adalah setiap konten teks elemen harus berisi substring "kiwi".

Helper iterator juga dapat digunakan dengan fungsi generator. Dalam contoh ini, fungsi generator yang menghitung faktorial, tetapi menggunakan bantuan iterator untuk memfilter nilai ke nilai yang dapat dibagi 8, dan mencatat lima nilai pertama yang difilter ke konsol:

function* factorials (n) {
  let result = 1;

  for (let i = 1; i <= n; i++) {
    result *= i;

    yield result;
  }
}

const filteredFactorials = factorials(128).filter(x => x % 8 === 0);

console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);

Secara khusus, cuplikan kode sebelumnya adalah contoh sesuatu yang tidak akan mungkin dilakukan dengan helper iterator, karena jumlah faktorial tidak terbatas, dan bukan sesuatu yang dapat Anda konversi menjadi array.

Bergantung pada situasi Anda, helper iterator memiliki banyak potensi— dan tersedia untuk setiap metode iterasi ini:

Kemungkinan kasus penggunaan helper iterator sangat luas, dan dapat memberikan peningkatan yang signifikan dalam ergonomi developer. Setelah tersedia di Dasar Pengukuran, Anda akan semakin yakin bahwa Anda dapat menggunakannya tanpa khawatir akan masalah kompatibilitas. Untuk informasi selengkapnya, lihat referensi berikut: