Memilih Metode Iterasi Array di JavaScript: for, forEach, atau map?

Kamu sedang menulis kode untuk menampilkan daftar produk, lalu bingung harus pakai for, forEach, atau map. Ketiganya sama-sama mengulang array, tetapi hasil dan kegunaannya berbeda. Perbandingan metode iterasi array JavaScript berikut menunjukkan pilihan yang umum dipakai dan kapan sebaiknya masing-masing digunakan.

Iterasi Array JavaScript: Mengapa Pilihan Metode Penting?

JavaScript menyediakan beberapa cara untuk mengunjungi setiap elemen array. Masing-masing punya perilaku spesifik: ada yang mengembalikan array baru, ada yang hanya menjalankan efek samping, dan ada yang bisa dihentikan di tengah jalan. Memilih metode yang sesuai membuat kode lebih mudah dibaca dan menghindari bug halus, misalnya nilai kembalian yang tidak terduga atau loop yang tidak berhenti.

Beberapa metode juga punya dukungan browser yang berbeda. forEach dan map sudah ada sejak ES5, sedangkan for...of baru muncul di ES6. Untuk kode yang harus berjalan di lingkungan lama, hal ini perlu dipertimbangkan.

Perbandingan for, forEach, map, dan for…of

Tabel berikut membandingkan keempat metode dari segi pengembalian nilai, kemampuan menghentikan loop, dan dukungan browser.

map dan filter mengembalikan array baru, sedangkan forEach mengembalikan undefined. Kesalahan umum adalah mengira forEach bisa mengembalikan nilai seperti map.

Kapan Menggunakan for atau for…of?

Gunakan for klasik ketika kamu perlu kontrol penuh atas indeks, misalnya saat mengakses array dengan langkah tertentu atau menghentikan loop lebih awal. Contohnya, saat mencari elemen pertama yang memenuhi kondisi dan langsung keluar dari loop.

const numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] === 3) {
    console.log('Ditemukan 3 di indeks', i);
    break; // loop berhenti
  }
}

for...of lebih ringkas dan menghindari pengelolaan indeks manual. Metode ini juga bisa dihentikan dengan break atau return di dalam fungsi. Namun, for...of tidak memberi akses langsung ke indeks kecuali kamu menggunakan entries().

for...in mengiterasi properti enumerable dari objek, termasuk properti warisan, sehingga tidak disarankan untuk array. Jangan tertukar dengan for...of yang mengiterasi nilai elemen.

forEach: Untuk Efek Samping Saja

forEach cocok ketika kamu hanya ingin menjalankan sesuatu untuk setiap elemen, tanpa perlu mengembalikan nilai. Misalnya, menambahkan event listener ke setiap tombol atau mencatat log. Kode menjadi lebih deklaratif dibandingkan loop manual.

const tombol = document.querySelectorAll('button');
tombol.forEach(btn => {
  btn.addEventListener('click', () => console.log('Tombol diklik'));
});

Karena forEach tidak mengembalikan apa pun, kamu tidak bisa merantai metode lain setelahnya. Jika kamu membutuhkan transformasi, gunakan map.

map: Untuk Transformasi Data

map digunakan ketika kamu ingin membuat array baru berdasarkan array asli, tanpa mengubah array asli. Setiap elemen diproses dan hasilnya dikumpulkan dalam array baru dengan panjang yang sama.

const angka = [1, 2, 3];
const kuadrat = angka.map(n => n * n);
console.log(kuadrat); // [1, 4, 9]

Jangan gunakan map hanya untuk efek samping karena nilai kembaliannya diabaikan dan itu membuat kode kurang jelas. Untuk efek samping saja, forEach lebih tepat.

Metode Lain: filter, reduce, some, every

Selain map dan forEach, ada metode lain yang dirancang untuk tujuan spesifik. filter mengembalikan array baru berisi elemen yang lolos uji. reduce mereduksi array menjadi satu nilai. some dan every mengembalikan boolean untuk mengecek apakah ada atau semua elemen memenuhi kondisi.

• filter: menyaring elemen berdasarkan kondisi.
• reduce: menjumlahkan, menggabungkan, atau mengakumulasi nilai.
• some: true jika setidaknya satu elemen memenuhi kondisi.
• every: true jika semua elemen memenuhi kondisi.

Menggabungkan metode ini bisa membuat kode lebih ekspresif, tetapi hindari rantai metode yang terlalu panjang agar tetap mudah dibaca. Untuk menggabungkan array, ada teknik tersendiri yang dibahas di Cara Menggabungkan Array di JavaScript: Panduan Lengkap.

Contoh Kasus: Menampilkan Daftar Produk

Misalkan kamu punya array objek produk dan ingin menampilkan nama produk yang harganya di atas 100 ribu, lalu menghitung total harganya. Kamu bisa menggunakan filter untuk menyaring, map untuk mengambil nama, dan reduce untuk menjumlahkan.

const produk = [
  { nama: 'A', harga: 50000 },
  { nama: 'B', harga: 150000 },
  { nama: 'C', harga: 200000 }
];

const mahal = produk.filter(p => p.harga > 100000);
const namaMahal = mahal.map(p => p.nama);
const total = mahal.reduce((acc, p) => acc + p.harga, 0);
console.log(namaMahal); // ['B', 'C']
console.log(total); // 350000

Dengan memahami peran masing-masing metode, kamu bisa menghindari loop manual yang panjang dan mengurangi risiko kesalahan.

Kesalahan Umum dan Cara Menghindarinya

Beberapa jebakan sering muncul saat menggunakan metode iterasi array. Salah satunya adalah menggunakan map tanpa menyimpan hasilnya, yang membuat operasi sia-sia. Contoh lain, memodifikasi array saat iterasi berlangsung dengan forEach atau map dapat menyebabkan perilaku tak terduga.

Jika kamu menemui bug aneh terkait iterasi, teknik debugging di Tips Debugging JavaScript untuk Pemula: Mengatasi Error Tanpa Panik bisa membantu melacak sumber masalah. Pahami juga cara kerja event loop jika iterasi melibatkan operasi asinkron, seperti yang dijelaskan di Cara Memahami Event di JavaScript Tanpa Bingung.

Ringkasan

Pilih for atau for...of saat butuh kontrol penuh dan kemampuan menghentikan loop. Gunakan forEach untuk efek samping, map untuk transformasi, dan metode seperti filter atau reduce untuk operasi spesifik. Menyesuaikan metode dengan tujuan membuat kode lebih bersih dan mudah dirawat.

Pertanyaan yang Sering Diajukan

Apakah forEach bisa mengembalikan nilai?

Tidak. forEach selalu mengembalikan undefined. Jika kamu perlu nilai kembalian berupa array baru, gunakan map atau filter.

Kapan sebaiknya menggunakan for…of dibanding for klasik?

Gunakan for...of ketika kamu tidak perlu mengakses indeks secara manual dan ingin kode lebih ringkas. Jika kamu perlu mengubah nilai array saat iterasi atau membutuhkan indeks, for klasik lebih fleksibel.

Apakah map lebih cepat dari forEach?

Secara performa, perbedaannya biasanya kecil untuk kebanyakan kasus. Pilih berdasarkan keterbacaan dan tujuan kode, bukan sekadar kecepatan. Untuk array sangat besar, pengujian sendiri diperlukan.