Percabangan — else if, Operator Ternary, dan switch

Saat menentukan level membership atau menampilkan status pesanan, kondisinya jarang terbagi rapi jadi dua. Kalau Platinum, Gold, dan Regular ditulis sebagai tiga if terpisah, kondisi di bawahnya tetap dicek walaupun hasilnya sudah ditentukan oleh kondisi di atas, sehingga muncul satu baris output untuk setiap kondisi yang terpenuhi.

Artikel ini membahas else if untuk mengecek kondisi secara bertahap, operator ternary yang langsung menghasilkan value, dan switch untuk mencocokkan satu value dengan beberapa kandidat.

Membagi Jadi Tiga Kasus atau Lebih — Merangkai else if

Kita akan menentukan label penilaian dari rata-rata skor ulasan sebuah produk. Skor 4.5 ke atas berarti "Sangat bagus", 3.5 ke atas berarti "Bagus", dan di bawah itu "Di bawah rata-rata".

Kalau kamu menulis dua if terpisah, masing-masing dicek sendiri-sendiri. Dengan skor 4.8, kedua kondisi terpenuhi dan dua baris tercetak: "Sangat bagus" dan "Bagus".

Dengan merangkai else if (kondisi lanjutan yang hanya dicek kalau kondisi sebelumnya tidak terpenuhi), beberapa kondisi bisa digabung menjadi satu percabangan. Blok { } yang mengikuti setiap kondisi disebut cabang.

Kondisi dicek dari atas ke bawah, dan hanya cabang pertama yang kondisinya true yang dijalankan. Kalau tidak ada yang cocok, cabang else yang dijalankan.

const score = 4.8;   // rata-rata skor ulasan sebuah produk

// if yang terpisah dicek sendiri-sendiri
if (score >= 4.5) {
  console.log("Sangat bagus");         // true
}
if (score >= 3.5) {
  console.log("Bagus");                // juga true → tercetak 2 baris
}

// Kalau dirangkai dengan else if, pengecekan berhenti di cabang pertama yang cocok
if (score >= 4.5) {
  console.log("Sangat bagus");         // hanya ini yang dijalankan
} else if (score >= 3.5) {
  console.log("Bagus");                // tidak dicek
} else {
  console.log("Di bawah rata-rata");   // tidak dicek
}

else boleh dihilangkan. Tanpa else, kalau tidak ada kondisi yang cocok, tidak ada cabang yang dijalankan dan eksekusi lanjut ke baris setelah percabangan itu.

Tabel di bawah menunjukkan di tahap mana pengecekan berhenti saat tiga skor berbeda melewati rangkaian yang sama.

Urutan Kondisi Mengubah Hasilnya

Kalau kondisi dengan cakupan lebih luas ditaruh lebih dulu, kondisi yang lebih sempit di bawahnya tidak akan pernah tercapai. Kalau kamu menulis score >= 3.5 lebih dulu, produk dengan skor 4.8 pun berakhir sebagai "Bagus". Supaya 4.8 dinilai "Sangat bagus", taruh kondisi yang lebih sempit seperti score >= 4.5 di urutan pertama.

Ubah kondisi sebuah pesanan menjadi pesan status. orderId, isCanceled, isShipped, dan isPaid sudah dideklarasikan.

① Tampilkan baris dengan format "Status pesanan A-1001".

② Tulis cabang yang menampilkan "Dibatalkan" kalau pesanan sudah dibatalkan.

③ Lanjutkan dengan cabang yang menampilkan "Dikirim" kalau sudah dikirim dan "Dikemas" kalau sudah dibayar, dengan urutan ini.

④ Kalau tidak ada yang cocok, tampilkan "Menunggu pembayaran".

(Kalau berjalan dengan benar, penjelasan akan muncul.)

Mendapatkan Hasil Berupa Value — Cara Menulis Operator Ternary

Kadang kamu ingin memilih antara "Stok tersedia" dan "Stok habis" berdasarkan jumlah stok, lalu menyimpan string itu di variabel supaya bisa dipakai ulang. Dengan if dan else, kamu tidak bisa memakai const, karena const harus langsung diberi value saat dideklarasikan. Jadi kamu harus mendeklarasikan variabelnya dulu dengan let, lalu meng-assign value di masing-masing cabang.

Kode seperti stock > 0 yang menghasilkan sebuah value saat dievaluasi disebut expression. Kode seperti if (…) { … } yang hanya menjalankan proses tanpa menghasilkan value disebut statement.

Dengan operator ternary (expression yang menerima tiga bagian — kondisi, value saat true, dan value saat false — lalu menghasilkan value yang terpilih), kedua cabang bisa ditulis dalam satu baris.

const stock = 0;   // jumlah stok

// if adalah statement, jadi deklarasi dan assignment terpisah
let label;
if (stock > 0) {
  label = "Stok tersedia";
} else {
  label = "Stok habis";
}
console.log(label);   // Stok habis

// Operator ternary adalah expression, jadi bisa langsung dimasukkan ke const
const badge = stock > 0 ? "Stok tersedia" : "Stok habis";
console.log(badge);   // Stok habis

// Bisa juga ditulis langsung di dalam template literal
console.log(`Status: ${stock > 0 ? "Bisa dibeli" : "Menunggu restock"}`);  // Status: Menunggu restock

Kalau hasilnya perlu dibagi jadi tiga atau lebih, kembali ke else if. Operator ternary memang bisa dibuat bersarang, tapi ? dan : akan muncul berkali-kali dalam satu baris, seperti a ? x : b ? y : z, sehingga sulit melihat sekilas kondisi mana yang berpasangan dengan value mana.

Tampilkan judul bagian ulasan dan poin yang didapat dari sebuah pembelian. reviewCount, isPremium, dan purchaseAmount sudah dideklarasikan.

① Tampilkan judul "Belum ada ulasan" kalau jumlah ulasannya 0, dan "Ulasan: ◯" kalau ada minimal 1.

② Simpan rasio poin di sebuah variabel: 0.03 untuk member premium dan 0.01 untuk yang lain.

③ Kalikan jumlah pembelian dengan rasio dari ②, bulatkan ke bawah, lalu tampilkan "Poin didapat: ◯ pt (Member reguler)" dengan label jenis member yang juga berganti sesuai kondisinya.

Memilah Berdasarkan Satu Value — switch dan case

Kita akan menentukan pesan biaya berdasarkan metode pembayaran yang dipilih pelanggan. Ini bisa ditulis dengan else if, tapi kamu jadi menulis variabel yang sama berulang kali — paymentMethod === "credit", paymentMethod === "convenience" — sehingga sulit melihat apa sebenarnya yang dibandingkan di percabangan itu.

Dengan switch (statement yang mencocokkan satu value dengan beberapa kandidat secara berurutan, lalu mulai menjalankan dari cabang yang cocok), value yang dibandingkan cukup ditulis sekali di dalam tanda kurung, dan kandidatnya didaftar sebagai case value:. break di akhir cabang membuat eksekusi keluar dari switch, dan kalau tidak ada case yang cocok, cabang default: yang dijalankan.

const paymentMethod = "credit";   // metode pembayaran yang dipilih pelanggan

switch (paymentMethod) {
  case "credit":
    console.log("Tanpa biaya");                     // ini yang dijalankan
    break;
  case "convenience":
    console.log("Biaya: 200 yen");                  // bayar di minimarket; tidak cocok
    break;
  case "cod":
    console.log("Biaya: 330 yen");                  // bayar di tempat (COD); tidak cocok
    break;
  default:
    console.log("Silakan pilih metode pembayaran");
}

default boleh dihilangkan. Kalau switch tanpa default menerima value yang tidak cocok dengan apa pun, tidak ada cabang yang dijalankan dan eksekusi lanjut ke baris berikutnya. Kalau value di luar kandidat mungkin saja datang, taruh pesan di default supaya value yang tidak terduga langsung terlihat di layar.

Pencocokan case Membedakan String dan Number

switch mencocokkan value dengan cara yang sama seperti ===, jadi value dengan type berbeda tidak akan pernah cocok. String "200" yang diambil dari kolom input tidak masuk ke case 200: dan malah lanjut ke default. Kalau value-nya bisa berupa number atau string, samakan dulu type-nya sebelum dicocokkan.

Tentukan ongkos kirim berdasarkan metode pengiriman. shippingMethod, itemTotal, dan shippingFee sudah dideklarasikan.

① Pakai switch untuk mengisi ongkos kirim dengan 500 untuk standard dan 900 untuk express.

② Tambahkan cabang yang mengisinya dengan 0 untuk store (ambil di toko).

③ Kalau tidak ada yang cocok, tampilkan "Silakan cek metode pengiriman".

④ Setelah switch, tampilkan "Ongkos kirim: ◯ yen / Total: ◯ yen".

Lanjut ke case Berikutnya — Kalau break Tidak Ditulis

Kesalahan yang sering terjadi saat memakai switch adalah lupa menulis break. Secara sintaks kodenya tetap valid, jadi tidak muncul syntax error; kamu baru sadar setelah menjalankannya dan melihat baris output yang lebih banyak dari seharusnya.

Tanpa break, eksekusi terus berlanjut ke kode di case-case di bawah case yang cocok. Perilaku ini disebut fall-through. Eksekusi terus berjalan — tanpa membandingkan value di label case di bawahnya — sampai bertemu break atau mencapai akhir switch.

const orderStatus = "paid";   // status pesanan

// Tanpa break, kode di bawah case yang cocok ikut dijalankan
switch (orderStatus) {
  case "paid":
    console.log("Sudah dibayar");                // cocok, mulai dari sini
  case "shipped":
    console.log("Sudah dikirim");                // tidak ada break, jadi lanjut
  default:
    console.log("Silakan cek status pesanan");   // berjalan sampai default
}

// Dengan menumpuk case, beberapa kandidat bisa memakai kode yang sama
switch (orderStatus) {
  case "pending":
  case "paid":
    console.log("Belum dikirim");   // pending dan paid sama-sama masuk ke sini
    break;
}

Perilaku ini bisa dimanfaatkan saat kamu ingin beberapa kandidat memakai kode yang sama. Kalau dua label case ditumpuk tanpa kode di antaranya, value yang cocok dengan case di atas langsung lanjut ke kode di bawahnya. Tulis break di akhir cabang yang dipakai bersama itu.

Tampilkan fitur yang tersedia di setiap paket langganan. Variabel plan yang berisi paket saat ini sudah dideklarasikan.

① Tampilkan judul dengan format "Fitur di paket standard".

② Tulis switch, lalu tampilkan "Putar offline" di cabang premium.

③ Di bawahnya, tambahkan cabang standard yang menampilkan "Kualitas HD" dan cabang free yang menampilkan "Streaming video", tanpa menulis break.

④ Tambahkan case supaya trial menjalankan kode yang sama dengan free.