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.
Contents
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)
false0-0""(string kosong)nullundefinedNaN
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
expr1falsy, hasilnya adalahexpr1 - Jika
expr1truthy, hasilnyaexpr2
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
expr1truthy, hasilnyaexpr1 - Jika
expr1falsy, hasilnyaexpr2
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 |