Belajar dengan membaca secara berurutan

Perulangan Berdasarkan Kondisi — while, do...while, break, dan continue

Pelajari while dan do...while di JavaScript: loop yang jumlah putarannya tidak pasti, cara menghindari infinite loop, dan kapan memakai continue atau break.

Memindahkan orang dari daftar tunggu setiap kali ada slot reservasi yang kosong, atau terus membeli barang selama saldonya masih cukup — untuk proses seperti ini, kamu tahu kapan harus berhenti, tapi tidak bisa menghitung dari awal berapa kali harus mengulang.

Artikel ini membahas while dan do...while yang mengulang berdasarkan kondisi, continue untuk melewati satu putaran, dan break untuk keluar dari loop.

Mengulang Tanpa Jumlah Tetap — while dan Update Kondisi

Misalnya ada beberapa kursi yang kosong, dan kamu ingin memindahkan orang dari urutan terdepan daftar tunggu secara berurutan. Setiap orang yang dipindahkan memakai satu kursi, dan prosesnya berhenti begitu kursi kosong tinggal 0. Yang menghentikan loop adalah sebuah keadaan — "selama masih ada kursi kosong" — bukan jumlah putaran, jadi for yang mengulang sambil menghitung tidak cocok untuk menuliskannya.

Loop while (statement yang mengulang body di dalam kurung kurawal selama kondisi di dalam tanda kurung bernilai true) hanya berisi kondisi di dalam tanda kurungnya. Kondisi dicek di setiap putaran, sebelum masuk ke body.

Value awal kamu siapkan sendiri sebelum loop, dan variabel yang dicek kondisi kamu update sendiri di dalam body.

const waitingList = ["Budi", "Siti", "Andi"];   // daftar tunggu
let openSeats = 2;                              // kursi kosong

// Pindahkan orang hanya selama masih ada kursi kosong
while (openSeats > 0) {
  const name = waitingList.shift();
  openSeats--;   // sama dengan openSeats = openSeats - 1
  console.log(`${name} dapat kursi (sisa kursi: ${openSeats})`);
}
// Budi dapat kursi (sisa kursi: 1)
// Siti dapat kursi (sisa kursi: 0)

console.log(`Masih menunggu: ${waitingList.length}`);   // Masih menunggu: 1
Loop while yang Berhenti vs. yang Tidak Berhenti
KondisiopenSeats > 0Body memberikursi ke 1 orangopenSeats--di-updateSaat 0, kondisijadi falseKondisiopenSeats > 0Body memberikursi ke 1 orangTanpa updateTetap 2,tidak berhenti
Kalau body mengurangi variabel yang dicek kondisi, suatu saat kondisinya menjadi false dan loop berhenti. Kalau tidak dikurangi, hasil pengecekannya selalu sama dan body terus dijalankan.

Di loop for, expression update punya tempat yang sudah pasti di dalam tanda kurung, tapi di while kamu sendiri yang menentukan di bagian mana dari body update itu ditulis. Akibatnya, tidak ada yang mencegahmu lupa menulisnya: tanpa update pun, kodenya tetap valid secara sintaks.

Lupa Update, Loop Tidak Akan Berhenti

Kalau kondisinya tidak pernah menjadi false, body diulang tanpa akhir. Kalau kamu lupa menulis openSeats--, jumlah kursi tetap 2, jadi hasil pengecekannya selalu sama. Console akan menampilkan timeout setelah 15 detik, tapi loop-nya tidak berhenti, dan latihan lain juga tidak akan jalan sampai kamu me-reload halaman. Selalu ubah variabel yang dicek kondisi di suatu tempat di dalam body.

Pakai saldo poin untuk membeli barang yang sama sebanyak mungkin. balance dan unitPrice sudah dideklarasikan.

① Siapkan variabel dengan value awal 0 untuk menghitung jumlah barang yang dibeli.

② Tulis kondisi loop supaya perulangan hanya berjalan selama saldo masih cukup untuk satu barang lagi.

③ Di setiap putaran, kurangi saldo, tambah hitungannya, lalu tampilkan "Item ke-◯ (sisa poin: ◯)".

④ Setelah loop, tampilkan jumlah barang yang dibeli dan sisa poin dalam satu baris.

(Kalau berjalan dengan benar, penjelasan akan muncul.)

JavaScript / TypeScript Editor

Jalankan kode untuk melihat output

Jalankan Sekali Dulu — Urutan Pengecekan di do...while

Saat notifikasi gagal dikirim, kamu mengirim ulang beberapa kali sampai berhasil. Kamu harus mengirim minimal sekali dulu sebelum ada hasil yang bisa dicek, tapi while mengecek kondisinya sebelum masuk ke body, jadi tergantung value awal variabel di kondisi, loop bisa berhenti tanpa mengirim apa pun.

Loop do...while (statement yang menjalankan body sekali lalu mengecek kondisinya) ditulis sebagai do { body } while (kondisi);, dan semuanya sampai titik koma terakhir adalah satu statement. Karena pengecekan dilakukan setelah body, body tetap dijalankan sekali walaupun kondisinya sudah false sejak awal.

const attempts = [false, false, true];   // hasil pengiriman yang disiapkan lebih dulu (true berarti berhasil)
let sent = true;                         // masih bernilai true dari notifikasi sebelumnya
let tried = 0;

// while mengecek dulu, jadi berhenti tanpa mengirim sekali pun
while (!sent && tried < attempts.length) {
  sent = attempts[tried];
  tried++;
}
console.log(`Jumlah kirim dengan while: ${tried}`);   // Jumlah kirim dengan while: 0

// do...while mengirim sekali sebelum mengecek, lalu memakai hasilnya untuk memutuskan lanjut atau tidak
do {
  sent = attempts[tried];
  tried++;
  console.log(`Percobaan ke-${tried}: ${sent ? "berhasil" : "gagal"}`);
} while (!sent && tried < attempts.length);
// Percobaan ke-1: gagal / Percobaan ke-2: gagal / Percobaan ke-3: berhasil
Perbedaan Awal while dan do...while
Mulai dengansent = trueCek dulu,!true itu falseTidak masukke bodyTerkirim 0 kaliMulai dengansent = trueBody dulu,kirim percobaan 1Hasilnya false,!false lanjutBerhenti saatberhasil di ke-3
Kedua loop dimulai dengan sent yang masih true. while langsung berhenti setelah pengecekan, sedangkan do...while mengirim sekali dulu, baru memutuskan lanjut atau tidak.

Hanya putaran pertama yang dijalankan tanpa pengecekan; setelah itu, loop hanya mengulang selama kondisinya true, sama seperti while. Kalau body tidak boleh dijalankan sama sekali saat kondisinya false, pilih while. Kalau body harus dijalankan sekali sebelum kamu melihat hasilnya, pilih do...while.

Berikan nomor reservasi terkecil yang belum dipakai untuk reservasi ruang rapat. Array usedNumbers yang berisi nomor yang sudah terpakai sudah dideklarasikan.

① Siapkan variabel dengan value awal 0 untuk menyimpan nomor yang akan diberikan.

② Dengan loop yang menjalankan body sebelum mengecek kondisi, tambah nomornya 1 lalu tampilkan "Mengecek nomor ◯".

③ Tulis kondisi supaya perulangan terus berjalan selama nomornya ada di array nomor yang sudah terpakai.

④ Setelah loop, tampilkan "Nomor reservasi: ◯".

JavaScript / TypeScript Editor

Jalankan kode untuk melihat output

Melewati Satu Putaran Saja — Kapan Memakai continue

Saat memproses daftar pengiriman dari atas, kamu ingin melewati baris yang stoknya habis dan lanjut ke baris berikutnya. Makin banyak kondisi yang ingin dilewati, makin dalam if yang bersarang, dan kode pengiriman yang sebenarnya jadi terkubur di dalamnya.

Dengan continue (statement yang melewati sisa putaran saat ini lalu lanjut ke putaran berikutnya), kamu bisa menghentikan satu putaran lebih awal begitu kondisi yang ingin dilewati terpenuhi. Loop-nya sendiri tetap berjalan, jadi putaran berikutnya dimulai seperti biasa dari pengecekan kondisi.

const names = ["Planner A5", "Lampu meja", "USB hub"];
const stocks = [12, 0, 5];   // 0 berarti stok habis
let index = 0;

while (index < names.length) {
  const name = names[index];
  const stock = stocks[index];
  index++;   // majukan dulu supaya tidak terlewat oleh continue

  // Untuk baris yang stoknya habis, lewati sisa putaran ini dan lanjut ke putaran berikutnya
  if (stock === 0) {
    console.log(`${name}: stok habis, dilewati`);
    continue;
  }
  console.log(`${name}: kirim ${stock} unit`);
}
// Planner A5: kirim 12 unit
// Lampu meja: stok habis, dilewati
// USB hub: kirim 5 unit
Baris yang diprosesValue stock dan pengecekannyaHasil putaran itu
Baris 1: Planner A5stock bernilai 12, bukan 0Menampilkan kirim 12 unit
Baris 2: Lampu mejastock bernilai 0, jadi continueBaris pengiriman tidak dijalankan
Baris 3: USB hubstock bernilai 5, bukan 0Menampilkan kirim 5 unit

continue hanya melewati baris-baris antara posisinya dan akhir body. continue juga bisa dipakai di body for dan for...of, dan karena expression update di tanda kurung loop for berada di luar body, update itu tetap dijalankan di putaran yang terkena continue.

continue Juga Melewati Baris Update

Kalau index++ kamu taruh setelah continue, index tidak bertambah di putaran yang dilewati. Putaran berikutnya membaca baris yang sama lagi, stock tetap 0, kondisinya tidak berubah, dan loop tidak akan berhenti. Update variabel yang dicek kondisi sebelum continue.

Hitung rata-rata skor ulasan tanpa menyertakan value yang tidak bisa dihitung. Array scores sudah dideklarasikan.

① Siapkan variabel dengan value awal 0 untuk total dan jumlah ulasan.

② Pakai for...of untuk menelusuri skor satu per satu.

③ Untuk 0 (belum dinilai) dan value yang lebih besar dari 5, tampilkan "◯ tidak dihitung", lalu lewati sisa putaran itu.

④ Tambahkan skor sisanya ke total dan jumlah ulasan, lalu setelah loop tampilkan "Rata-rata: ◯.◯ (◯ ulasan)".

JavaScript / TypeScript Editor

Jalankan kode untuk melihat output

Berhenti Begitu Ketemu — Ke Mana break Membawamu

Misalnya kamu ingin menelusuri log dari atas dan hanya mencari error pertama. Kalau kamu terus membaca sampai akhir setelah menemukannya, itu pekerjaan yang sia-sia, dan tergantung cara menulisnya, error yang muncul belakangan bisa menimpa firstError.

Dengan break (statement yang langsung menghentikan loop tempatnya berada), kamu bisa keluar dari loop di putaran saat kondisinya terpenuhi. Ini statement yang sama dengan yang kamu pakai untuk keluar dari switch di artikel tentang percabangan. Value yang ditemukan akan dipakai di luar loop, jadi deklarasikan firstError sebelum loop.

const logs = ["INFO Aplikasi dimulai", "WARN Respons lambat", "ERROR Pembayaran gagal", "ERROR Kirim ulang gagal"];
let index = 0;
let firstError = "";

while (index < logs.length) {
  const line = logs[index];
  index++;
  if (line.startsWith("ERROR")) {
    firstError = line;
    break;   // yang pertama sudah ketemu, jadi sisanya tidak perlu dicek
  }
}

console.log(`Error pertama: ${firstError}`);   // Error pertama: ERROR Pembayaran gagal
console.log(`Baris yang dicek: ${index}`);     // Baris yang dicek: 3
Kurung Kurawal yang Ditinggalkan break
Kurung kurawal while (cek log baris per baris)
  • const line = logs[index] — baris yang dicek di putaran ini
  • Setelah break, eksekusi keluar dari kurung kurawal dan lanjut ke baris console.log berikutnya
Kurung kurawal if (hanya baris yang diawali ERROR)
  • firstError = line — menyimpan baris yang ditemukan
  • break — keluar dari while di luarnya, bukan dari kurung kurawal ini
  • Baris apa pun di bawah break tidak pernah dijalankan
Baris body di bawah break maupun putaran yang tersisa tidak dijalankan. Eksekusi lanjut di baris setelah kurung kurawal penutup loop while.

Di putaran yang terkena break pun, index++ yang ditulis sebelumnya sudah dijalankan. Jadi index berhenti di 3, dan "Baris yang dicek: 3" yang tampil setelah loop sama dengan posisi baris yang ditemukan, dihitung dari 1.

Perbedaan Arah continue dan break
continue saatstock === 0Cek index < 3lagiLanjut ke putaranUSB hubTampilkankirim 5 unitbreak di barisERROR pertamaTidak mengecekindex < 4ERROR di baris 4tidak dibacaLanjut ke barisconsole.log
Keduanya tidak menjalankan sisa baris di putaran itu. continue kembali ke pengecekan kondisi; break keluar dari loop tanpa mengecek.

Alokasikan stok ke pesanan sesuai urutan masuknya, lalu berhenti di pesanan pertama yang stoknya tidak cukup. orderQuantities (jumlah per pesanan) dan stock (jumlah stok) sudah dideklarasikan.

① Pakai for...of untuk menelusuri jumlah setiap pesanan satu per satu.

② Di putaran saat jumlah pesanan lebih besar dari stok, tampilkan "Stok tidak cukup untuk pesanan ◯ unit" lalu hentikan loop.

③ Di putaran saat stoknya cukup, kurangi stok lalu tampilkan "Dialokasikan ◯ unit (sisa ◯)".

④ Setelah loop, tampilkan "Sisa stok: ◯".

JavaScript / TypeScript Editor

Jalankan kode untuk melihat output
QUIZ

Cek Pemahaman

Jawab setiap pertanyaan satu per satu.

Soal 1Kalau while dimulai dengan kondisi yang true dan body tidak pernah mengubah variabel yang dicek kondisi, apa yang terjadi?

Soal 2Kalau kondisinya sudah false sejak awal, berapa kali body do...while dijalankan?

Soal 3Apa yang terjadi selanjutnya saat continue dijalankan di dalam loop?