Abd. Asis
Javascript Dasar10/10
Struktur Program

BAB 7: Control Flow dan Kondisional

If, else, switch -- membuat program yang bisa mengambil keputusan berdasarkan kondisi.

Di bab sebelumnya kita membangun program catatan-belajar.js yang menyimpan nilai ujian dan nama mata kuliah. Program itu berjalan lurus dari atas ke bawah tanpa pernah bertanya "apakah kondisi ini terpenuhi?" atau "apa yang harus dilakukan jika situasinya berbeda?". Di sinilah control flow masuk.

Control flow adalah kemampuan program untuk mengambil jalur yang berbeda tergantung kondisi yang ada. Tanpa control flow, program kamu hanya bisa melakukan hal yang sama setiap kali dijalankan — tidak peduli nilainya berapa, tidak peduli siapa penggunanya, tidak peduli apa yang terjadi.

Blok Kode dan Kondisi Pertama

Sebelum masuk ke if, ada konsep penting yang perlu dipahami: blok kode. Di JavaScript, kurung kurawal {} digunakan untuk mengelompokkan beberapa statement menjadi satu kesatuan.

JavaScriptJAVASCRIPT
{
  let pesan = "ini di dalam blok";
  console.log(pesan);
}

Blok ini bisa berdiri sendiri, tapi nilainya baru terasa ketika digabungkan dengan kondisi. Dan kondisi paling dasar di JavaScript adalah if.

Sintaksnya sederhana: kata kunci if, diikuti ekspresi dalam tanda kurung, lalu blok kode yang dijalankan jika ekspresi itu bernilai true.

JavaScriptJAVASCRIPT
// catatan-belajar.js
let nilaiUjian = 85;

if (nilaiUjian >= 75) {
  console.log("Selamat, kamu lulus!");
}

Jika nilaiUjian berisi angka yang lebih kecil dari 75, blok di dalam if dilewati begitu saja. Program tidak berhenti — ia hanya melompati bagian itu dan lanjut ke baris berikutnya.

If dan Else

Kondisi if saja belum cukup untuk banyak kasus. Kita sering perlu dua jalur: "jika A, lakukan ini; kalau tidak, lakukan itu." Di situlah else berperan.

JavaScriptJAVASCRIPT
// catatan-belajar.js
let nilaiUjian = 68;

if (nilaiUjian >= 75) {
  console.log("Selamat, kamu lulus!");
} else {
  console.log("Kamu perlu ikut remedial.");
}

Blok else hanya berjalan ketika kondisi di if bernilai false (atau falsy). Salah satu dari keduanya pasti dijalankan — tidak mungkin keduanya dilewati, dan tidak mungkin keduanya berjalan sekaligus.

Bagaimana kalau kasusnya lebih dari dua? Gunakan else if untuk menambah jalur tambahan:

JavaScriptJAVASCRIPT
// catatan-belajar.js
let nilaiUjian = 82;

if (nilaiUjian >= 90) {
  console.log("Nilai A");
} else if (nilaiUjian >= 80) {
  console.log("Nilai B");
} else if (nilaiUjian >= 70) {
  console.log("Nilai C");
} else if (nilaiUjian >= 60) {
  console.log("Nilai D");
} else {
  console.log("Nilai E -- tidak lulus");
}

JavaScript memeriksa kondisi dari atas ke bawah. Begitu menemukan kondisi yang true, ia menjalankan blok itu dan langsung melompati sisanya. Karena nilaiUjian adalah 82, kondisi pertama (>= 90) gagal, tapi kondisi kedua (>= 80) terpenuhi — maka yang tercetak adalah "Nilai B".

Urutan pengecekan penting. Jika kamu membalik urutan dan menempatkan >= 60 sebelum >= 80, semua nilai di atas 60 akan langsung masuk ke jalur pertama. Selalu urutkan dari kondisi yang paling ketat ke yang paling longgar.

Nilai Truthy dan Falsy

Di Bab 3 kita sudah berkenalan dengan boolean true dan false. Tapi kondisi dalam if tidak harus berupa boolean murni — JavaScript akan mengonversi nilai apapun menjadi boolean secara otomatis.

Nilai yang dianggap false di JavaScript (disebut falsy):

  • false
  • 0 dan -0
  • "" (string kosong)
  • null
  • undefined
  • NaN

Semua nilai lainnya dianggap true (truthy) — termasuk string non-kosong, angka selain 0, array, dan object.

JavaScriptJAVASCRIPT
let namaMahasiswa = "";

if (namaMahasiswa) {
  console.log("Nama: " + namaMahasiswa);
} else {
  console.log("Nama belum diisi.");
}
// Output: "Nama belum diisi."

Karena "" adalah falsy, blok else yang berjalan. Ini idiom yang sangat umum di JavaScript untuk mengecek apakah sebuah string sudah diisi atau belum.

Kondisi Bersarang

Kondisi if bisa ditulis di dalam kondisi if yang lain — ini disebut nested conditions. Kadang ini diperlukan, tapi hati-hati: terlalu banyak lapisan bersarang membuat kode sulit dibaca.

JavaScriptJAVASCRIPT
// catatan-belajar.js
let nilaiUjian = 85;
let sudahMengumpulkanTugas = true;

if (nilaiUjian >= 75) {
  if (sudahMengumpulkanTugas) {
    console.log("Lulus dengan nilai penuh.");
  } else {
    console.log("Lulus, tapi nilai dikurangi karena tugas belum dikumpul.");
  }
} else {
  console.log("Tidak lulus.");
}

Alternatif yang lebih bersih untuk kasus seperti ini adalah menggunakan operator logika && (yang sudah kita bahas di Bab 4):

JavaScriptJAVASCRIPT
if (nilaiUjian >= 75 && sudahMengumpulkanTugas) {
  console.log("Lulus dengan nilai penuh.");
} else if (nilaiUjian >= 75) {
  console.log("Lulus, tapi nilai dikurangi karena tugas belum dikumpul.");
} else {
  console.log("Tidak lulus.");
}

Versi kedua lebih mudah dibaca karena logikanya mendatar, bukan bersarang.

Switch: Ketika Nilainya Spesifik

if/else if cocok ketika kamu membandingkan rentang atau ekspresi yang berbeda-beda. Tapi ketika kamu hanya membandingkan satu nilai dengan beberapa kemungkinan yang spesifik, switch bisa lebih rapi.

JavaScriptJAVASCRIPT
// catatan-belajar.js
let hariIni = "Senin";

switch (hariIni) {
  case "Senin":
    console.log("Kelas Kalkulus jam 08.00");
    break;
  case "Rabu":
    console.log("Kelas Fisika jam 10.00");
    break;
  case "Jumat":
    console.log("Kelas Pemrograman jam 13.00");
    break;
  default:
    console.log("Tidak ada kelas hari ini.");
}

Cara kerja switch:

  1. Evaluasi ekspresi dalam kurung (hariIni)
  2. Cocokkan hasilnya dengan setiap case menggunakan perbandingan ketat (===)
  3. Jika cocok, jalankan kode di bawah case itu
  4. break menghentikan eksekusi dan keluar dari blok switch
  5. Jika tidak ada case yang cocok, jalankan blok default

Jangan lupa break! Tanpa break, JavaScript akan terus mengeksekusi kode di case berikutnya meskipun nilainya tidak cocok. Perilaku ini disebut fall-through dan hampir selalu merupakan bug yang tidak disengaja.

Fall-Through yang Disengaja

Ada satu situasi di mana fall-through berguna: ketika beberapa case harus menjalankan kode yang sama.

JavaScriptJAVASCRIPT
let hari = "Sabtu";

switch (hari) {
  case "Sabtu":
  case "Minggu":
    console.log("Hari libur, tidak ada kelas.");
    break;
  default:
    console.log("Hari kerja.");
}

Di sini, baik "Sabtu" maupun "Minggu" akan menghasilkan output yang sama. Teknik ini sah dan sering digunakan untuk menggabungkan beberapa kondisi yang penangannya identik.

Diagram Alur If/Else

Untuk memvisualisasikan bagaimana if/else bekerja:

CodeTEXT
         Kondisi dievaluasi
                |
        +-------+-------+
        |               |
      true            false
        |               |
   Blok if         Blok else
   dijalankan      dijalankan
        |               |
        +-------+-------+
                |
         Program lanjut
CodeIMAGE
A clean technical flowchart diagram showing JavaScript if/else control flow. The diagram has: a diamond shape labeled "Kondisi dievaluasi?" at the top center, an arrow going left labeled "true" pointing to a blue rectangle labeled "Blok if dijalankan", an arrow going right labeled "false" pointing to an orange rectangle labeled "Blok else dijalankan", both arrows converging at the bottom to a gray rectangle labeled "Program lanjut". White background, flat design, sans-serif font, 16:9 aspect ratio. All text labels in Indonesian.

Latihan

Tiga soal ini mengajak kamu menggabungkan binding dari bab sebelumnya dengan kemampuan pengambilan keputusan yang baru dipelajari.

  1. Buat program yang menyimpan nilai ujian seorang mahasiswa dalam sebuah binding. Cetak huruf mutu (A/B/C/D/E) berdasarkan nilainya menggunakan if/else if/else. Rentang nilai: A ≥ 90, B ≥ 80, C ≥ 70, D ≥ 60, E di bawah 60.

  2. Buat program yang menyimpan nama hari dalam sebuah binding. Gunakan switch untuk mencetak jadwal kuliah hari itu. Definisikan minimal 3 hari dengan jadwal berbeda dan satu blok default untuk hari tanpa jadwal.

  3. Kombinasikan dua kondisi: sebuah mahasiswa dinyatakan "Lulus dengan Pujian" jika nilai ujiannya ≥ 85 dan tidak pernah absen (simpan kehadiran sebagai boolean). Jika hanya salah satu terpenuhi, cetak pesan yang sesuai. Jika keduanya tidak terpenuhi, cetak "Tidak lulus". Gunakan const untuk data yang tidak berubah dan let untuk yang bisa berubah.

Dengan if, else, dan switch, program kamu sudah bisa mengambil keputusan. Tapi keputusan saja belum cukup — seringkali kita perlu program yang bisa mengulang tindakan yang sama berkali-kali. Menghitung rata-rata dari 100 nilai tentu tidak mau dilakukan dengan 100 baris kode terpisah. Topik itulah yang menanti di bab selanjutnya.

Referensi

  1. 1 if...else - JavaScript | MDN Web Docs
  2. 2 switch - JavaScript | MDN Web Docs
  3. 3 Truthy - MDN Web Docs Glossary
Sebelumnya
BAB 6: Variabel dan Binding