While Loop JavaScript: while, do...while, break, continue

Saat kamu tidak tahu berapa kali harus mengulang

Loop for unggul saat kamu sudah tahu rentangnya sejak awal: "lakukan ini 10 kali," "telusuri setiap indeks array ini." Loop while untuk kasus sebaliknya: terus jalan sampai sesuatu berubah. Kamu tidak tahu berapa putaran yang dibutuhkan, hanya kondisi yang membuatmu berhenti.

Bentuknya minimal:

let count = 0;

while (count < 5) {
    console.log("count is", count);
    count++;
}

JavaScript mengevaluasi kondisi di dalam tanda kurung. Kalau truthy, bloknya dijalankan. Lalu ia mengecek kondisinya lagi, dan lagi, sampai menjadi falsy. Lupa count++, maka kondisinya tidak pernah berubah, dan selamat datang di infinite loop.

Cara memikirkannya: cek, jalankan, ulangi

Ada tiga hal yang harus benar supaya sebuah loop while masuk akal:

1. Ada sesuatu yang menjadi dasar kondisinya.
2. Ada cara bagi badan loop untuk mengubah sesuatu itu.
3. Pada akhirnya, kondisinya menjadi false.

Kalau satu saja hilang, kamu dalam masalah. Bug klasiknya adalah lupa langkah 2:

let count = 0;

while (count < 5) {
    console.log(count);
    // forgot to increment count - loops forever
}

Kode itu berjalan sampai kamu mematikan prosesnya. Kerusakannya nyata kalau terjadi di server. Selalu tanyakan pada dirimu: apa di dalam badan loop yang akan membuat kondisinya false?

Contoh nyata: titik berhenti yang tidak diketahui

Di sinilah while mengalahkan for. Kamu mengambil item dari suatu tempat dan tidak tahu jumlahnya sampai semuanya habis:

const queue = ["email", "sms", "push", "webhook"];

while (queue.length > 0) {
    const job = queue.shift();
    console.log("processing:", job);
}

console.log("queue empty");

shift() menghapus dan mengembalikan item pertama. Loop berjalan selama antrean masih berisi sesuatu, dan berhenti dengan sendirinya saat kosong. Kamu bisa menulis ini dengan loop for, tapi kamu akan melawan bentuk masalahnya: while terbaca persis seperti maksudnya.

do...while: jalankan dulu, tanya kemudian

do...while membalik urutannya: jalankan badannya, lalu cek kondisinya. Itu menjamin setidaknya satu putaran:

let input;

do {
    input = Math.floor(Math.random() * 10);
    console.log("got", input);
} while (input !== 7);

console.log("finally got a 7");

Badannya selalu berjalan sekali, bahkan kalau kondisinya false sejak awal. Bandingkan dengan while biasa, yang berarti nol putaran kalau kondisinya false.

Kasus sehari-harinya: meminta input dari pengguna, memvalidasi jawabannya, lalu meminta lagi kalau jawabannya buruk. Kamu selalu ingin bertanya setidaknya sekali, jadi do...while cocok.

Perhatikan titik koma setelah ) penutup: tidak seperti while dan for, do...while membutuhkannya.

break: keluar lebih awal

break langsung keluar dari loop terdekat. Inilah cara berhenti saat kondisi alami di header tidak benar-benar pas untuk tugasnya:

const numbers = [3, 7, 2, 9, 4, 11, 6];
let firstBigOne = null;

let i = 0;
while (i < numbers.length) {
    if (numbers[i] > 10) {
        firstBigOne = numbers[i];
        break;
    }
    i++;
}

console.log("found:", firstBigOne);

Begitu break dijalankan, tidak ada lagi yang dieksekusi di dalam loop: tidak sisa badannya, tidak juga pengecekan kondisi berikutnya. Kamu sudah keluar.

while (true) dengan break

Saat kondisi berhenti lebih mudah ditulis di dalam badan loop daripada di header, balik strukturnya: ulangi terus dan break keluar saat selesai.

let attempts = 0;

while (true) {
    attempts++;
    const roll = Math.floor(Math.random() * 6) + 1;

    if (roll === 6) {
        console.log(`rolled a 6 after ${attempts} tries`);
        break;
    }

    if (attempts >= 100) {
        console.log("giving up");
        break;
    }
}

Ada dua jalan keluar: berhasil, dan batas pengaman. Batas pengaman itu penting. while (true) tanpa jalur break yang pasti adalah infinite loop yang tinggal menunggu waktu.

continue: lompat ke putaran berikutnya

continue melompat ke pengecekan kondisi berikutnya, melewati sisa badan putaran saat ini:

let n = 0;

while (n < 10) {
    n++;
    if (n % 2 === 0) continue;
    console.log(n, "is odd");
}

Satu jebakan: kalau hal yang memajukan loop-mu berada setelah continue, kamu baru saja membuat infinite loop. Pada contoh di atas, n++ ada sebelum continue, jadi aman. Taruh sesudahnya, dan n akan terjebak di angka genap selamanya.

while vs for: mana yang dipakai

Patokan yang mekanis:

• Menghitung atau menelusuri indeks pada rentang yang diketahui → for. for (let i = 0; i < arr.length; i++) menyimpan persiapan counter, kondisi, dan langkahnya dalam satu baris.
• Menelusuri sebuah koleksi → for...of. Lebih rapi daripada mengelola indeks.
• Mengulang sampai suatu state berubah → while. Memproses antrean, polling, membaca stream, mencoba ulang sampai berhasil.
• Selalu dijalankan setidaknya sekali → do...while.

Secara teori semuanya bisa saling menggantikan: setiap for bisa ditulis ulang sebagai while, dan sebaliknya. Tapi memilih yang cocok dengan bentuk masalahnya membuat kode menjelaskan dirinya sendiri.

Infinite loop: satu aturannya

Setiap loop while butuh jawaban yang jelas untuk: apa yang membuat ini berhenti?

Entah kondisi di header pada akhirnya akan menjadi false, atau ada break yang pasti dijalankan. Kalau kamu tidak bisa menunjuk salah satunya, loop itu belum selesai.

// Bad: condition never changes
let ready = false;
while (!ready) {
    console.log("waiting...");
    // nothing in here flips `ready`
}

// Good: the body affects the condition
let ready = false;
let checks = 0;
while (!ready) {
    checks++;
    if (checks >= 3) ready = true;
}

Di browser, infinite loop membekukan tab. Di Node, ia membuat satu core CPU bekerja penuh sampai kamu mematikan prosesnya. Layak ditangkap sebelum sampai ke production.

Berikutnya: for...of dan for...in

while menangani kasus "sampai sesuatu berubah." Untuk menelusuri array, string, dan object satu item demi satu item, JavaScript punya dua bentuk loop lagi yang dirancang persis untuk itu, yaitu for...of dan for...in, yang dibahas berikutnya.