Masukkan Password
30 Loop JavaScript: Do-While
Lecture ini membahas do...while loop, dan sebenarnya konsepnya sangat dekat dengan while yang baru kita pelajari.
Perbedaan paling pentingnya cuma satu:
whilemengecek kondisi dulu, baru menjalankan kode.do...whilemenjalankan kode dulu, baru mengecek kondisi.
Perbedaan kecil ini punya konsekuensi yang cukup penting.
1. Mengingat kembali while
Di lecture sebelumnya kita belajar:
let i = 1;
while (i <= 10) {
console.log(i);
i++;
}
Cara berpikirnya:
CEK KONDISI
↓
true?
↓ ↓
YA TIDAK
↓ ↓
JALANKAN STOP
KODE
↓
UBAH i
↓
CEK LAGI
Jadi kondisi diperiksa sebelum body dijalankan.
Contohnya:
let i = 11;
while (i <= 10) {
console.log(i);
i++;
}
Kondisi pertama:
11 <= 10
hasilnya:
false
Maka body tidak dijalankan sama sekali.
Output:
tidak ada output
2. Sekarang masuk ke do...while
Syntax-nya:
do {
// kode yang ingin dijalankan
} while (condition);
Perhatikan urutannya.
Pada while:
while (condition) {
// kode
}
Pada do...while:
do {
// kode
} while (condition);
Kelihatannya hanya dibalik, tetapi ini menghasilkan perbedaan yang sangat penting.
3. Cara membaca do...while
Misalnya:
let i = 1;
do {
console.log(i);
i++;
} while (i <= 10);
Bacalah seperti ini:
“Lakukan kode ini terlebih dahulu. Setelah selesai, cek apakah
i <= 10. Kalau masih benar, lakukan lagi.”
Jadi urutannya:
JALANKAN BODY
↓
UBAH NILAI
↓
CEK KONDISI
↓
true?
↓ ↓
YA TIDAK
↓ ↓
ULANGI STOP
4. Perbedaan Utama while vs do...while
Ini adalah inti lecture.
while
while (condition) {
// body
}
Urutannya:
condition
↓
body
do...while
do {
// body
} while (condition);
Urutannya:
body
↓
condition
Jadi:
while | do...while |
|---|---|
| Kondisi dicek dulu | Body dijalankan dulu |
| Body bisa dijalankan 0 kali | Body minimal 1 kali |
| Cocok kalau harus memenuhi kondisi sejak awal | Cocok kalau proses harus terjadi minimal sekali |
5. Contoh yang Paling Mudah
Lihat contoh ini:
let i = 11;
while (i <= 10) {
console.log(i);
}
Kondisi:
11 <= 10
false.
Maka:
while body tidak dijalankan
Sekarang:
let i = 11;
do {
console.log(i);
} while (i <= 10);
Apa yang terjadi?
JavaScript masuk ke:
do {
console.log(i);
}
langsung menjalankannya.
Output:
11
Baru setelah itu JavaScript mengecek:
11 <= 10
false.
Maka berhenti.
Jadi meskipun kondisi dari awal false, angka 11 tetap dicetak satu kali.
6. Inilah Konsep “Minimal Sekali”
Ini adalah kalimat paling penting dari lecture:
do...whileakan menjalankan body setidaknya satu kali.
Bahkan kalau kondisi langsung false.
Contoh:
let i = 100;
do {
console.log("Hello");
} while (i < 10);
Kondisinya:
100 < 10
false.
Tetapi output tetap:
Hello
Karena JavaScript melakukan:
1. Jalankan do body
2. Baru cek condition
3. Condition false
4. Stop
7. Analogi Sederhana
Bayangkan ada dua orang.
while
Orang pertama berkata:
“Sebelum masuk, saya cek dulu apakah toko buka.”
Kalau toko tutup:
Cek → tutup → tidak masuk
Jadi bisa 0 kali masuk.
do...while
Orang kedua berkata:
“Saya masuk dulu, setelah itu baru cek apakah toko buka.”
Jadi walaupun ternyata toko tutup:
Masuk → cek → tutup → berhenti
Dia tetap sudah masuk minimal sekali.
Itulah perbedaan while dan do...while.
8. Contoh Menghitung 1 sampai 10
Kode:
let i = 1;
do {
console.log("Value of I is " + i);
i++;
} while (i <= 10);
Mari kita jalankan.
Awalnya:
i = 1
Iterasi pertama
Jalankan body:
Value of I is 1
Kemudian:
i++;
sehingga:
i = 2
Baru cek:
2 <= 10
true.
Iterasi kedua
Print:
Value of I is 2
Kemudian:
i = 3
Cek:
3 <= 10
true.
Begitu seterusnya.
Saat i = 10:
Value of I is 10
Kemudian:
i = 11
Cek:
11 <= 10
false.
Stop.
Output:
1
2
3
4
5
6
7
8
9
10
9. Kenapa i++ Tetap Penting?
Sama seperti while, kita harus mengubah variable yang digunakan dalam kondisi.
Contoh buruk:
let i = 1;
do {
console.log(i);
} while (i <= 10);
Apa masalahnya?
i selalu:
1
Kondisi:
1 <= 10
selalu:
true
Akibatnya:
1
1
1
1
1
1
...
Infinite loop.
Jadi tetap perlu:
i++;
atau:
i--;
tergantung tujuan loop.
10. Tiga Langkah Membuat do...while
Lecture memberikan pola yang hampir sama dengan while.
Step 1 — Buat variable dan nilai awal
Misalnya:
let i = 1;
Step 2 — Di dalam body, ubah variable
do {
console.log(i);
i++;
}
Karena body dijalankan terlebih dahulu, kita perlu memastikan variable berubah agar loop akhirnya berhenti.
Step 3 — Tentukan kondisi
while (i <= 10);
Jadi lengkapnya:
let i = 1;
do {
console.log(i);
i++;
} while (i <= 10);
Pola sederhananya:
NILAI AWAL
↓
JALANKAN BODY
↓
UBAH NILAI
↓
CEK KONDISI
↓
true?
↓ ↓
YA TIDAK
↓ ↓
ULANGI STOP
11. do...while untuk Array
Seperti while, do...while juga bisa digunakan untuk melakukan looping terhadap array.
Misalnya:
let users = ["John", "Steve", "Mary", "Mark"];
Index:
0 → John
1 → Steve
2 → Mary
3 → Mark
Kita bisa menulis:
let index = 0;
do {
console.log(users[index]);
index++;
} while (index < users.length);
Output:
John
Steve
Mary
Mark
12. Mari Bedah Loop Array-nya
Array:
let users = ["John", "Steve", "Mary", "Mark"];
Panjangnya:
users.length
adalah:
4
Kita mulai:
let index = 0;
Iterasi pertama
Karena do...while, body langsung dijalankan.
console.log(users[index]);
berarti:
console.log(users[0]);
Output:
John
Kemudian:
index++;
menjadi:
index = 1
Baru kondisi diperiksa:
index < users.length
atau:
1 < 4
true.
Maka body dijalankan lagi.
Iterasi berikutnya
index = 1
Ambil:
users[1]
Output:
Steve
Kemudian:
index = 2
Cek:
2 < 4
true.
Lanjut.
Sampai terakhir
index = 3
Ambil:
users[3]
Output:
Mark
Kemudian:
index = 4
Cek:
4 < 4
false.
Loop berhenti.
13. Tapi Ada Perbedaan Penting Saat Array Kosong
Ini justru contoh bagus untuk memahami perbedaan while dan do...while.
Misalnya:
let users = [];
let index = 0;
users.length:
0
Dengan while
while (index < users.length) {
console.log(users[index]);
index++;
}
Kondisi:
0 < 0
false.
Jadi tidak ada output.
Dengan do...while
do {
console.log(users[index]);
index++;
} while (index < users.length);
Body dijalankan terlebih dahulu.
JavaScript mencoba:
users[0]
Karena array kosong, hasilnya:
undefined
Jadi do...while tetap melakukan satu iterasi.
Ini menunjukkan kenapa kita harus berhati-hati memilih do...while.
Kalau kita tidak ingin body dijalankan ketika kondisi awal salah, gunakan while.
14. Kapan Sebaiknya Menggunakan do...while?
Lecture memberikan aturan yang bagus:
Gunakan
do...whileketika kamu memang ingin body loop dijalankan minimal satu kali, terlepas dari kondisi awal.
Contoh klasik adalah meminta input user.
Misalnya kita ingin meminta user memasukkan password setidaknya sekali.
Secara konsep:
let password;
do {
password = prompt("Masukkan password");
} while (password !== "12345");
Alurnya:
Minta password
↓
Periksa password
↓
Benar?
↓ ↓
YA SALAH
↓ ↓
STOP Minta lagi
Kita memang ingin:
“Tanyakan minimal sekali.”
Maka do...while masuk akal.
15. Contoh Lain: Menu Program
Misalnya sebuah program memiliki menu:
1. Lihat data
2. Tambah data
3. Hapus data
4. Keluar
Kita ingin menu ditampilkan minimal sekali.
Secara konsep:
let choice;
do {
// tampilkan menu
// ambil pilihan user
} while (choice !== 4);
Kenapa do...while cocok?
Karena tidak masuk akal program bertanya:
“Apakah user memilih 4?”
sebelum program pernah menampilkan menu.
Jadi:
Tampilkan menu dulu
↓
User pilih
↓
Cek apakah keluar
↓
Belum?
↓
Tampilkan menu lagi
16. while Lebih Sering Dipakai
Lecture juga menyebut:
Biasanya
whilelebih sering digunakan.
Kenapa?
Karena banyak situasi memang kita ingin:
“Kalau kondisi awal tidak memenuhi, jangan jalankan sama sekali.”
Contoh looping array:
let index = 0;
while (index < users.length) {
console.log(users[index]);
index++;
}
Ini sangat natural.
Kalau array kosong:
[]
kita memang tidak ingin melakukan apa-apa.
Maka while cocok.
17. Perbandingan Lengkap
while | do...while | |
|---|---|---|
| Kondisi dicek | Sebelum body | Setelah body |
| Body minimal berjalan | 0 kali | 1 kali |
| Body bisa tidak dijalankan? | Ya | Tidak |
| Cocok untuk | Kondisi harus benar sejak awal | Proses harus terjadi minimal sekali |
| Syntax | while (...) {} | do {} while (...); |
Contoh:
while
let i = 10;
while (i < 5) {
console.log(i);
}
Output:
tidak ada
do...while
let i = 10;
do {
console.log(i);
} while (i < 5);
Output:
10
Itulah perbedaan utamanya.
18. Cara Mengingatnya
Saya sarankan jangan menghafalkan syntax saja.
Ingat urutan eksekusinya.
while
WHILE
↓
"Apakah boleh?"
↓
YA → kerjakan
Jadi:
Tanya dulu, kerja kemudian.
do...while
DO
↓
"Kerjakan dulu"
↓
WHILE
↓
"Masih boleh lanjut?"
Jadi:
Kerja dulu, tanya kemudian.
Ini cara paling gampang membedakan keduanya.
19. Hubungannya dengan if
Sebenarnya while bisa kamu bayangkan seperti:
if (condition) {
// jalankan
}
tetapi while akan kembali mengecek kondisi setelah selesai.
Misalnya:
while (i <= 10) {
console.log(i);
i++;
}
secara konsep:
CEK
↓
if true → jalankan
↓
kembali CEK
↓
if true → jalankan
↓
kembali CEK
...
↓
false → selesai
Sedangkan do...while:
JALANKAN
↓
CEK
↓
true → jalankan lagi
↓
CEK
↓
true → jalankan lagi
...
↓
false → selesai
20. Kesalahan yang Sering Terjadi
❌ Lupa mengubah variable
let i = 1;
do {
console.log(i);
} while (i <= 10);
→ Infinite loop.
❌ Salah arah
Kalau:
let i = 10;
do {
console.log(i);
i++;
} while (i >= 1);
Maka:
10 → 11 → 12 → 13 → ...
Kondisi:
i >= 1
terus true.
Seharusnya kalau ingin menghitung mundur:
let i = 10;
do {
console.log(i);
i--;
} while (i >= 1);
❌ Lupa bahwa do...while selalu berjalan sekali
Misalnya:
let i = 100;
do {
console.log(i);
} while (i < 10);
Jangan berpikir:
“100 < 10 false, jadi tidak ada output.”
Salah.
Output:
100
Karena body dijalankan sebelum kondisi dicek.
21. Satu Detail Syntax yang Perlu Kamu Perhatikan
Pada do...while, biasanya ada ; setelah kondisi:
do {
console.log("Hello");
} while (condition);
Perhatikan:
↓
} while (condition);
Ada semicolon setelah ).
Ini berbeda dari bentuk:
while (condition) {
...
}
yang tidak membutuhkan semicolon setelah }.
22. Cheat Sheet
while
let i = 1;
while (i <= 10) {
console.log(i);
i++;
}
Urutan:
condition
↓
body
↓
update
↓
condition
do...while
let i = 1;
do {
console.log(i);
i++;
} while (i <= 10);
Urutan:
body
↓
update
↓
condition
↓
body
↓
update
↓
condition
...
🧠 Kesimpulan Lecture
Ada 3 hal utama yang harus kamu bawa dari lecture ini.
1. do...while adalah loop yang mengecek kondisi di akhir
do {
// body
} while (condition);
2. Body do...while selalu dijalankan minimal satu kali
Bahkan:
let i = 100;
do {
console.log(i);
} while (i < 10);
tetap menghasilkan:
100
karena body dijalankan dulu.
3. Perbedaan while dan do...while
Ingat kalimat ini:
while= cek dulu, jalankan kemudian.do...while= jalankan dulu, cek kemudian.
Atau versi super singkat:
while:
CEK → KERJA → CEK → KERJA → ...
do...while:
KERJA → CEK → KERJA → CEK → ...
Dan inilah konsekuensinya:
while → bisa 0 kali
do...while → minimal 1 kali
Kalau nanti masuk ke for loop, kamu akan melihat pola yang sebenarnya sudah kamu kenal: nilai awal → kondisi → update → pengulangan. Bedanya, for menyatukan bagian-bagian tersebut ke dalam satu syntax yang lebih ringkas.