7 Teknik Loop JavaScript yang Sering Dipakai Pro

Menulis for (let i = 0; i < 10; i++) sudah biasa. Namun saat data berlapis atau loop perlu berhenti di tengah, loop biasa kurang terkontrol. Tujuh teknik loop JavaScript berikut sering dipakai pengembang untuk iterasi yang lebih rapi.

1. Hentikan Loop Lebih Awal dengan break

Loop tidak harus berjalan sampai selesai. Saat sudah menemukan yang dicari, break langsung menghentikan iterasi. Ini menghemat waktu, terutama pada array besar atau pencarian yang jarang ketemu di akhir.

const users = [{id:1, name:'Ani'}, {id:2, name:'Budi'}, {id:3, name:'Citra'}];
let found;
for (let i = 0; i < users.length; i++) {
  if (users[i].id === 2) {
    found = users[i];
    break; // berhenti setelah ketemu
  }
}
console.log(found.name); // Budi

Tanpa break, loop tetap memeriksa sisa elemen. Untuk data ribuan baris, perbedaannya terasa.

2. Lewati Iterasi dengan continue

continue berguna untuk melewati kondisi tertentu tanpa keluar dari loop. Misalnya, hanya memproses angka ganjil dan mengabaikan yang genap.

for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) continue;
  console.log(i); // 1, 3, 5, 7, 9
}

Dengan continue, blok kode utama tetap fokus pada logika yang diinginkan. Kamu tidak perlu membungkus semuanya dalam if besar.

3. Gunakan for…of untuk Array dan String

for...of memberi nilai setiap elemen secara langsung, tanpa indeks manual. Ini membuat kode lebih pendek dan mengurangi risiko salah indeks.

const fruits = ['apel', 'jeruk', 'mangga'];
for (const fruit of fruits) {
  console.log(fruit);
}

String juga bisa diiterasi per karakter. Saat butuh indeks, kamu tetap bisa memakai entries().

for (const [i, fruit] of fruits.entries()) {
  console.log(i, fruit);
}

4. Loop dengan Batas Dinamis: length Cache

Menulis for (let i = 0; i < arr.length; i++) berarti properti length dibaca ulang setiap iterasi. Untuk array yang tidak berubah, menyimpan panjangnya di variabel bisa sedikit lebih efisien.

const data = [/* ... */];
for (let i = 0, len = data.length; i < len; i++) {
  // proses data[i]
}

Pada array kecil, dampaknya tidak terasa. Namun, saat berhadapan dengan ribuan item, kebiasaan ini membantu.

5. Loop Mundur untuk Menghapus Elemen

Menghapus elemen dari array saat iterasi maju bisa membuat indeks bergeser dan ada elemen yang terlewat. Loop mundur menghindari masalah itu.

const numbers = [1, 2, 3, 4, 5];
for (let i = numbers.length - 1; i >= 0; i--) {
  if (numbers[i] % 2 === 0) {
    numbers.splice(i, 1);
  }
}
console.log(numbers); // [1, 3, 5]

Dengan mundur, elemen yang dihapus tidak mempengaruhi indeks yang belum diperiksa.

6. Loop Bersarang dengan Label

JavaScript memungkinkan label pada loop. Saat berada di dalam loop bersarang, break atau continue bisa diarahkan ke loop luar.

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) break outer;
    console.log(i, j);
  }
}

Label membuat alur keluar dari loop bersarang menjadi eksplisit. Namun, gunakan secukupnya agar kode tetap mudah dibaca.

7. while dengan Kondisi yang Jelas

while cocok ketika jumlah iterasi tidak diketahui pasti. Pastikan kondisi berhenti selalu bisa tercapai agar tidak terjadi loop tak berujung.

let input;
while (input !== 'keluar') {
  input = prompt('Ketik perintah:');
  // proses input
}

Untuk perulangan yang setidaknya harus jalan sekali, do...while lebih tepat.

let jawab;
do {
  jawab = prompt('Setuju? (ya/tidak)');
} while (jawab !== 'ya' && jawab !== 'tidak');

Jika kamu baru mulai belajar JavaScript, mulailah dari loop sederhana dulu. Setelah nyaman, teknik-teknik di atas akan terasa alami. Panduan tips praktis belajar JavaScript untuk pemula bisa jadi titik awal yang baik.

Untuk iterasi array yang lebih fungsional, kamu bisa membandingkan for, forEach, dan map di artikel memilih metode iterasi array di JavaScript. Sementara itu, jika butuh menunda eksekusi di dalam loop, kenali perbedaan setTimeout, setInterval, dan requestAnimationFrame.

Ringkasan

Loop yang baik bukan tentang seberapa cepat kamu menulisnya, tetapi seberapa tepat kendalinya. break dan continue mengatur alur, for...of menyederhanakan akses nilai, dan label membantu keluar dari sarang. Latih satu teknik per sesi latihan agar terbiasa.

Pertanyaan yang Sering Diajukan

Kapan sebaiknya pakai for…of daripada for biasa?

Gunakan for...of saat kamu hanya butuh nilai elemen, bukan indeks. Jika indeks diperlukan untuk logika tertentu, for klasik atau entries() lebih sesuai.

Apakah label pada loop dianggap praktik buruk?

Tidak selalu. Label berguna untuk loop bersarang yang dalam. Namun, jika terlalu banyak label, pertimbangkan memecah fungsi agar alurnya lebih jelas.

Bagaimana mencegah loop tak berujung pada while?

Pastikan ada perubahan yang mempengaruhi kondisi loop, misalnya menambah counter atau mengubah variabel penentu. Gunakan console.log sementara untuk memantau nilai.