Belajar JavaScript - Kontrol Alur: if, switch, dan Loop

#Pendahuluan

Setelah episode 2, kalian bisa menyimpan nilai dan mengolahnya. Tapi sebuah program tidak berguna jika hanya berjalan lurus dari atas ke bawah. Kontrol alur memberi program kemampuan untuk mengambil keputusan dan mengulang pekerjaan — dua perilaku yang membuat kode terasa hidup.

Episode 3 membahas dua sisi kontrol alur. Sisi pertama adalah percabangan: if, else if, else, dan switch untuk memilih jalan mana yang diambil. Sisi kedua adalah perulangan: for, while, do...while, dan for...of untuk mengeksekusi kode berulang kali.

Semua contoh bisa dijalankan langsung dengan node. Coba ubah nilai input di setiap contoh dan amati bagaimana output berubah — itu cara terbaik memahami perilaku percabangan dan perulangan.

#Percabangan dengan if dan else

#Bentuk Dasar

if mengeksekusi blok kode hanya jika kondisi bernilai truthy:

if, else if, dan else

const nilai = 85;
 
if (nilai >= 90) {
  console.log("Nilai A");
} else if (nilai >= 75) {
  console.log("Nilai B");
} else {
  console.log("Nilai C");
}

Kondisi dievaluasi berurutan dari atas. Jika nilai >= 90 salah, baru nilai >= 75 diuji; jika semuanya salah, blok else dijalankan. Untuk nilai = 85, outputnya Nilai B. if (nilai >= 90) adalah bentuk paling umum percabangan di JavaScript.

#Operator Ternary: if dalam Satu Baris

Untuk percabangan sederhana dua cabang, gunakan operator ternary:

Operator ternary

const umur = 20;
const status = umur >= 17 ? "Bisa buat SIM" : "Belum bisa";
console.log(status);

Struktur ternary adalah kondisi ? nilaiBenar : nilaiSalah. Untuk umur = 20, hasilnya "Bisa buat SIM". Ternary membuat kode ringkas, tapi jangan dipakai untuk kondisi berlapis — bacaannya jadi membingungkan.

#Percabangan dengan switch

Ketika satu nilai dibandingkan dengan banyak kemungkinan, switch lebih rapi daripada deretan else if:

Switch untuk banyak kasus

const hari = "selasa";
let pesan;
 
switch (hari) {
  case "senin":
    pesan = "Mulai minggu dengan semangat";
    break;
  case "selasa":
    pesan = "Saatnya fokus";
    break;
  case "jumat":
    pesan = "Akhir pekan hampir tiba";
    break;
  default:
    pesan = "Hari biasa";
}
 
console.log(pesan);

switch (hari) membandingkan nilai dengan setiap case menggunakan perbandingan ketat. Kata kunci break menghentikan eksekusi; jika dihilangkan, eksekusi akan fall-through ke case berikutnya. Blok default menangani nilai yang tidak cocok — setara else.

#Perulangan dengan for dan while

#Loop for Klasik

for mengulang kode dengan penghitung eksplisit. Strukturnya tiga bagian: inisialisasi, kondisi, dan increment:

Loop for

for (let i = 1; i <= 5; i++) {
  console.log(`Iterasi ke-${i}`);
}

for (let i = 1; i <= 5; i++) memulai i dari 1, mengulang selama i <= 5, dan menaikkan i setiap iterasi. Outputnya lima baris dari Iterasi ke-1 sampai Iterasi ke-5. Variabel i dideklarasikan dengan let karena nilainya berubah.

#Loop while dan do...while

while mengulang selama kondisi masih benar, dan mengecek kondisi di awal:

while dan do...while

let sisa = 10;
 
while (sisa > 0) {
  console.log(`Sisa: ${sisa}`);
  sisa -= 3;
}
 
let berapa = 0;
do {
  console.log("Jalan minimal sekali");
  berapa++;
} while (berapa < 3);

while (sisa > 0) mungkin tidak dijalankan sama sekali jika kondisinya sudah salah di awal. Sebaliknya, do...while selalu dijalankan minimal sekali karena kondisi dicek setelah blok. Pilih do...while ketika kalian yakin blok harus berjalan setidaknya satu kali.

#Loop Modern: for...of dan for...in

#for...of untuk Nilai Iterable

for...of mengulang nilai dari array, string, Set, dan objek iterable lainnya. Ini loop yang paling sering dipakai di JavaScript modern:

for...of untuk array dan string

const buah = ["apel", "pisang", "mangga"];
 
for (const item of buah) {
  console.log(item.toUpperCase());
}
 
for (const huruf of "JS") {
  console.log(huruf);
}

for (const item of buah) mengambil setiap elemen array secara langsung — tanpa perlu indeks dan tanpa risiko salah hitung panjang array. Loop ini lebih aman dan lebih mudah dibaca daripada for klasik.

#for...in untuk Properti Objek

for...in mengulang nama properti sebuah objek. Bedanya dengan for...of wajib kalian ingat: for...of memberi nilai, for...in memberi nama kunci:

for...in untuk objek

const pengguna = { nama: "Arman", role: "Engineer" };
 
for (const kunci in pengguna) {
  console.log(`${kunci}: ${pengguna[kunci]}`);
}

Outputnya nama: Arman dan role: Engineer. Catatan penting: jangan pakai for...in pada array — urutannya tidak dijamin. Untuk array selalu gunakan for...of, dan detail lain tentang objek akan kita dalami di episode 5.

#break, continue, dan Menggabungkan Pola

Kata kunci break menghentikan loop sepenuhnya, sedangkan continue melompat ke iterasi berikutnya:

break dan continue

const angka = [3, 8, 15, 22, 30];
 
for (const nilai of angka) {
  if (nilai % 2 === 0) continue;
  if (nilai > 20) break;
  console.log(nilai);
}

Untuk daftar [3, 8, 15, 22, 30]: 3 dicetak (ganjil), 8 dilewati continue (genap), 15 dicetak, dan 22 menghentikan loop lewat break sebelum dicetak. if (nilai > 20) break adalah pola umum untuk berhenti lebih awal demi efisiensi.

#Penutup

Episode 3 melengkapi fondasi kontrol alur: if, else if, else, dan ternary untuk percabangan, switch untuk banyak kasus, for, while, dan do...while untuk perulangan, serta for...of dan for...in sebagai loop modern. Kalian juga mempelajari break dan continue untuk mengendalikan perjalanan loop.

Inti yang harus dibawa pulang:

• if dan else mengeksekusi blok berdasarkan kondisi truthy.
• Ternary kondisi ? a : b untuk percabangan sederhana dua cabang.
• switch cocok untuk membandingkan satu nilai dengan banyak kasus.
• for...of mengulang nilai array dan iterable; for...in mengulang kunci objek.
• while cek kondisi di awal; do...while selalu jalan minimal sekali.
• break menghentikan loop, continue melompat ke iterasi berikutnya.

Di episode 4 selanjutnya kita akan membahas fungsi dan scope variabel — cara membungkus logika menjadi blok yang bisa dipanggil ulang, memahami parameter dan return, serta membedakan scope global, function, dan block. Di sinilah kode kalian mulai bisa diorganisasi dengan baik.