Cara Kerja Loop (for, while) di JavaScript dengan Contoh

Hampir setiap program yang kamu tulis nanti akan butuh mengulang suatu pekerjaan — menampilkan 10 angka, memeriksa setiap item di keranjang belanja, atau mencetak daftar nama. Di sinilah loop (perulangan) dipakai. JavaScript menyediakan beberapa jenis loop, tapi yang paling sering kamu temui adalah for dan while. Artikel ini membahas cara kerja keduanya lengkap dengan contoh, supaya kamu tahu kapan harus pakai yang mana.

Apa itu loop dan kenapa dibutuhkan?

Loop adalah struktur kode yang menjalankan blok instruksi yang sama berulang kali, selama kondisi tertentu masih terpenuhi. Tanpa loop, kamu harus menulis baris kode yang sama berkali-kali secara manual:

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);

Dengan loop, lima baris di atas bisa diringkas jadi beberapa baris saja — dan tetap bekerja meski kamu ingin mengulang 5 kali atau 5.000 kali.

Loop for: ketika jumlah perulangan sudah diketahui

for adalah pilihan paling umum saat kamu sudah tahu berapa kali sebuah blok kode perlu diulang. Sintaksnya punya tiga bagian yang dipisah titik koma:

for (let i = 1; i <= 5; i++) {
  console.log(i);
}
// Output: 1 2 3 4 5

Tiga bagian itu adalah:

• Inisialisasi (let i = 1) — dijalankan sekali di awal, biasanya membuat variabel counter.
• Kondisi (i <= 5) — diperiksa sebelum setiap perulangan; selama hasilnya true, loop terus berjalan.
• Langkah (i++) — dijalankan setelah setiap perulangan, biasanya menambah atau mengurangi counter.

Memakai let (bukan var) untuk counter sudah jadi praktik standar di JavaScript modern, karena scope-nya lebih aman dan tidak bocor ke luar blok loop.

Loop while: ketika jumlah perulangan belum pasti

while cocok dipakai saat kamu tidak tahu pasti berapa kali perulangan akan berjalan — loop hanya bergantung pada satu kondisi yang dicek di awal setiap iterasi:

let stok = 5;

while (stok > 0) {
  console.log("Sisa stok:", stok);
  stok--;
}
// Berhenti otomatis saat stok mencapai 0

Pola ini sering dipakai untuk hal-hal seperti menunggu input pengguna, membaca data sampai habis, atau memproses queue yang panjangnya tidak diketahui sejak awal.

Tips: selalu pastikan ada bagian kode di dalam while yang mengubah nilai kondisinya (seperti stok-- di atas). Lupa melakukan ini adalah salah satu kesalahan umum pemula coding yang menyebabkan infinite loop — program berjalan tanpa henti dan bisa membuat browser atau aplikasi macet.

Variasi: do...while

Ada satu varian lagi, do...while, yang menjalankan blok kode minimal satu kali sebelum memeriksa kondisinya:

let percobaan = 0;

do {
  percobaan++;
  console.log("Percobaan ke-", percobaan);
} while (percobaan < 3);

Bedanya dengan while biasa: kondisi dicek di akhir, bukan di awal. Jadi meskipun kondisinya sudah false dari awal, blok kode tetap dijalankan sekali.

Menghentikan atau melompati iterasi: break dan continue

Dua kata kunci ini sering dipakai bersama loop untuk kontrol yang lebih halus:

• break — langsung menghentikan loop sepenuhnya.
• continue — melompati sisa kode di iterasi saat ini dan lanjut ke iterasi berikutnya.

for (let i = 1; i <= 10; i++) {
  if (i === 5) break; // berhenti total saat i = 5
  console.log(i);
}
// Output: 1 2 3 4

for (let i = 1; i <= 5; i++) {
  if (i === 3) continue; // lewati angka 3
  console.log(i);
}
// Output: 1 2 4 5

Loop bersarang (nested loop)

Loop juga bisa diletakkan di dalam loop lain — biasa dipakai untuk memproses data dua dimensi, seperti tabel atau grid:

for (let baris = 1; baris <= 3; baris++) {
  for (let kolom = 1; kolom <= 3; kolom++) {
    console.log(`Baris ${baris}, Kolom ${kolom}`);
  }
}

Loop bagian dalam akan selesai sepenuhnya untuk setiap satu langkah loop bagian luar. Untuk grid 3x3 di atas, totalnya ada 9 baris output. Nested loop berguna, tapi hati-hati dengan performa — dua loop besar yang bersarang bisa membuat program jadi lambat kalau jumlah datanya banyak.

Loop modern: for...of dan for...in

Selain for klasik, JavaScript juga punya for...of untuk meng-iterasi nilai dalam array, dan for...in untuk meng-iterasi key/property dalam object:

const buah = ["apel", "jeruk", "mangga"];

for (const item of buah) {
  console.log(item);
}
// Output: apel, jeruk, mangga

for...of lebih ringkas dan lebih jarang menimbulkan bug dibanding for klasik saat hanya butuh nilai array satu per satu, sehingga banyak dipakai di kode JavaScript modern, termasuk saat bekerja dengan data dari function yang mengembalikan array.

Kapan pakai for, while, atau for...of?

Sebagai panduan singkat:

• Pakai for kalau jumlah perulangan sudah pasti (misalnya dari 0 sampai 10).
• Pakai while kalau perulangan bergantung pada kondisi yang belum tentu kapan berakhir.
• Pakai do...while kalau blok kode wajib dijalankan minimal sekali.
• Pakai for...of kalau kamu hanya butuh mengambil nilai-nilai dalam array, tanpa perlu mengelola index secara manual.

Memahami cara kerja loop adalah salah satu kemampuan dasar paling penting sebelum lanjut ke topik JavaScript yang lebih kompleks seperti array method (map, filter, reduce) atau bekerja dengan API. Konsep ini juga jadi salah satu materi inti kalau kamu ingin belajar JavaScript dari nol secara terstruktur.

Kalau kamu ingin berlatih langsung menulis loop dan melihat hasilnya secara interaktif, kamu bisa mulai belajar gratis di Ruangkode — lengkap dengan latihan kode di browser, XP, dan streak harian yang bikin proses belajar lebih konsisten. Atau lihat semua course untuk menemukan jalur belajar JavaScript yang sesuai levelmu.