JavaScript Jadi "Hakim": Bikin Keputusan Pake if, else, dan switch!

Udah bisa nyimpen data pake variabel, objek, dan array? Udah bisa ngolahnya pake operator? Keren! Sekarang, gimana caranya kita bikin program JavaScript kita jadi lebih "pinter", yang bisa ngambil keputusan dan ngelakuin aksi yang beda-beda tergantung situasi?

Di sinilah peran Struktur Kontrol Kondisional. Ini adalah blok-blok kode yang ngebolehin kita buat ngasih tau JavaScript: "Hei, kalau kondisi A terpenuhi, lakuin ini ya. Tapi kalau kondisi B yang terpenuhi, lakuin itu. Kalau gak ada yang terpenuhi, ya udah lakuin yang ono."

Ada dua struktur kondisional utama di JavaScript: if...else dan switch.

1. Pernyataan if: Kalau Kondisinya Benar, Lakuin Ini!

Pernyataan if adalah yang paling dasar. Dia bakal ngejalanin satu blok kode hanya jika kondisi yang ditentuin itu true (benar).

• Sintaks Dasar if:

  if (kondisi) {
      // Blok kode yang dijalanin kalau 'kondisi' itu true
  }

  • kondisi: Ini adalah ekspresi yang hasilnya bakal dievaluasi jadi true atau false (boolean). Bisa pake operator perbandingan (===, >, <), operator logika (&&, ||), atau nilai variabel boolean.
  • Kurung Kurawal { }: Blok kode yang mau dijalanin ditaruh di dalem kurung kurawal. Kalau blok kodenya cuma satu baris, kurung kurawal ini sebenernya opsional, tapi sangat disarankan buat selalu pake kurung kurawal biar kode lebih jelas dan ngindarin error kalau nanti nambahin baris kode lagi.

Contoh Penggunaan if:

let umur = 20;
if (umur >= 18) {
    console.log("Anda sudah dewasa.");
}
 
let cuacaCerah = true;
if (cuacaCerah) {
    console.log("Waktunya pergi ke pantai!");
}
 
let nilaiUjian = 85;
if (nilaiUjian > 70) {
    console.log("Selamat, Anda lulus!");
}

Di contoh pertama, karena umur (20) itu lebih besar atau sama dengan 18, pesan "Anda sudah dewasa." bakal dicetak. Kalau umurnya 15, blok kode di dalem if itu gak bakal dijalanin.

2. Pernyataan else: Kalau Kondisi if Salah, Lakuin yang Ini!

Seringkali, kita gak cuma mau ngelakuin sesuatu kalau kondisinya bener, tapi juga mau ngelakuin hal lain kalau kondisinya salah (false). Di sinilah else masuk.

• Sintaks Dasar if...else:

  if (kondisi) {
      // Blok kode yang dijalanin kalau 'kondisi' itu true
  } else {
      // Blok kode yang dijalanin kalau 'kondisi' itu false
  }

Contoh Penggunaan if...else:

let saldo = 5000;
let hargaBarang = 7000;
 
if (saldo >= hargaBarang) {
    console.log("Pembayaran berhasil!");
} else {
    console.log("Maaf, saldo Anda tidak cukup."); // Ini yang bakal jalan
}
 
let kataSandi = "rahasia123";
if (kataSandi.length >= 8) {
    console.log("Kata sandi cukup panjang.");
} else {
    console.log("Kata sandi terlalu pendek, minimal 8 karakter.");
}

3. Pernyataan else if: Kalau Ada Banyak Kondisi yang Mau Dicek

Gimana kalau kita punya lebih dari dua kemungkinan? Misalnya, mau ngecek nilai ujian: kalau di atas 90 dapet A, kalau di atas 80 dapet B, dst. Kita bisa pake else if buat nambahin kondisi-kondisi lain secara berurutan.

• Sintaks Dasar if...else if...else:

  if (kondisi1) {
      // Blok kode kalau kondisi1 true
  } else if (kondisi2) {
      // Blok kode kalau kondisi1 false, TAPI kondisi2 true
  } else if (kondisi3) {
      // Blok kode kalau kondisi1 dan kondisi2 false, TAPI kondisi3 true
  } else {
      // Blok kode kalau SEMUA kondisi di atas false
  }

  • JavaScript bakal ngecek kondisi dari atas ke bawah. Begitu ada satu kondisi if atau else if yang true, blok kodenya dijalanin, dan sisanya (blok else if atau else di bawahnya) bakal diabaikan.
  • Blok else di paling akhir itu opsional. Dia bakal jalan kalau gak ada satupun kondisi if atau else if yang terpenuhi.

Contoh Penggunaan if...else if...else:

let nilai = 75;
let grade;
 
if (nilai >= 90) {
    grade = "A";
} else if (nilai >= 80) {
    grade = "B";
} else if (nilai >= 70) {
    grade = "C"; // Ini yang bakal jalan, karena 75 >= 70
} else if (nilai >= 60) {
    grade = "D";
} else {
    grade = "E";
}
console.log("Grade Anda:", grade); // Output: Grade Anda: C
 
let hari = "Selasa";
if (hari === "Sabtu" || hari === "Minggu") {
    console.log("Hari libur, yeay!");
} else if (hari === "Jumat") {
    console.log("Hampir weekend!");
} else {
    console.log("Masih hari kerja, semangat!"); // Ini yang bakal jalan
}

Truthy dan Falsy Values: Gak Cuma true dan false

Di JavaScript, pas ngevaluasi kondisi, gak cuma nilai boolean true atau false aja yang bisa dipake. Ada konsep "truthy" dan "falsy".

• Falsy Values: Ini nilai-nilai yang bakal dianggap false kalau dipake di dalem kondisi:
  • false (jelas ya)
  • 0 (angka nol)
  • -0 (minus nol)
  • 0n (BigInt nol)
  • "" (string kosong)
  • null
  • undefined
  • NaN (Not a Number)
• Truthy Values: Semua nilai lain selain yang di atas itu dianggap true kalau dipake di kondisi. Termasuk string yang ada isinya (misal, "halo"), angka selain nol (misal, 1, -10), array (bahkan array kosong []), dan objek (bahkan objek kosong {}).

Contoh Truthy/Falsy:

let namaPengguna = ""; // String kosong (falsy)
if (namaPengguna) {
    console.log("Nama pengguna ada:", namaPengguna);
} else {
    console.log("Nama pengguna belum diisi."); // Ini yang bakal jalan
}
 
let jumlahItem = 0; // Angka nol (falsy)
if (jumlahItem) {
    console.log("Ada item di keranjang.");
} else {
    console.log("Keranjang masih kosong."); // Ini yang bakal jalan
}
 
let daftarBelanja = []; // Array kosong (TRUTHY!)
if (daftarBelanja) { // Ini bakal true karena array kosong itu truthy
    console.log("Objek array daftarBelanja ada."); 
}
// Kalau mau ngecek array kosong beneran, pake daftarBelanja.length === 0

Ngertiin truthy/falsy ini penting biar gak salah interpretasi kondisi.

4. Pernyataan switch: Alternatif buat Banyak else if

Kalau kamu punya banyak banget kondisi else if yang ngecek nilai dari satu variabel yang sama, kode if...else if...else bisa jadi panjang dan kurang enak dibaca. Nah, switch bisa jadi alternatif yang lebih rapi buat kasus kayak gini.

• Sintaks Dasar switch:

  switch (ekspresi) {
      case nilai1:
          // Blok kode kalau ekspresi === nilai1
          break; // PENTING! Jangan lupa break
      case nilai2:
          // Blok kode kalau ekspresi === nilai2
          break;
      // ... case lain ...
      default:
          // Blok kode kalau gak ada case yang cocok (opsional)
  }

  • ekspresi: Nilai atau variabel yang mau dicek.
  • case nilaiX: Ngebandingin ekspresi sama nilaiX pake perbandingan strict equality (===).
  • break: Kalau satu case cocok dan kodenya dijalanin, break ini penting buat keluar dari blok switch. Kalau gak ada break, JavaScript bakal "jatuh" (fall-through) dan ngejalanin kode di case berikutnya juga, meskipun gak cocok! Ini sering jadi sumber bug.
  • default: Mirip else di if. Blok ini bakal dijalanin kalau gak ada case lain yang cocok. default ini opsional dan gak perlu break kalau dia ditaruh paling akhir.

Contoh Penggunaan switch:

let kodeHari = new Date().getDay(); // Ngasih angka 0 (Minggu) - 6 (Sabtu)
let namaHariIni;
 
switch (kodeHari) {
    case 0:
        namaHariIni = "Minggu";
        break;
    case 1:
        namaHariIni = "Senin";
        break;
    case 2:
        namaHariIni = "Selasa";
        break;
    case 3:
        namaHariIni = "Rabu";
        break;
    case 4:
        namaHariIni = "Kamis";
        break;
    case 5:
        namaHariIni = "Jumat";
        break;
    case 6:
        namaHariIni = "Sabtu";
        break;
    default:
        namaHariIni = "Hari tidak dikenal"; // Seharusnya gak pernah kejadian
}
console.log("Hari ini adalah:", namaHariIni);
 
// Contoh fall-through (hati-hati!)
let tipeKendaraan = "mobil";
switch (tipeKendaraan) {
    case "motor":
    case "sepeda":
        console.log("Kendaraan roda dua.");
        break; // Kalau gak ada break di case "motor", outputnya bakal ini juga buat "motor"
    case "mobil":
        console.log("Kendaraan roda empat.");
        break;
    default:
        console.log("Tipe kendaraan lain.");
}
// Output: Kendaraan roda empat.

Kapan Pake switch vs if...else if...else?

• switch bagus kalau kamu ngebandingin satu variabel dengan banyak nilai diskrit (spesifik). Kodenya bisa lebih rapi.
• if...else if...else lebih fleksibel kalau kamu butuh ngecek rentang nilai (misal, nilai > 90) atau kondisi yang lebih kompleks yang melibatkan beberapa variabel.

Struktur kontrol kondisional ini adalah jantung dari logika pemrograman. Dengan if, else if, else, dan switch, kamu bisa bikin program JavaScript-mu jadi lebih cerdas, bisa ngerespon berbagai situasi, dan ngelakuin aksi yang beda-beda sesuai kebutuhan.

Ini bakal jadi bekal penting banget pas kita mulai ngebangun interaksi yang lebih kompleks di halaman web!