Switch Case JavaScript: Case, Break, dan Fallthrough

Switch memilih satu cabang dari banyak pilihan

switch adalah pernyataan alur kontrol untuk saat kamu membandingkan satu nilai dengan beberapa pilihan yang sudah diketahui. Rangkaian if/else if/else bisa melakukan tugas yang sama, tapi begitu kamu mengecek variabel yang sama tiga atau empat kali berturut-turut, switch lebih enak dibaca.

Bentuk dasarnya:

const day = "Wed";

switch (day) {
    case "Mon":
        console.log("Start of the week");
        break;
    case "Wed":
        console.log("Midweek");
        break;
    case "Fri":
        console.log("Almost there");
        break;
    default:
        console.log("Some other day");
}

Kalau dibaca dari atas ke bawah: JavaScript mengevaluasi day, membandingkannya dengan setiap label case, lalu menjalankan blok yang cocok. default menangkap apa pun yang tidak cocok, seperti else terakhir. Urutan membacanya adalah nilai → case → kode.

Bagaimana pencocokan sebenarnya bekerja

switch membandingkan dengan strict equality, yaitu operator ===. Tanpa konversi tipe, tanpa pencocokan longgar. case 1: akan cocok dengan angka 1 tapi tidak dengan string "1".

const code = "1";

switch (code) {
    case 1:
        console.log("number one");
        break;
    case "1":
        console.log("string one");
        break;
    default:
        console.log("no match");
}

Hanya case kedua yang cocok. Kalau kamu pernah heran kenapa switch-mu tidak terpicu, penyebab yang biasa adalah perbedaan string dan angka yang berasal dari input form atau parameter URL.

break yang menghentikan alurnya

Bagian inilah yang sering menjebak orang. Label case adalah target lompatan, bukan blok yang berdiri sendiri. Begitu eksekusi mendarat di case yang cocok, ia terus berjalan baris demi baris, langsung menembus label case berikutnya, sampai bertemu break, return, atau akhir switch.

Lihat apa yang terjadi tanpa break:

const role = "editor";

switch (role) {
    case "admin":
        console.log("full access");
    case "editor":
        console.log("can edit");
    case "viewer":
        console.log("can view");
    default:
        console.log("logged in");
}

Yang cocok adalah "editor", tapi kamu tetap mendapat can edit, can view, dan logged in. Itulah fallthrough: eksekusi jatuh ke setiap case berikutnya karena tidak ada yang menyuruhnya berhenti.

Tambahkan break, dan perilakunya jadi benar:

const role = "editor";

switch (role) {
    case "admin":
        console.log("full access");
        break;
    case "editor":
        console.log("can edit");
        break;
    case "viewer":
        console.log("can view");
        break;
    default:
        console.log("logged in");
}

Kebiasaan yang baik: setiap case diakhiri break, kecuali kamu memang menginginkan fallthrough.

Fallthrough yang disengaja untuk mengelompokkan

Fallthrough tidak selalu kesalahan. Menghilangkan break adalah cara rapi untuk mengatakan "semua case ini melakukan hal yang sama":

function daysIn(month, year) {
    switch (month) {
        case "Jan":
        case "Mar":
        case "May":
        case "Jul":
        case "Aug":
        case "Oct":
        case "Dec":
            return 31;
        case "Apr":
        case "Jun":
        case "Sep":
        case "Nov":
            return 30;
        case "Feb":
            return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0 ? 29 : 28;
        default:
            return 0;
    }
}

console.log(daysIn("Feb", 2024));
console.log(daysIn("Aug", 2025));

Label case kosong yang ditumpuk berbagi blok di bawahnya. Perhatikan bahwa tidak perlu break setelah return: fungsinya langsung keluar sepenuhnya. return di dalam switch melompati semua yang seharusnya menyusul.

Saat kamu memang ingin fallthrough di antara case yang tidak kosong, tinggalkan komentar supaya pembaca berikutnya tidak "memperbaikinya":

switch (event) {
    case "click":
        track("click");
        // fallthrough
    case "hover":
        highlight();
        break;
}

default tidak harus di akhir

Menurut kebiasaan, default ditaruh di paling bawah, dan di situlah kebanyakan pembaca mengharapkannya. Tapi secara teknis ia hanyalah label lain: ia cocok saat tidak ada case yang cocok, di mana pun posisinya. Kalau kamu menaruh default di tengah tanpa break, ia akan jatuh ke apa pun yang ada di bawahnya. Taruh di akhir, tutup dengan break (atau tidak, karena tidak ada lagi yang menyusul), dan dirimu di masa depan akan berterima kasih.

function describeStatus(code) {
    switch (code) {
        case 200:
        case 201:
            return "success";
        case 404:
            return "not found";
        case 500:
            return "server error";
        default:
            return "unknown";
    }
}

console.log(describeStatus(200));
console.log(describeStatus(404));
console.log(describeStatus(418));

Scope variabel di dalam case

Semua case berbagi satu block scope, yaitu seluruh switch. Mendeklarasikan let atau const dengan nama yang sama di dua case akan melempar error deklarasi ulang:

switch (x) {
    case 1:
        let msg = "one";
        break;
    case 2:
        let msg = "two";   // SyntaxError: Identifier 'msg' has already been declared
        break;
}

Solusinya adalah satu blok per case, dengan membungkus isinya dalam { }:

const x = 2;

switch (x) {
    case 1: {
        const msg = "one";
        console.log(msg);
        break;
    }
    case 2: {
        const msg = "two";
        console.log(msg);
        break;
    }
}

Sekarang setiap msg tinggal di scope-nya sendiri dan bentroknya hilang. Ini perlu diingat setiap kali sebuah case butuh logika lebih dari satu atau dua baris.

switch vs if/else

switch unggul saat kamu menguji satu nilai terhadap banyak pilihan tetap: kode HTTP, tipe action Redux, nama perintah, string yang mirip enum. Nilainya muncul sekali di atas, dan mata pembaca bisa memindai label case seperti daftar isi.

if/else lebih baik saat:

• Kamu membandingkan rentang (score >= 90, score >= 75).
• Kondisinya melibatkan variabel yang berbeda atau ekspresi boolean.
• Kamu ingin loose equality atau perbandingan khusus (switch selalu ===).

// Good fit for switch - one value, many discrete options.
function statusLabel(code) {
    switch (code) {
        case 200: return "OK";
        case 301: return "Moved";
        case 404: return "Not Found";
        case 500: return "Server Error";
        default:  return `Status ${code}`;
    }
}

// Better as if/else - ranges and mixed conditions.
function grade(score) {
    if (score >= 90) return "A";
    if (score >= 75) return "B";
    if (score >= 60) return "C";
    return "F";
}

console.log(statusLabel(404));
console.log(grade(82));

Alternatif modern yang umum untuk pola pertama adalah lookup object:

const labels = {
    200: "OK",
    301: "Moved",
    404: "Not Found",
    500: "Server Error",
};

function statusLabel(code) {
    return labels[code] ?? `Status ${code}`;
}

console.log(statusLabel(200));
console.log(statusLabel(418));

Tiga baris alih-alih switch sembilan baris. Saat case-nya murni pemetaan data tanpa logika sungguhan, object (atau Map) biasanya lebih mudah dibaca. Pakai switch saat setiap case melakukan pekerjaan sungguhan.

Berikutnya: for loop

switch menangani satu keputusan terhadap banyak pilihan. Bagian alur kontrol berikutnya adalah pengulangan, yaitu menjalankan blok kode yang sama berulang-ulang. Itulah gunanya loop for, yang dibahas berikutnya.