Halo, selamat datang lagi di seri belajar JavaScript! Setelah di artikel sebelumnya kita sudah paham soal operator dan ekspresi, sekarang waktunya kita bahas sesuatu yang sangat fundamental dalam pemrograman: control flow atau kontrol alur.
Kontrol alur adalah cara kita “memberitahu” komputer untuk membuat keputusan dan mengulang sesuatu. Tanpa ini, program kita cuma bisa menjalankan baris kode secara berurutan dari atas ke bawah — bosan banget kan?
Yuk, kita mulai!
Kondisi: if, else if, else
Pernah nggak kamu mikir, “Kalau hujan, bawa payung. Kalau nggak, bawa kacamata.”? Itulah yang dilakukan if-else dalam JavaScript. Kita kasih kondisi, dan program memilih jalur mana yang dijalankan.
const hujan = true;
if (hujan) {
console.log("Bawa payung ya!");
} else {
console.log("Kacamata saja deh.");
}
Kalau kondisinya lebih dari satu, pakai else if:
const skor = 85;
if (skor >= 90) {
console.log("Sangat bagus!");
} else if (skor >= 75) {
console.log("Bagus, pertahankan!");
} else if (skor >= 50) {
console.log("Masih bisa diperbaiki.");
} else {
console.log("Yuk semangat belajar lagi!");
}
// Output: "Bagus, pertahankan!"
Kamu juga bisa menulis kondisi dalam satu baris (ternary operator), cocok untuk kondisi simpel:
const usia = 20;
const status = usia >= 18 ? "Dewasa" : "Anak-anak";
console.log(status); // "Dewasa"
Tapi jangan terlalu sering pakai ternary kalau kondisinya kompleks — nanti malah bikin kode susah dibaca.
Switch Statement
Kalau kamu punya banyak kondisi yang harus dicek terhadap satu nilai, switch bisa jadi pilihan yang lebih rapi dibanding bertumpuk if-else.
const hari = "Senin";
switch (hari) {
case "Senin":
console.log("Hari pertama kerja!");
break;
case "Selasa":
console.log("Masih semangat!");
break;
case "Rabu":
console.log("Midweek sudah.");
break;
case "Jumat":
console.log("Hore, hari Jumat!");
break;
default:
console.log("Hari biasa aja.");
}
// Output: "Hari pertama kerja!"
Yang perlu diperhatikan:
breaksangat penting! Tanpabreak, eksekusi akan “jatuh” ke case berikutnya (fall-through). Kadang ini disengaja, tapi biasanya ini bug.defaultopsional — berfungsi sebagai “else” kalau nggak ada case yang cocok.
// Fall-through yang disengaja
const bulan = 3;
switch (bulan) {
case 1: case 2: case 3:
console.log("Kuartal 1");
break;
case 4: case 5: case 6:
console.log("Kuartal 2");
break;
}
// Output: "Kuartal 1"
Case-nya dikumpulkan jadi satu karena nggak ada break di antara mereka. Ini trik yang berguna, tapi gunakan dengan bijak supaya kodenya tetap jelas.
Perulangan: for Loop
for loop adalah senjata paling klasik untuk mengulang sesuatu. Bentuk dasarnya:
for (let i = 0; i < 5; i++) {
console.log(`Iterasi ke-${i}`);
}
// Output:
// Iterasi ke-0
// Iterasi ke-1
// Iterasi ke-2
// Iterasi ke-3
// Iterasi ke-4
Mari kita bedah bagian for (let i = 0; i < 5; i++):
let i = 0— inisialisasi, dijalankan sekali di awal.i < 5— kondisi, dicek setiap iterasi. Kalautrue, loop jalan.i++— update, dijalankan setelah setiap iterasi.
for loop sangat fleksibel. Mau menghitung mundur? Bisa aja:
for (let i = 10; i >= 0; i--) {
console.log(i);
}
// 10, 9, 8, ..., 1, 0
Mau pakai step 2? Tinggal i += 2:
for (let i = 0; i <= 10; i += 2) {
console.log(i);
}
// 0, 2, 4, 6, 8, 10
Perulangan: while Loop
while loop lebih sederhana — dia cuma cek kondisi di awal setiap iterasi:
let hitung = 0;
while (hitung < 5) {
console.log(hitung);
hitung++;
}
// 0, 1, 2, 3, 4
while cocok digunakan kalau kamu nggak tahu pasti berapa kali loop harus jalan. Misalnya, membaca data dari pengguna sampai dia mengetik “quit”:
// Pseudocode — nggak bisa jalan di browser
let input = "";
while (input !== "quit") {
input = prompt("Ketik sesuatu (atau 'quit' untuk keluar):");
console.log(`Kamu mengetik: ${input}`);
}
Peringatan penting: pastikan ada kondisi yang pada akhirnya menjadi false. Kalau nggak, kamu bikin infinite loop yang bakal bikin browser freeze. Nggak enak, percaya deh.
do-while Loop
Bedanya sama while? do-while selalu menjalankan kode minimal sekali sebelum mengecek kondisi:
let angka = 10;
do {
console.log(angka);
angka--;
} while (angka > 0);
// 10, 9, 8, ..., 1
Bayangkan kamu mau memvalidasi input pengguna. do-while cocok banget:
// Pseudocode
let jawaban;
do {
jawaban = prompt("Masukkan angka antara 1-10:");
} while (jawaban < 1 || jawaban > 10);
console.log(`Angka yang benar: ${jawaban}`);
Ini memastikan prompt muncul setidaknya satu kali, meskipun dari awal jawabannya sudah valid.
for…of: Iterasi yang Elegan
JavaScript modern punya for...of yang dirancang untuk iterasi data yang bisa di-iterate (iterable) seperti array, string, Map, Set, dll.
const buah = ["apel", "mangga", "jeruk"];
for (const item of buah) {
console.log(item);
}
// apel
// mangga
// jeruk
Bandingkan dengan for biasa:
for (let i = 0; i < buah.length; i++) {
console.log(buah[i]);
}
for...of jauh lebih bersih dan mudah dibaca, apalagi untuk array. Nggak perlu lagi urusan indeks manual.
Kalau butuh indeksnya juga, pakai entries():
for (const [indeks, buah] of buah.entries()) {
console.log(`${indeks}: ${buah}`);
}
// 0: apel
// 1: mangga
// 2: jeruk
break dan continue
Dua kata kunci yang sering dipakai di dalam loop:
break
Keluar dari loop sepenuhnya saat kondisi tertentu terpenuhi:
for (let i = 0; i < 100; i++) {
if (i === 5) {
console.log("Ketemu 5, berhenti!");
break;
}
console.log(i);
}
// 0, 1, 2, 3, 4, "Ketemu 5, berhenti!"
continue
Skip sisa kode di iterasi saat ini, langsung ke iterasi berikutnya:
for (let i = 0; i < 10; i++) {
if (i % 2 === 0) {
continue; // skip angka genap
}
console.log(i);
}
// 1, 3, 5, 7, 9
continue sangat berguna untuk memfilter sesuatu di tengah loop tanpa harus membungkus semua logic di if yang tebal.
Tips dan Best Practice
- Hindari
vardi loop. Pakailetsupaya scope-nya terbatas di dalam loop.varpunya hoisting yang bisa bikin bug subtle.
// Jangan lakukan ini
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
}
// Output: 3, 3, 3 (semua = 3 karena var di-hoist)
// Lakukan ini
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
}
// Output: 0, 1, 2
-
Jangan lupa
breakdiswitch. Ini kesalahan paling umum yang pernah saya lihat di kode junior developer. -
Pilih struktur yang tepat. Iterasi array?
for...ofatau.forEach(). Iterasi object?for...in. Loop dengan kondisi kompleks?while. -
Hati-hati infinite loop. Selalu pastikan ada jalur keluar dari
whileloop kamu.
Ringkasan
| Konsep | Fungsi | Contoh |
|---|---|---|
if/else |
Keputusan | if (kondisi) { } |
switch |
Multiple kondisi | switch (nilai) { case ... } |
for |
Ulangi N kali | for (let i=0; i<5; i++) |
while |
Ulangi selama true | while (kondisi) { } |
do-while |
Ulangi minimal sekali | do { } while (kondisi) |
for...of |
Iterasi collection | for (let item of array) |
break |
Hentikan loop | break |
continue |
Skip iterasi | continue |
Kesimpulan
Control flow adalah fondasi dari setiap program. Dengan menguasai if-else, switch, for, while, do-while, for...of, break, dan continue, Anda sudah punya alat yang cukup untuk membuat program yang cerdas.
Di artikel selanjutnya, kita akan masuk ke Functions — cara mengorganisasi dan mendaur ulang kode.