BAB 6 — Percabangan dalam JavaScript: Mengendalikan Alur Logika Program

BAB 6 — Percabangan dalam JavaScript: Mengendalikan Alur Logika Program

Percabangan (conditional statements) memungkinkan JavaScript membuat keputusan berdasarkan kondisi tertentu. Dengan percabangan, program dapat memilih jalur eksekusi yang berbeda, menjalankan aksi tertentu, atau mengabaikan kode tertentu.

Pada bab ini, kita membahas seluruh bentuk percabangan modern dalam JavaScript, termasuk konsep penting seperti truthy/falsy, short-circuit evaluation, dan optional chaining.


1. If, Else If, dan Else

Ini adalah struktur percabangan paling dasar dan paling sering digunakan.

A. Struktur dasar if

if (kondisi) {
  // kode dijalankan jika kondisi true
}

B. if...else

if (nilai >= 75) {
  console.log("Lulus");
} else {
  console.log("Tidak lulus");
}

C. else if

Digunakan untuk beberapa kondisi berurutan.

if (jam < 12) {
  console.log("Selamat pagi");
} else if (jam < 18) {
  console.log("Selamat sore");
} else {
  console.log("Selamat malam");
}

JavaScript memeriksa kondisi dari atas ke bawah. Jika satu kondisi terpenuhi, kondisi berikutnya tidak diperiksa lagi.


2. Percabangan switch

Switch digunakan untuk kondisi yang membandingkan satu nilai dengan beberapa kemungkinan.

Struktur dasar:

switch (ekspresi) {
  case nilai1:
    // kode dijalankan jika cocok
    break;
  case nilai2:
    // kode dijalankan jika cocok
    break;
  default:
    // kode jika tidak ada yang cocok
}

Contoh penggunaan:

let grade = "B";

switch (grade) {
  case "A":
    console.log("Sangat baik");
    break;
  case "B":
    console.log("Baik");
    break;
  case "C":
    console.log("Cukup");
    break;
  default:
    console.log("Tidak valid");
}

Kenapa perlu break?

Karena switch secara default fall-through (lanjut ke case berikutnya) kecuali dihentikan oleh break.


3. Truthy dan Falsy

Saat digunakan di kondisi, JavaScript tidak selalu memerlukan boolean. Nilai apa pun yang bukan boolean akan di-coerce (diubah sementara) menjadi boolean.

Falsy values

(nilai yang diperlakukan sebagai false dalam kondisi)

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

Contoh:

if (0) {
  console.log("Tidak akan diprint");
}

Truthy values

Semua nilai selain falsy dianggap truthy.

Contoh:

if ("Hello") {
  console.log("Ini truthy");
}

Contoh nilai truthy umum:

  • "text"
  • []
  • {}
  • function(){}
  • 42
  • "0" → truthy
  • "false" → truthy

4. Short-Circuit Evaluation

Short-circuit merupakan perilaku operator logika ketika menemukan nilai yang cukup untuk menentukan hasil akhir.

A. Operator AND (&&)

Sintaks:

expr1 && expr2

Perilaku:

  • Jika expr1 falsy, hasilnya adalah expr1
  • Jika expr1 truthy, hasilnya expr2

Contoh:

console.log(0 && "Hello");       // 0
console.log(5 && "Hello");       // "Hello"
console.log(true && "OK");       // "OK"

Sering dipakai sebagai “guard”:

user && user.login();


B. Operator OR (||)

Sintaks:

expr1 || expr2

Perilaku:

  • Jika expr1 truthy, hasilnya expr1
  • Jika expr1 falsy, hasilnya expr2

Contoh:

console.log("" || "Default");   // "Default"
console.log("A" || "B");        // "A"

Sangat umum untuk memberikan nilai default:

let username = input || "Guest";


C. Operator Nullish Coalescing (??)

Diperkenalkan di ES2020.

Berbeda dari || yang menganggap banyak nilai sebagai falsy,
?? hanya memeriksa null atau undefined.

let value = null ?? "Default";     // "Default"
let value2 = 0 ?? "Default";       // 0 (tidak diganti)
let value3 = "" ?? "Default";      // "" (tidak diganti)

Ini lebih aman daripada OR (||) untuk nilai seperti 0 dan "".


5. Optional Chaining (?.)

Optional chaining adalah fitur modern untuk menghindari error saat mengakses property yang mungkin tidak ada.

Tanpa optional chaining:

console.log(user.profile.address.city);  
// error jika profile atau address undefined

Dengan optional chaining:

console.log(user?.profile?.address?.city);
// undefined jika salah satu tidak ada

Pada function:

user?.login?.();

Pada array/element:

data?.[0]

Fitur ini sangat berguna untuk data API atau objek dinamis.


Ringkasan Cepat

Topik Fungsi
if / else percabangan dasar
switch banyak kondisi untuk satu nilai
truthy/falsy cara JavaScript mengubah nilai menjadi boolean
short-circuit evaluasi cepat dengan &&, `
optional chaining aman mengakses property nested