Setiap program yang berguna pada akhirnya akan mencapai titik keputusan. Haruskah tombol ini mengirimkan formulir atau menampilkan kesalahan? Apakah peng...

Setiap program yang berguna pada akhirnya akan mencapai titik keputusan. Haruskah tombol ini mengirimkan formulir atau menampilkan kesalahan? Apakah pengguna ini melihat dasbor admin atau tampilan tamu? JavaScript menjawab pertanyaan-pertanyaan ini dengan pernyataan kondisional. Mereka adalah katup kendali kode Anda: membuka satu jalur, menutup jalur lainnya, semuanya berdasarkan apakah suatu ekspresi bernilai true atau false. Tanpa mereka, skrip Anda akan berjalan dari atas ke bawah tanpa pernah bereaksi terhadap orang yang menggunakannya.

Cabang Paling Sederhana: if

Pernyataan if adalah gerbang pertama yang Anda lalui. Anda menempatkan sebuah kondisi di dalam tanda kurung. Jika kondisi tersebut bernilai true, blok kode di bawahnya akan dieksekusi. Jika bernilai false, JavaScript akan melewati blok tersebut sepenuhnya dan melanjutkan ke bagian file berikutnya.

Ini adalah hal yang tepat Anda butuhkan untuk pemeriksaan sederhana yang hanya dilakukan sekali. Bayangkan memvalidasi kolom formulir sebelum Anda mengirimkan apa pun ke server:

const email = document.getElementById("email").value;

if (email === "") {
  alert("Please enter your email.");
}

Tanpa email, tidak ada pengiriman. Logikanya lugas dan jelas. Gunakan if ketika hanya ada satu kasus khusus yang perlu dijaga dan tidak memerlukan tindakan alternatif.

Menangani Pilihan Antara Dua Hal: if...else

Sebagian besar keputusan nyata memiliki dua sisi. Pasangan if...else mencakup hal tersebut secara tepat. Satu blok berjalan saat kondisi bernilai true, dan blok lainnya berjalan saat kondisi bernilai false. Kedua jalur tersebut bersifat saling eksklusif.

Bayangkan pemeriksaan mode gelap saat halaman dimuat:

const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

if (prefersDark) {
  document.body.classList.add("dark");
} else {
  document.body.classList.add("light");
}

Browser tidak akan pernah menambahkan kedua kelas tersebut. Ia memilih satu jalur, mengeksekusinya, lalu lanjut ke tahap berikutnya. Kapan pun logika Anda terbagi secara bersih menjadi dua kemungkinan hasil, inilah struktur yang harus Anda gunakan.

Berbagai Jalur: if...else if...else

Tidak semua masalah bersifat biner. Terkadang Anda membutuhkan tangga kemungkinan. Rantai if...else if...else memungkinkan Anda menguji beberapa kondisi secara berurutan. JavaScript mengevaluasinya dari atas ke bawah dan menjalankan blok pertama yang kondisinya bernilai true. Setelah kecocokan tersebut ditemukan, sisa dari tangga tersebut akan diabaikan.

Contoh klasiknya adalah memetakan skor numerik ke nilai huruf:

const score = 87;
let grade;

if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else {
  grade = "F";
}

Urutan sangatlah penting di sini. Jika Anda memeriksa score >= 70 sebelum score >= 90, hampir semua nilai lulus akan terjebak dalam kategori C karena kecocokan true yang pertama adalah pemenangnya. Pastikan kondisi Anda diurutkan dari yang paling spesifik ke yang paling umum, dan selalu akhiri rantai dengan else terakhir untuk menangkap apa pun yang lolos.

Mencocokkan Nilai Tetap: switch

Saat Anda membandingkan satu variabel dengan daftar konstanta yang sudah diketahui, rantai if...else yang panjang akan menjadi berantakan. Pernyataan switch merapikan segalanya. Ia mengevaluasi sebuah ekspresi satu kali, lalu membandingkannya dengan label case menggunakan kesamaan ketat (===). Ini membuat kode lebih mudah dipindai ketika pilihannya bersifat diskrit dan bernama.

Pertimbangkan untuk mengatur jam operasional toko berdasarkan hari ini:

const day = new Date().getDay();

switch (day) {
  case 0:
    console.log("Sunday hours: 10am - 4pm");
    break;
  case 6:
    console.log("Saturday hours: 9am - 6pm");
    break;
  default:
    console.log("Weekday hours: 8am - 8pm");
}

Berhati-hatilah dengan break. Jika Anda melewatkannya, eksekusi akan terus berjalan ke case berikutnya (fall-through). Perilaku tersebut terkadang berguna, tetapi lebih sering menyebabkan bug yang tidak terlihat. Jika digunakan dengan benar, switch membuat niat Anda terlihat jelas dalam sekejap dan menjaga cabang-cabang terkait tetap sejajar dalam satu kolom yang rapi.

Keputusan Ringkas: Operator Ternary

Operator ternary—ditulis sebagai ? :—adalah sebuah ekspresi, bukan sebuah pernyataan. Perbedaan itu penting