Switch Case JavaScript: Cara Kerja, break, dan Kapan Pakai (vs if-else)
Switch case JavaScript membandingkan satu nilai ke banyak case pakai perbandingan ketat (===). Pelajari cara kerja break, fall-through, default, dan kapan pilih switch dibanding if-else-if.
Pembuat Hyper Sheets & BelajarWeb.dev
Statement switch di JavaScript membandingkan satu nilai ke beberapa kemungkinan (case) satu per satu, lalu menjalankan blok kode dari case yang cocok. Bayangkan seorang resepsionis hotel yang memegang satu kartu tamu: ia mencocokkan nomor kamar di kartu itu dengan daftar kamar, dan begitu ketemu yang pas, ia mengantarmu ke pintu yang benar. switch bekerja persis begitu, ia memeriksa satu variabel terhadap daftar label case, dan berhenti begitu menemukan yang cocok.
Di panduan ini kamu akan belajar switch case dari nol: cara membaca sintaksnya, kenapa break itu wajib kamu pahami, apa itu “fall-through” (jebakan pemula nomor satu), fungsi default, kapan sebaiknya pakai switch dan kapan justru if-else-if lebih tepat, sampai demo interaktif yang bisa langsung kamu klik-klik. Semua contoh memakai istilah dan komentar berbahasa Indonesia supaya gampang dicerna.
Apa Itu Switch Case?
switch adalah salah satu bentuk percabangan (pengambilan keputusan) di JavaScript. Bedanya dengan if-else, switch dirancang khusus untuk kasus di mana kamu membandingkan satu nilai yang sama terhadap banyak kemungkinan nilai tetap. Struktur dasarnya seperti ini:
switch (ekspresi) {
case nilai1:
// kode kalau ekspresi === nilai1
break
case nilai2:
// kode kalau ekspresi === nilai2
break
default:
// kode kalau tidak ada yang cocok
}Cara membacanya: JavaScript menghitung nilai ekspresi sekali, lalu membandingkannya ke setiap label case dari atas ke bawah. Begitu ada case yang nilainya sama persis, blok kode di bawahnya dijalankan sampai bertemu break. Kalau tidak ada satu pun case yang cocok, blok default yang jalan.
Mari lihat contoh nyata dengan sebuah variabel hari:
const hari = 'sabtu'
switch (hari) {
case 'senin':
console.log('Awal minggu, semangat kerja!')
break
case 'sabtu':
console.log('Sabtu ceria, waktunya libur!')
break
case 'minggu':
console.log('Minggu santai, istirahat dulu.')
break
default:
console.log('Hari tidak dikenal')
}
// Output: 'Sabtu ceria, waktunya libur!'Karena hari bernilai 'sabtu', JavaScript melompati case 'senin', cocok di case 'sabtu', menjalankan console.log di situ, lalu berhenti karena ada break.
break dan Fall-Through: Jebakan Pemula Nomor Satu
Inilah bagian terpenting dari switch. Kata kunci break berfungsi menghentikan eksekusi dan keluar dari blok switch. Kalau kamu lupa menulis break, JavaScript tidak berhenti di case yang cocok, ia terus “jatuh” (fall-through) menjalankan case di bawahnya, tanpa memeriksa lagi apakah nilainya cocok atau tidak.
Perhatikan contoh tanpa break ini:
const hari = 'senin'
switch (hari) {
case 'senin':
console.log('Awal minggu, semangat kerja!')
case 'sabtu':
console.log('Sabtu ceria, waktunya libur!')
case 'minggu':
console.log('Minggu santai, istirahat dulu.')
default:
console.log('Hari tidak dikenal')
}
// Output:
// 'Awal minggu, semangat kerja!'
// 'Sabtu ceria, waktunya libur!'
// 'Minggu santai, istirahat dulu.'
// 'Hari tidak dikenal'Meski hari hanya cocok di case 'senin', karena tidak ada break, eksekusi jatuh terus ke bawah dan menjalankan semua blok setelahnya, termasuk default. Ini hampir selalu bukan yang kamu inginkan, dan jadi sumber bug yang membingungkan karena kodenya “kelihatan benar”.
Coba Sendiri: Lihat Fall-Through Secara Visual
Teori saja belum tentu nempel. Coba demo di bawah ini: pilih sebuah nilai hari, lalu klik tombol untuk beralih antara dengan break dan tanpa break. Perhatikan bagaimana baris yang tereksekusi (hijau) hanya satu saat ada break, tapi “berjatuhan” ke bawah saat break dihapus.
Coba Sendiri
Output di console
Setelah bermain dengan demo di atas, kamu bisa memantapkan konsep percabangan secara lebih terstruktur lewat pelajaran kondisi interaktif di Hyper Sheets yang bisa langsung dikerjakan di browser tanpa perlu setup apa pun.
default: Jaring Pengaman untuk Nilai Tak Terduga
Blok default dijalankan ketika tidak ada satu pun case yang cocok dengan nilai yang diperiksa. Fungsinya mirip else pada if-else, sebagai jaring pengaman untuk menangani nilai yang tidak kamu antisipasi.
const menu = 'salad'
switch (menu) {
case 'nasi goreng':
console.log('Rp 25.000')
break
case 'mie ayam':
console.log('Rp 20.000')
break
default:
console.log('Menu tidak tersedia')
}
// Output: 'Menu tidak tersedia'Fall-Through yang Disengaja: Menumpuk case
Fall-through tidak selalu buruk, kadang justru berguna. Karena case yang tidak diberi break akan mengalir ke bawah, kamu bisa menumpuk beberapa label case kosong untuk menjalankan blok kode yang sama pada beberapa nilai sekaligus. Ini trik yang rapi dan sering dipakai:
const hari = 'minggu'
switch (hari) {
case 'sabtu':
case 'minggu':
console.log('Akhir pekan! Waktunya santai.')
break
default:
console.log('Hari kerja.')
}
// Output: 'Akhir pekan! Waktunya santai.'Di sini case 'sabtu' sengaja dibiarkan kosong tanpa break, sehingga baik 'sabtu' maupun 'minggu' sama-sama jatuh ke blok yang sama. Jauh lebih ringkas daripada menulis dua blok terpisah yang isinya identik.
Switch vs If-Else-If: Kapan Pakai yang Mana?
Pertanyaan yang paling sering muncul: kalau switch dan if-else-if sama-sama percabangan, kapan aku pakai yang mana? Jawabannya bergantung pada jenis kondisi yang kamu periksa. switch cocok ketika kamu membandingkan satu nilai ke banyak kemungkinan tetap; if-else-if lebih fleksibel untuk kondisi berupa rentang atau logika yang rumit.
| Aspek | switch |
if-else-if |
|---|---|---|
| Cocok untuk | Satu nilai vs banyak nilai tetap | Rentang, kondisi kompleks, banyak variabel |
| Jenis perbandingan | Hanya === (nilai persis) |
Bebas: >, <, &&, operator logika lain |
| Keterbacaan | Rapi saat opsi banyak & seragam | Rapi saat kondisi berbeda-beda |
| Contoh pas | Status pesanan, pilihan menu, nama hari | Nilai ujian (rentang), cek beberapa syarat |
Contoh kasus yang cocok untuk switch, membandingkan satu nilai tetap:
switch (statusPesanan) {
case 'diproses': console.log('Pesanan sedang disiapkan'); break
case 'dikirim': console.log('Pesanan dalam perjalanan'); break
case 'selesai': console.log('Pesanan sudah sampai'); break
default: console.log('Status tidak dikenal')
}Contoh kasus yang lebih cocok untuk if-else-if, karena membandingkan rentang, bukan nilai persis:
if (nilai >= 90) {
console.log('A')
} else if (nilai >= 80) {
console.log('B')
} else if (nilai >= 70) {
console.log('C')
} else {
console.log('Perlu belajar lagi')
}Kode nilai ujian di atas tidak bisa ditulis rapi dengan switch, karena switch hanya bisa mencocokkan nilai persis lewat ===, bukan rentang seperti “lebih besar atau sama dengan 90”. Sebaliknya, deretan if-else-if yang isinya cuma membandingkan satu variabel ke banyak nilai tetap akan terasa bertele-tele dibanding switch. Kalau syaratmu sederhana dan cuma dua kemungkinan, bahkan operator ternary bisa lebih ringkas lagi.
Contoh Praktis: switch di Dunia Nyata
Salah satu pemakaian switch yang paling sering kamu temui adalah memetakan sebuah kode atau status ke pesan yang ramah bagi pengguna:
function pesanStatus(kode) {
switch (kode) {
case 200:
return 'Berhasil!'
case 404:
return 'Halaman tidak ditemukan'
case 500:
return 'Server sedang bermasalah'
default:
return 'Terjadi kesalahan tak terduga'
}
}
console.log(pesanStatus(404)) // 'Halaman tidak ditemukan'Perhatikan bahwa di dalam fungsi, kamu bisa memakai return alih-alih break, karena return otomatis menghentikan seluruh fungsi, eksekusi tidak akan jatuh ke case berikutnya. Ini pola yang sangat umum dan bersih. Kalau kamu mau memperkuat dasar percabangan dan perulangan yang sering dipakai bareng switch, lanjutkan ke perulangan JavaScript setelah ini.
Apa yang terjadi kalau kamu lupa menulis break di sebuah case yang cocok?
FAQ Seputar Switch Case JavaScript
Apa perbedaan switch dan if-else di JavaScript?
switch dirancang untuk membandingkan satu nilai ke banyak kemungkinan nilai tetap memakai perbandingan ketat (===), sehingga lebih rapi dibaca saat opsinya banyak dan seragam. if-else-if lebih fleksibel karena bisa memeriksa rentang (>, <), menggabungkan beberapa kondisi (&&, ||), atau membandingkan variabel yang berbeda-beda. Aturan praktisnya: pakai switch untuk “satu nilai, banyak opsi tetap”, pakai if-else untuk kondisi yang lebih kompleks.
Apa fungsi break pada switch?
break menghentikan eksekusi dan keluar dari blok switch begitu satu case selesai dijalankan. Tanpa break, eksekusi akan “jatuh” (fall-through) ke case berikutnya tanpa mengecek nilainya lagi. Jadi break memastikan hanya blok dari case yang cocok yang dijalankan.
Apakah default wajib ada di switch?
Tidak wajib. Kalau default tidak ditulis dan tidak ada case yang cocok, switch cukup tidak melakukan apa-apa. Namun menambahkan default adalah kebiasaan baik sebagai jaring pengaman untuk menangani nilai tak terduga. Konvensinya, default diletakkan paling bawah.
Apakah switch memakai == atau ===?
switch selalu memakai strict equality (===), yaitu membandingkan nilai dan tipe sekaligus tanpa konversi otomatis. Karena itu case 5 tidak akan cocok dengan string '5'. Ini penting diingat supaya kamu tidak bingung saat sebuah case yang “terlihat cocok” ternyata terlewat.
Lanjut Belajar Percabangan
switch adalah alat yang tepat ketika kamu punya satu nilai dan banyak kemungkinan tetap, status pesanan, nama hari, kode respons, pilihan menu. Kuncinya cuma dua: ingat break di setiap case, dan pahami bahwa fall-through bisa jadi bug atau fitur tergantung apakah kamu menyengajanya.
Cara terbaik supaya konsep ini benar-benar nempel adalah mempraktikkannya langsung. Kerjakan pelajaran kondisi interaktif di Hyper Sheets yang membahas if, else, dan switch lengkap dengan latihan bertahap yang langsung bisa kamu jalankan di browser, tanpa install apa pun. Selamat mencoba, dan jangan takut bereksperimen dengan menghapus break untuk melihat sendiri apa yang terjadi!