switch

Kantin sekolah menomori menunya: M1 nasi goreng, M2 ayam geprek, M3 menu hemat, dan M4 menu hemat ukuran kecil. Ketika Budi memasukkan kode M2, program harus mencocokkan satu nilai ke daftar kemungkinan yang sudah pasti. Menulisnya sebagai rantai else if (kodeMenu === "M1"), else if (kodeMenu === "M2"), dan seterusnya sah-sah saja — tetapi kata === dan nama variabel yang sama berulang di setiap baris. JavaScript menyediakan struktur yang dirancang khusus untuk pola ini: switch.

Chapter ini membahas cara switch mencocokkan nilai, peran break sebagai pagar tiap case, dua trik yang sah: mengelompokkan case dan fall-through yang disengaja, lalu menutup dengan jebakan paling terkenal — perbandingan ketat yang membuat case 8 tidak pernah cocok dengan teks "8".

switch Membandingkan Satu Nilai dengan Daftar Case #

Bentuk dasarnya: expression di dalam switch (...) dievaluasi satu kali, lalu hasilnya dibandingkan berurutan dari atas ke bawah dengan nilai di tiap case. Case pertama yang cocok menjadi titik masuk: body-nya dijalankan sampai bertemu break, yang menghentikan seluruh switch. Bila tidak ada case yang cocok, blok default yang dijalankan. Posisi default bebas — boleh di bawah maupun di tengah — tetapi konvensi umum menaruhnya di akhir agar daftar case tetap terbaca sebagai daftar kemungkinan.

Untuk berkas contoh di bagian ini, peta pencocokannya bisa dirangkum sekali:

Ketiga pola itu ada dalam satu berkas contoh — switch dasar, fall-through terkendali, dan bukti perbandingan ketat:

// menu-kantin.js
// switch untuk memilih menu, fall-through terkendali, dan bukti perbandingan ketat ===.

// --- 1. switch dasar dengan break dan pengelompokan case ---
const kodeMenu = "M2";
switch (kodeMenu) {
  case "M1":
    console.log("Nasi goreng - Rp15000");
    break;
  case "M2":
    console.log("Ayam geprek - Rp17000");
    break;
  case "M3":
  case "M4": // pengelompokan: dua kode, satu aksi yang sama
    console.log("Menu hemat hari ini - Rp12000");
    break;
  default:
    console.log("Kode menu tidak dikenal");
}

// --- 2. fall-through terkendali: poin member kumulatif ---
const levelMember = 3;
let poin = 0;
switch (levelMember) {
  case 3:
    poin = poin + 100; // tanpa break, eksekusi jatuh ke case 2 (disengaja)
  case 2:
    poin = poin + 50; // jatuh lagi ke case 1
  case 1:
    poin = poin + 10;
    break; // break di sini menghentikan switch
  default:
    poin = 0;
}
console.log("Level member:", levelMember);
console.log("Poin terkumpul:", poin);

// --- 3. switch membandingkan dengan === ---
const nilaiDariForm = "8"; // nilai dari elemen HTML selalu bertipe string
switch (nilaiDariForm) {
  case 8:
    console.log("cocok dengan angka 8");
    break;
  case "8":
    console.log('cocok dengan teks "8"');
    break;
  default:
    console.log("tidak ada yang cocok");
}

Output yang Dihasilkan:

Ayam geprek - Rp17000
Level member: 3
Poin terkumpul: 160
cocok dengan teks "8"

Mari kita telaah apa yang terjadi pada baris-baris kode di atas:

1. Baris 6 (switch (kodeMenu)): engine mengevaluasi kodeMenu satu kali, menghasilkan "M2".
2. Baris 7–9 (case "M1": ...): "M2" === "M1" bernilai false, jadi case ini dan body-nya dilewati.
3. Baris 10–12 (case "M2":): perbandingan cocok. Engine menjalankan console.log di baris 11, lalu break di baris 12 menghentikan switch — keluaran pertama adalah Ayam geprek - Rp17000.
4. Baris 13–16 (case "M3": case "M4":): body case "M3" kosong sehingga eksekusi jatuh ke body milik case "M4". Inilah pengelompokan: dua nilai, satu aksi.
5. Baris 24–34 (switch levelMember): case 3 cocok, menambah 100, lalu karena tidak ada break, eksekusi jatuh ke case 2 (menambah 50) dan case 1 (menambah 10) sampai break. Total poin menjadi 160.
6. Baris 40–49 (switch nilaiDariForm): expression bernilai teks "8". case 8 tidak pernah cocok karena "8" === 8 bernilai false — inilah keluaran cocok dengan teks "8", bukan cocok dengan angka 8.

break: Pagar Akhir setiap Case #

Apa yang terjadi kalau break lupa ditulis? Eksekusi tidak berhenti di akhir body, melainkan jatuh ke body case berikutnya — perilaku yang disebut fall-through. Perhatikan bedanya:

const pilihan = 1;
switch (pilihan) {
  case 1:
    console.log("Satu"); // tanpa break: eksekusi jatuh ke case 2
  case 2:
    console.log("Dua");
    break;
}

Output yang Dihasilkan:

Satu
Dua

pilihan bernilai 1, tetapi kedua pesan ikut tercetak: setelah baris Satu, engine meneruskan eksekusi ke body case 2 tanpa memeriksa pilihan === 2 lagi. Kecuali disengaja, fall-through seperti ini adalah bug — dan merupakan kesalahan paling umum dalam penulisan switch.

Satu batasan yang menegaskan peran break: statement ini hanya bermakna di dalam switch atau loop. Menulisnya di luar keduanya — misalnya di dalam if yang tidak berada di loop manapun — membuat berkas ditolak saat dimuat dengan SyntaxError: Illegal break statement. break bukan perintah berhenti program; ia hanya menghentikan struktur pengulangan atau pencocokan tempat ia berada.

Fall-through yang Disengaja dan Pengelompokan Case #

Fall-through ternyata berguna dalam dua bentuk. Pertama, pengelompokan: body case yang kosong membuat beberapa nilai berbagi satu aksi, seperti case "M3": case "M4": yang sama-sama mencetak menu hemat. Kedua, akumulasi bertingkat: switch levelMember sengaja membiarkan eksekusi jatuh dari case 3 ke case 1 sehingga level tinggi mengumpulkan poin semua level di bawahnya — level 3 mendapat 100 + 50 + 10, level 2 mendapat 50 + 10, level 1 mendapat 10. Eksperimen kedua di berkas contoh menunjukkan jalur eksekusinya untuk tiap level:

Kedua pola sah selama niatnya terlihat jelas di kode.

Perbandingan Ketat: Jebakan “8” dan 8 #

switch tidak menggunakan ==; perbandingannya ketat dengan ===. Akibatnya, tipe yang berbeda tidak pernah cocok walau tampak sama. Bagian ketiga berkas contoh membuktikannya: case 8 diabaikan karena nilaiDariForm bertipe string, dan hanya case "8" yang cocok.

Jebakan ini nyata dalam pekerjaan sehari-hari: nilai yang dibaca dari elemen HTML, dari URLSearchParams, maupun dari argument terminal selalu bertipe string. Angka yang tampak sama perlu dikonversi lebih dulu — misalnya dengan Number(nilaiDariForm) — sebelum dicocokkan dengan case bertipe number.

Kapan switch Tepat Dipakai #

switch bersinar ketika satu nilai tunggal dicocokkan dengan daftar kemungkinan yang tetap: kode menu, pilihan dari dropdown, status yang kodenya sudah disepakati bersama. Pembandingnya selalu kesetaraan, bukan rentang — untuk syarat seperti >= 300000 atau gabungan dengan &&, rantai else if tetap pilihan yang lebih tepat.

Dua hal lain membuat switch nyaman dalam pekerjaan nyata. Nama variabel yang dicocokkan cukup ditulis satu kali di header, sehingga mengganti sumber nilai tidak perlu menyentuh tiap case. Daftar case yang berjajar vertikal juga mudah dipindai: menambah satu kemungkinan berarti menambah satu case, tanpa mengubah case lain — selama setiap break-nya tertata.

Bila kemungkinannya sangat banyak dan sering bertambah, section Objects dan Collections nanti menyediakan struktur data yang bisa menjadi “peta” pencocokan tanpa statement sama sekali. Untuk sekarang, switch adalah alat pencocokan nilai tunggal yang paling gamblang.

Ketika keputusan berbentuk “ulangi pekerjaan ini sebanyak N kali” atau “lakukan untuk setiap item”, switch tidak lagi memadai. Struktur berikutnya, for loop, dirancang untuk pekerjaan berulang dengan jumlah putaran yang sudah kita ketahui.

// menu-kantin.js
// switch untuk memilih menu, fall-through terkendali, dan bukti perbandingan ketat ===.

// --- 1. switch dasar dengan break dan pengelompokan case ---
const kodeMenu = "M2";
switch (kodeMenu) {
  case "M1":
    console.log("Nasi goreng - Rp15000");
    break;
  case "M2":
    console.log("Ayam geprek - Rp17000");
    break;
  case "M3":
  case "M4": // pengelompokan: dua kode, satu aksi yang sama
    console.log("Menu hemat hari ini - Rp12000");
    break;
  default:
    console.log("Kode menu tidak dikenal");
}

// --- 2. fall-through terkendali: poin member kumulatif ---
const levelMember = 3;
let poin = 0;
switch (levelMember) {
  case 3:
    poin = poin + 100; // tanpa break, eksekusi jatuh ke case 2 (disengaja)
  case 2:
    poin = poin + 50; // jatuh lagi ke case 1
  case 1:
    poin = poin + 10;
    break; // break di sini menghentikan switch
  default:
    poin = 0;
}
console.log("Level member:", levelMember);
console.log("Poin terkumpul:", poin);

// --- 3. switch membandingkan dengan === ---
const nilaiDariForm = "8"; // nilai dari elemen HTML selalu bertipe string
switch (nilaiDariForm) {
  case 8:
    console.log("cocok dengan angka 8");
    break;
  case "8":
    console.log('cocok dengan teks "8"');
    break;
  default:
    console.log("tidak ada yang cocok");
}