Memilih Loop jQuery: each(), for, atau map()?

Kamu punya daftar item di halaman dan ingin melakukan sesuatu pada setiap elemennya, tapi bingung harus pakai each(), for, atau map(). Ketiganya bisa dipakai, tetapi konteks penggunaannya berbeda. Artikel ini membandingkan ketiga cara tersebut supaya kamu bisa memilih each(), for, atau map() dengan tepat.

each(): cara paling ringkas untuk elemen jQuery

each() adalah metode jQuery yang paling sering dipakai untuk iterasi koleksi elemen. Sintaksnya sederhana:

$('li').each(function(index, element) {
  console.log(index, $(element).text());
});

Di dalam callback, this sudah merujuk ke elemen DOM, jadi kamu bisa langsung mengakses properti seperti this.id atau this.className. Indeks juga tersedia jika perlu. each() cocok ketika kamu bekerja dengan objek jQuery hasil seleksi dan ingin melakukan aksi pada tiap elemen, misalnya menambahkan class berdasarkan posisi.

each() tidak mengembalikan array baru, jadi tidak cocok untuk transformasi data. Jika kamu butuh hasil olahan, pertimbangkan map().

for: kontrol penuh dan performa terbaik

Loop for klasik masih juara dalam hal kecepatan karena tidak ada overhead pemanggilan fungsi. Kamu mengakses elemen DOM langsung tanpa pembungkus jQuery:

var items = document.querySelectorAll('li');
for (var i = 0; i < items.length; i++) {
  items[i].classList.add('item-' + i);
}

Kode di atas tidak memerlukan jQuery sama sekali. Untuk koleksi besar atau operasi yang sering dijalankan, for lebih efisien. Kekurangannya, kamu harus mengelola indeks dan panjang array secara manual. Jika perlu membungkus elemen dengan jQuery, lakukan di dalam loop: $(items[i]).addClass(...). Ini menambah sedikit biaya, tetapi masih lebih cepat daripada each() untuk jumlah elemen yang banyak.

for juga berguna saat kamu ingin keluar dari loop lebih awal dengan break atau melanjutkan dengan continue. each() bisa dihentikan dengan return false, tapi for memberi kontrol yang lebih eksplisit.

map(): mengubah koleksi menjadi array baru

map() di jQuery bekerja mirip Array.prototype.map: ia menghasilkan objek jQuery baru berisi nilai kembalian dari callback. Contoh:

var texts = $('li').map(function() {
  return $(this).text();
}).get();

Hasilnya adalah array teks dari setiap li. map() tepat dipakai ketika kamu ingin mengekstrak data, misalnya mengambil semua nilai input atau atribut tertentu. Jangan gunakan map() hanya untuk menambahkan class; itu bukan tujuan utamanya.

map() mengembalikan objek jQuery, jadi panggil .get() jika kamu memerlukan array JavaScript biasa. Jika tidak, kamu bisa langsung merantai dengan metode jQuery lain.

Perbandingan singkat

Contoh kasus: mengambil semua nilai input

Misalnya kamu punya form dengan beberapa input teks dan ingin mengumpulkan nilainya. Dengan map(), kodenya seperti ini:

var values = $('input[type="text"]').map(function() {
  return $(this).val();
}).get();

Jika memakai each(), kamu perlu menyiapkan array kosong dan mendorong nilai ke dalamnya:

var values = [];
$('input[type="text"]').each(function() {
  values.push($(this).val());
});

Keduanya benar, tetapi map() lebih jelas maksudnya. Untuk informasi lebih lanjut tentang mengambil nilai input, lihat panduan val(), attr(), dan prop().

Kapan sebaiknya menghindari each()?

each() menggoda karena mudah, tapi ada situasi di mana ia kurang tepat. Jika kamu hanya perlu mengubah properti DOM tanpa pembungkus jQuery, for lebih langsung. Jika kamu perlu menghasilkan array baru, map() lebih ekspresif. Memilih alat yang sesuai termasuk bagian dari menulis kode rapi, seperti dijelaskan dalam artikel tentang kode jQuery yang mudah dirawat.

each() pada objek jQuery mengiterasi elemen dalam urutan dokumen. Jika kamu membutuhkan urutan tertentu, pastikan seleksi sudah sesuai.

Ringkasan

Untuk iterasi elemen jQuery dengan aksi sampingan, each() adalah pilihan default yang ringkas. Saat performa menjadi prioritas atau kamu butuh kontrol loop penuh, gunakan for. Ketika tujuanmu adalah mengubah koleksi menjadi array nilai baru, map() adalah jawabannya. Menguasai ketiganya membuat kode lebih efisien dan mudah dibaca.

Pertanyaan yang Sering Diajukan

Apakah each() bisa menghentikan loop?

Bisa. Kembalikan false dari callback untuk menghentikan iterasi, mirip break pada loop biasa. Mengembalikan true akan melanjutkan ke elemen berikutnya.

Apakah for lebih cepat dari each()?

Umumnya ya, karena for tidak memanggil fungsi untuk setiap elemen. Perbedaan performa baru terasa pada koleksi yang sangat besar. Untuk sebagian besar kasus, keterbacaan kode lebih penting.

Kapan sebaiknya memakai map() daripada each()?

Gunakan map() ketika kamu ingin menghasilkan array baru dari setiap elemen, misalnya mengambil teks atau nilai. each() lebih cocok untuk melakukan aksi pada elemen tanpa perlu mengembalikan nilai.