Dokumentasi JavaScript interaktif: if / else

Q: Bagaimana cara menulis pernyataan if/else di JavaScript?

Taruh kondisi di dalam kurung setelah if, lalu sebuah blok di dalam kurung kurawal. Ikuti dengan else dan blok lain sebagai cadangan. Contoh: if (age >= 18) { console.log('adult'); } else { console.log('minor'); }. Kondisinya bisa berupa ekspresi apa pun, karena JavaScript akan mengubahnya menjadi boolean.

Q: Apa bedanya else if dan if bersarang di JavaScript?

else if merangkai kondisi sehingga hanya satu cabang yang berjalan: JavaScript mengecek setiap kondisi secara berurutan dan berhenti di kecocokan pertama. Pernyataan if bersarang menaruh satu di dalam yang lain, biasanya untuk mengecek kondisi kedua hanya kalau kondisi pertama bernilai true. Rangkaian else if yang datar hampir selalu lebih mudah dibaca daripada if yang bersarang dalam.

Q: Kapan sebaiknya memakai operator ternary daripada if/else?

Pakai ternary condition ? a : b saat kamu memilih di antara dua nilai dalam sebuah ekspresi, misalnya mengisi variabel, mengembalikan nilai dari fungsi, atau menyusun string. Tetap pakai if/else saat cabangnya menjalankan pernyataan dengan efek samping atau saat salah satu sisinya lebih dari ekspresi pendek. Ternary berantai cepat sekali jadi sulit dibaca.

Bentuk Pernyataan if

Pernyataan if menjalankan sebuah blok kode hanya saat kondisinya true. Bentuknya adalah kata kunci, kondisi di dalam kurung, dan blok di dalam kurung kurawal:

const age = 21;

if (age >= 18) {
  console.log("You can vote.");
}

Kondisi age >= 18 bernilai true, jadi bloknya berjalan. Kalau age bernilai 16, kondisinya false dan JavaScript melewati blok itu sepenuhnya.

Secara teknis kurung kurawal boleh dihilangkan kalau bloknya hanya satu pernyataan, tetapi selalu pakailah. Pernyataan if tanpa kurung kurawal adalah sumber bug klasik saat seseorang kemudian menambahkan baris kedua dan lupa bahwa baris itu sebenarnya tidak berada di dalam blok.

else: Cabang Cadangan

Pasangkan if dengan else untuk menjalankan kode yang berbeda saat kondisinya false:

const hour = 14;

if (hour < 12) {
  console.log("Good morning");
} else {
  console.log("Good afternoon");
}

Tepat satu dari kedua cabang yang berjalan. Tidak pernah keduanya, tidak pernah tidak satu pun. else tidak punya kondisi sendiri: ia menampung semua kasus saat "if-nya false".

else if: Memilih dari Beberapa Pilihan

Saat kamu punya lebih dari dua kasus, rangkai dengan else if. JavaScript mengecek setiap kondisi secara berurutan dan berhenti di kondisi pertama yang true:

const score = 78;

if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else if (score >= 70) {
  console.log("C");
} else if (score >= 60) {
  console.log("D");
} else {
  console.log("F");
}

Hanya satu cabang yang berjalan. Begitu satu kondisi cocok, sisanya dilewati, bahkan kalau kondisi itu juga bernilai true. Itulah sebabnya urutan itu penting: kalau kamu membalik rangkaiannya dan mengecek score >= 60 lebih dulu, semua yang di atas 60 akan mendapat D.

else terakhir bersifat opsional, tetapi menuliskannya membuat maksudmu jelas: "kalau tidak ada yang cocok, lakukan ini."

Kondisi Bisa Berupa Ekspresi Apa Pun

Isi di dalam kurung tidak harus berupa perbandingan. Bisa ekspresi apa pun, karena JavaScript mengubah hasilnya menjadi boolean:

const name = "Ada";
const items = [];

if (name) {
  console.log("name is set");
}

if (items.length) {
  console.log("cart has items");
} else {
  console.log("cart is empty");
}

String yang tidak kosong bernilai truthy. 0 dan string kosong bernilai falsy, jadi items.length yang bernilai 0 masuk ke cabang else. Inilah idiom standar JavaScript untuk "cek apakah ada isinya."

Daftar lengkap nilai falsy cukup pendek dan layak dihafal: false, 0, -0, 0n, "", null, undefined, dan NaN. Semua yang lain bernilai truthy, termasuk "0", "false", [], dan {}. Dua yang terakhir itu sering menjebak.

Menggabungkan Kondisi: && dan ||

Pakai && (dan) serta || (atau) untuk menggabungkan kondisi:

const age = 25;
const hasTicket = true;
const isVip = false;

if (age >= 18 && hasTicket) {
  console.log("Welcome in");
}

if (isVip || age >= 65) {
  console.log("Priority entry");
} else {
  console.log("Regular line");
}

&& mewajibkan kedua sisi bernilai truthy. || mewajibkan setidaknya satu. Keduanya melakukan short-circuit: && berhenti di nilai falsy pertama, || berhenti di nilai truthy pertama. Ini penting saat kondisi kedua punya efek samping atau bisa memunculkan error: user && user.name dengan aman mengembalikan undefined kalau user bernilai null, tanpa crash.

Bungkus logika campuran dengan kurung agar urutan prioritasnya jelas:

const age = 20;
const isMember = true;
const hasPass = false;

if ((isMember || hasPass) && age >= 18) {
  console.log("Entry granted");
}

Tanpa kurung, && mengikat lebih kuat daripada ||, yang biasanya justru kebalikan dari cara membacanya secara alami.

== vs === (Pakai ===)

Saat mengecek kesamaan di dalam if, pakai === dan !==, bukan == dan !=:

const input = "42";

if (input === 42) {
  console.log("strict: matched a number");
} else {
  console.log("strict: didn't match");
}

if (input == 42) {
  console.log("loose: matched after coercion");
}

== mengubah tipe sebelum membandingkan, yang menimbulkan kejutan seperti "" == 0 bernilai true dan null == undefined bernilai true. === membandingkan tanpa mengubah tipe: tipe sama dan nilai sama. Jadikan === default-mu. Satu-satunya pengecualian yang umum adalah x == null, yang mengecek null sekaligus undefined.

Operator Ternary

Untuk memilih di antara dua nilai, operator ternary condition ? a : b sering lebih rapi daripada if/else lengkap:

const age = 17;

const label = age >= 18 ? "adult" : "minor";
console.log(label);

function greeting(hour) {
  return hour < 12 ? "Good morning" : "Good afternoon";
}

console.log(greeting(9));
console.log(greeting(20));

Ternary adalah ekspresi: ia menghasilkan nilai. Itulah perbedaan utamanya dengan if/else, yang merupakan pernyataan. Pakai ternary saat kamu butuh hasilnya (mengisi variabel, mengembalikan nilai, menyusun string). Pakai if/else saat kamu menjalankan efek samping.

Kamu bisa merangkai ternary, tetapi keterbacaannya anjlok:

// Don't do this:
const grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "F";

Kalau kamu mulai merangkai, kembalilah ke else if.

if Bersarang vs else if Datar

Kadang satu kondisi hanya masuk akal di dalam kondisi lain. Untuk itu, menyarangkannya tidak masalah:

const user = { loggedIn: true, role: "admin" };

if (user.loggedIn) {
  if (user.role === "admin") {
    console.log("Show admin panel");
  } else {
    console.log("Show user dashboard");
  }
} else {
  console.log("Redirect to login");
}

Tetapi menyarangkan sampai tiga atau empat tingkat adalah tanda kode yang bermasalah. Ratakan dengan return lebih awal atau kondisi gabungan:

function describe(user) {
  if (!user.loggedIn) return "Redirect to login";
  if (user.role === "admin") return "Show admin panel";
  return "Show user dashboard";
}

console.log(describe({ loggedIn: true, role: "admin" }));
console.log(describe({ loggedIn: false }));

Return lebih awal menjaga setiap cabang tetap pendek dan berada di tingkat indentasi yang sama. Jauh lebih mudah dipindai daripada piramida if bersarang.

Jebakan Umum: Penugasan di Dalam if

= mengisi nilai. === membandingkan. Tertukar di dalam kondisi adalah bug klasik:

let status = "pending";

// Bug: this assigns, it doesn't compare.
if (status = "done") {
  console.log("This always runs");
}

console.log("status is now:", status);

status = "done" mengisi "done" ke status dan menghasilkan "done", yang bernilai truthy. Jadi bloknya selalu berjalan, dan kamu diam-diam menimpa variabelnya. Linter bisa menangkap ini. Strict mode tidak. Berhati-hatilah, dan pakai === saat kamu bermaksud membandingkan.

Berikutnya: switch

Saat kamu membandingkan satu nilai dengan banyak kemungkinan, rangkaian else if yang panjang mulai terasa berulang. Pernyataan switch di JavaScript dibuat persis untuk kasus itu, dan ia punya keanehannya sendiri seputar break dan fall-through, yang dibahas berikutnya.

Pertanyaan yang sering diajukan

Bagaimana cara menulis pernyataan if/else di JavaScript?

Taruh kondisi di dalam kurung setelah if, lalu sebuah blok di dalam kurung kurawal. Ikuti dengan else dan blok lain sebagai cadangan. Contoh: if (age >= 18) { console.log('adult'); } else { console.log('minor'); }. Kondisinya bisa berupa ekspresi apa pun, karena JavaScript akan mengubahnya menjadi boolean.

Apa bedanya else if dan if bersarang di JavaScript?

else if merangkai kondisi sehingga hanya satu cabang yang berjalan: JavaScript mengecek setiap kondisi secara berurutan dan berhenti di kecocokan pertama. Pernyataan if bersarang menaruh satu di dalam yang lain, biasanya untuk mengecek kondisi kedua hanya kalau kondisi pertama bernilai true. Rangkaian else if yang datar hampir selalu lebih mudah dibaca daripada if yang bersarang dalam.

Kapan sebaiknya memakai operator ternary daripada if/else?

Pakai ternary condition ? a : b saat kamu memilih di antara dua nilai dalam sebuah ekspresi, misalnya mengisi variabel, mengembalikan nilai dari fungsi, atau menyusun string. Tetap pakai if/else saat cabangnya menjalankan pernyataan dengan efek samping atau saat salah satu sisinya lebih dari ekspresi pendek. Ternary berantai cepat sekali jadi sulit dibaca.

Mengapa if (0) berperilaku berbeda dengan if (false) di JavaScript?

Sebenarnya tidak berbeda: keduanya melewati bloknya. JavaScript mengubah kondisi menjadi boolean, dan 0, '', null, undefined, NaN, serta false semuanya falsy. Jebakannya, nilai seperti '0' (string yang tidak kosong) dan [] (array kosong) bernilai truthy, yang mengejutkan orang yang datang dari bahasa lain.

Konsep terkait

if/else JavaScript: Kondisi, else if, dan Operator Ternary