Bab 07: Perulangan (Looping) dalam JavaScript
— Saatnya Komputer Bekerja Keras, Kamu Santai Saja —
Pernah nggak sih kamu pengin nyuruh komputer ngerjain sesuatu berulang-ulang tanpa harus ngetik kode yang sama seratus kali? Misalnya, cetak:
“Aku sayang JavaScript” sebanyak 100 kali.
Kalau manual, tangan bisa kram, mata bisa berkunang-kunang, dan kopi jadi dingin duluan.
Nah, untungnya ada fitur ajaib bernama loop JavaScript alias perulangan yang bikin komputer nurut buat ngulang tugas sesuai perintahmu. Di bab ini, kita bakal bahas semua jenis loop di JavaScript: for, while, do...while, plus trik-trik keren kayak break dan continue.
Artikel ini aku rancang biar kamu nggak cuma paham teorinya, tapi juga bisa langsung praktik dengan contoh yang jelas, dan bebas dari rasa bosan. Siapkan kopi, duduk santai, dan mari kita ajari komputer jadi pekerja keras.
Pengertian Perulangan dalam JavaScript
Apa itu loop?
Bayangkan kamu lagi nyuci piring. Kamu nggak mungkin bilang ke otak: “Gosok piring 1… gosok piring 2… gosok piring 3…” sampai piring ke-50. Otakmu pasti auto mode repeat: “Selama masih ada piring kotor, terus gosok!”
Nah, loop di JavaScript itu persis kayak gitu. Ini adalah struktur kontrol yang memungkinkan kode dieksekusi berulang-ulang selama kondisi tertentu terpenuhi.
Fungsi loop dalam program
Tanpa loop, kamu harus menulis baris kode yang sama berkali-kali capek, boros waktu, dan rawan typo. Dengan loop:
- Kode jadi lebih ringkas.
- Lebih mudah dimodifikasi.
- Performa aplikasi tetap stabil (asal nggak infinite loop.
Jenis-Jenis Loop di JavaScript
JavaScript menyediakan tiga jenis utama loop:
forwhiledo...while
Ketiganya punya cara kerja sedikit berbeda, tapi tujuannya sama: mengulang eksekusi blok kode. Pilih mana? Tergantung situasi dan selera. Kayak milih mie instan: ada rasa ayam bawang, soto, atau rendang — semuanya enak, tinggal sesuaikan mood!
Loop for dalam JavaScript
Struktur dasar for
for (inisialisasi; kondisi; increment/decrement) {
// kode yang diulang
}Contoh konkret:
for (let i = 1; i <= 5; i++) {
console.log(`Iterasi ke-${i}`);
}Output:
Iterasi ke-1
Iterasi ke-2
Iterasi ke-3
Iterasi ke-4
Iterasi ke-5Penjelasan:
let i = 1: mulai dari angka 1.i <= 5: lanjutkan selamaikurang dari atau sama dengan 5.i++: setiap iterasi, nilaiiditambah 1.
Penggunaan loop for
Sering dipakai saat kamu sudah tahu berapa kali perlu mengulang. Misalnya:
- Menampilkan daftar item dari array.
- Menghitung total nilai ujian dari 30 siswa.
- Membuat animasi frame-by-frame.
Contoh: Cetak angka genap dari 2 sampai 10:
for (let i = 2; i <= 10; i += 2) {
console.log(i);
}
// Output: 2, 4, 6, 8, 10Loop while dalam JavaScript
Cara kerja while
Loop while akan terus berjalan selama kondisi bernilai true. Bedanya dengan for: nggak ada bagian inisialisasi atau increment otomatis kamu harus atur sendiri.
Struktur:
while (kondisi) {
// kode yang diulang
// jangan lupa ubah variabel agar loop berhenti!
}Contoh:
let counter = 1;
while (counter <= 3) {
console.log(`While ke-${counter}`);
counter++; // penting! kalau nggak, infinite loop!
}Output:
While ke-1
While ke-2
While ke-3Ini Dia Perbedaan while dan for
| Aspek | for | while |
|---|---|---|
| Inisialisasi | Langsung di deklarasi loop | Harus di luar |
| Increment | Otomatis di bagian ketiga | Manual di dalam blok |
| Cocok untuk | Jumlah iterasi diketahui | Jumlah iterasi tidak pasti |
Misalnya, baca input pengguna sampai dia ketik “stop” pakai while.
Loop do while dalam JavaScript
Perbedaan while dan do...while
Loop do...while pasti dijalankan minimal sekali, meskipun kondisinya false sejak awal. Kenapa? Karena pengecekan kondisi dilakukan setelah blok kode dieksekusi.
Struktur:
do {
// kode yang diulang
} while (kondisi);Contoh:
let angka = 10;
do {
console.log("Ini pasti muncul, meski angka > 5!");
} while (angka < 5);Output:
Ini pasti muncul, meski angka > 5!Analoginya: Kamu masuk warung bakso dulu, baru nanya “Masih buka nggak?” — padahal jam 10 malam. Yang penting udah nyobain satu mangkok!
Menghentikan Loop dengan break
Fungsi break
Perintah break dipakai buat keluar dari loop secara paksa, meskipun kondisi loop belum selesai.
Penggunaan break dalam loop
Contoh: Cari angka 7 di antara 1–10, lalu berhenti:
for (let i = 1; i <= 10; i++) {
if (i === 7) {
console.log("Ketemu 7! Stop loop.");
break;
}
console.log(i);
}Output:
1
2
3
4
5
6
Ketemu 7! Stop loop.Hati-hati:
breakhanya keluar dari loop terdekat. Kalau ada loop bersarang, dia nggak akan keluar dari semua sekaligus.
Melewati Iterasi dengan continue
Fungsi continue
Kalau break menghentikan seluruh loop, continue cuma melewatkan satu iterasi, lalu lanjut ke iterasi berikutnya.
Perbedaan break dan continue
break= “Udahan, pulang!”continue= “Skip yang ini, lanjut ke berikutnya!”
Contoh: Cetak angka 1–10, tapi lewati angka genap:
for (let i = 1; i <= 10; i++) {
if (i % 2 === 0) {
continue; // skip genap
}
console.log(i); // hanya ganjil
}Output:
1
3
5
7
9Penggunaan Loop dalam Program Sederhana
Contoh perulangan
Program: Hitung jumlah bintang sesuai input
function cetakBintang(jumlah) {
let bintang = '';
for (let i = 0; i < jumlah; i++) {
bintang += '*';
}
return bintang;
}
console.log(cetakBintang(5)); // *****Program: Validasi password sampai benar
let passwordBenar = "rahasia123";
let input;
do {
input = prompt("Masukkan password:");
if (input !== passwordBenar) {
alert("Salah! Coba lagi.");
}
} while (input !== passwordBenar);
alert("Selamat! Password benar.");Kesalahan umum saat memakai loop
- Infinite loop: Lupa update variabel kondisi.
let x = 0;
while (x < 5) {
console.log(x); // x nggak pernah naik → loop selamanya!
}- Off-by-one error: Salah hitung batas (misal
<=vs<). - Lupa kurung kurawal: Kalau cuma satu baris, boleh dihilangkan — tapi jangan dibiasakan. Rawan bug!
- Modifikasi array saat looping: Bisa bikin elemen terlewat. Lebih aman pakai
for...ofatau salin array dulu.
Sekarang kamu udah resmi jadi master perulangan JavaScript. Loop itu kayak treadmill: selama kondisinya true, dia jalan terus tapi kamu yang pegang kendali. Bisa disuruh jalan, dihentikan, atau diskip sesuka hati.
Ingat:
Gunakan for kalau tahu jumlah ulang.
Pakai while kalau kondisi dinamis.do...while buat jamin minimal sekali jalan.break dan continue adalah senjata rahasia buat kontrol presisi.
Terus latihan, eksperimen, dan jangan takut salah. Toh, kalau infinite loop terjadi, tinggal pencet Ctrl + C atau tutup tab browser sambil pura-pura nggak kenal siapa-siapa.