📘 Seri Belajar JavaScript Artikel 3 dari 14 🟢 Beginner

Kontrol Alur Program:
if, else, switch, dan
Perulangan Loop

Kuasai percabangan dan perulangan JavaScript — dua senjata utama yang bikin programmu bisa "berpikir" dan "mengulang" tanpa kamu harus nulis kode berkali-kali.

⏱️

Estimasi Baca

12 Menit

🎯

Level

Pemula

📅

Tahun

2026

Pernah nggak kamu kepikiran, gimana caranya sebuah aplikasi tahu bahwa kamu salah masukin password? Atau gimana Instagram bisa nampilin 100 postingan sekaligus tanpa harus ditulis satu-satu sama programmernya? Jawabannya ada di dua konsep ajaib yang bakal kamu pelajari hari ini: percabangan dan perulangan JavaScript.

Kalau di artikel sebelumnya kamu sudah kenalan sama variabel dan tipe data, sekarang saatnya kita kasih "otak" ke kode kamu. Dengan if, else, switch, dan berbagai jenis loop, programmu bisa bikin keputusan dan mengulang aksi — persis kayak manusia. Artikel ini bagian dari Seri Belajar JavaScript from Zero to Zorro, jadi santai aja, kita bahas pelan-pelan tapi tuntas!

📌 Konsep Inti

"Kontrol alur program adalah cara JavaScript memutuskan apa yang harus dilakukan selanjutnya — berbelok ke kiri, kanan, atau jalan terus."

Tanpa kontrol alur, semua baris kode dieksekusi dari atas ke bawah secara berurutan — tanpa bisa memilih, tanpa bisa mengulang. Membosankan, kan?

🔀 Percabangan JavaScript: if, else if, dan else

Bayangkan kamu lagi di pertigaan jalan. Ada papan petunjuk: "Kalau mau ke pantai, belok kanan. Kalau mau ke gunung, belok kiri. Kalau nggak jelas, lurus aja." Nah, itulah cara kerja percabangan JavaScript dengan if, else if, dan else.

Langkah-langkah menulis if-else:

Tentukan kondisi yang ingin diperiksa

Kondisi harus menghasilkan nilai true atau false. Biasanya pakai operator perbandingan seperti >, <, ===.

Tulis blok kode untuk setiap kondisi

Apa yang harus terjadi kalau kondisinya benar? Dan apa yang terjadi kalau salah? Taruh masing-masing di blok { }.

Tambahkan else if untuk kondisi tambahan

Kalau ada lebih dari dua kemungkinan, gunakan else if di antaranya. Boleh sebanyak yang kamu butuhkan!

📄 contoh-if-else.js JavaScript

let nilai = 75;

if (nilai >= 90) {
  console.log("🏆 Luar biasa! Kamu dapat A!");
} else if (nilai >= 75) {
  console.log("👍 Bagus! Kamu dapat B.");
} else if (nilai >= 60) {
  console.log("😐 Cukup. Kamu dapat C.");
} else {
  console.log("😟 Perlu belajar lebih keras. Di bawah C.");
}

// Output: 👍 Bagus! Kamu dapat B.

💡 Tips: Gunakan === bukan ==

Di JavaScript, == membandingkan nilai tapi mengabaikan tipe data. Sedangkan === membandingkan nilai dan tipe datanya sekaligus. Biasakan pakai === agar kode kamu lebih aman dan mudah diprediksi!

🎛️ Switch: Ketika Pilihannya Banyak Banget

Coba bayangkan kamu bikin menu restoran. Kalau pelanggan pesan nomor 1, kasih nasi goreng. Nomor 2, kasih mie ayam. Nomor 3, kasih soto. Dan seterusnya sampai nomor 20. Kalau kamu pakai if-else if terus-terusan, kodenya akan jadi sangat panjang dan ruwet. Di sinilah switch jadi penyelamat!

Switch cocok digunakan ketika kamu punya satu variabel yang perlu dibandingkan dengan banyak nilai spesifik. Ia bekerja dengan mencocokkan nilai, lalu loncat ke case yang sesuai.

📄 contoh-switch.js JavaScript

let hari = "Senin";

switch (hari) {
  case "Senin":
    console.log("😫 Hari paling berat seminggu...");
    break;
  case "Jumat":
    console.log("🎉 TGIF! Hampir weekend!");
    break;
  case "Sabtu":
  case "Minggu":
    console.log("😎 WEEKEND! Waktunya rebahan.");
    break;
  default:
    console.log("📅 Hari biasa, tetap semangat!");
}

// Output: 😫 Hari paling berat seminggu...

⚠️ Jangan Lupa break!

Tanpa break, JavaScript akan terus mengeksekusi case berikutnya meski kondisinya sudah tidak cocok — fenomena ini disebut "fall-through". Selalu tambahkan break di setiap case, kecuali kamu memang sengaja ingin fall-through seperti pada contoh Sabtu & Minggu di atas.

📊 Kapan Pakai if-else vs switch?

Kriteria	if-else	switch
Jenis perbandingan	Ekspresi kompleks (>, <, &&)	Nilai spesifik (===)
Jumlah pilihan	Sedikit (2–4)	Banyak (5+)
Keterbacaan kode	✅ Fleksibel	✅ Rapi untuk banyak case
Range nilai (misal: 60–80)	✅ Bisa langsung	❌ Tidak bisa langsung

🔁 Perulangan JavaScript: Loop yang Bikin Hidup Lebih Mudah

Coba bayangkan kamu disuruh menulis "Aku cinta JavaScript" sebanyak 100 kali. Secara manual? Ogah banget! Tapi dengan perulangan JavaScript alias loop, kamu bisa melakukannya cukup dengan 3 baris kode. Itulah kekuatan loop — mengulang sebuah aksi sebanyak yang kamu mau, tanpa harus menulis kode berulang kali.

Ada 3 jenis loop utama yang perlu kamu kuasai: for, while, dan do...while.

⚡ Analisis: 3 Jenis Loop JavaScript

for

Pakai ketika kamu tahu persis berapa kali ingin mengulang. Misal: "Ulangi 10 kali."

while

Pakai ketika kamu ingin ulangi selama kondisi tertentu masih terpenuhi. Misal: "Selama stok ada."

do...while

Seperti while, tapi kode dijalankan minimal 1 kali dulu baru cek kondisi. Misal: "Tanya dulu, cek belakangan."

📌 Loop for — Si Paling Populer

📄 contoh-for-loop.js JavaScript

// Tampilkan angka 1 sampai 5
for (let i = 1; i <= 5; i++) {
  console.log(`Perulangan ke-${i}`);
}

// Output:
// Perulangan ke-1
// Perulangan ke-2
// Perulangan ke-3
// Perulangan ke-4
// Perulangan ke-5

// Struktur for: (awal; kondisi; langkah)
// i=1    : mulai dari 1
// i<=5   : selama i masih ≤ 5, terus jalan
// i++    : setiap putaran, i naik 1

📌 Loop while — Selama Kondisi Terpenuhi

📄 contoh-while.js JavaScript

let stok = 3;

while (stok > 0) {
  console.log(`🛒 Melayani pelanggan, stok tersisa: ${stok}`);
  stok--;  // kurangi stok setiap putaran
}

console.log("😅 Stok habis! Tutup dulu ya.");

// Output:
// 🛒 Melayani pelanggan, stok tersisa: 3
// 🛒 Melayani pelanggan, stok tersisa: 2
// 🛒 Melayani pelanggan, stok tersisa: 1
// 😅 Stok habis! Tutup dulu ya.

🔥 Fakta Menarik: Infinite Loop

Kalau kamu lupa menambahkan kondisi berhenti di while, programmu akan jalan selamanya — ini disebut infinite loop. Akibatnya? Browser bisa hang atau crash! Selalu pastikan ada kondisi yang membuat loop berhenti.

🚀 Kombinasi Percabangan dan Perulangan JavaScript

Kekuatan sebenarnya muncul ketika kamu menggabungkan percabangan dan perulangan JavaScript dalam satu program. Misalnya, kamu ingin menampilkan angka 1–10, tapi yang genap dikasih label "GENAP" dan yang ganjil dikasih label "GANJIL". Ini adalah contoh klasik yang sering muncul di interview kerja!

📄 genap-ganjil.js Kombinasi Loop + If

for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    console.log(`${i} → GENAP ✅`);
  } else {
    console.log(`${i} → Ganjil`);
  }
}

// Output:
// 1 → Ganjil
// 2 → GENAP ✅
// 3 → Ganjil
// ... dan seterusnya

// Tips: i % 2 adalah "modulo" — sisa bagi
// Kalau sisa bagi 2 = 0, berarti genap!

⚡ Insight Penting: Operator Modulo (%)

Operator % (modulo) mengembalikan sisa hasil bagi. Contoh: 7 % 3 = 1 karena 7 dibagi 3 sisanya 1. Operator ini sangat sering dipakai untuk cek bilangan genap/ganjil, dan banyak kasus lainnya. Hafalin ini!

💡 Tips: break dan continue di dalam Loop

Dua keyword tambahan yang wajib kamu tahu:

break — langsung menghentikan loop, keluar dari perulangan sepenuhnya.
continue — melewati iterasi saat ini dan lanjut ke iterasi berikutnya tanpa menghentikan loop.

✅ Kesimpulan

Kamu Sekarang Punya "Otak" untuk Kode Kamu!

Di artikel ini, kamu sudah belajar cara menguasai percabangan dan perulangan JavaScript — dua fondasi paling penting dalam pemrograman. Dengan if-else dan switch, kode kamu bisa membuat keputusan. Dengan for, while, dan do...while, kode kamu bisa mengulang aksi tanpa batas — tapi tetap terkontrol.

Poin utama yang perlu kamu ingat: