Switch Case JavaScript

switch statement bisa menjadi alternatif percabangan if yang memiliki kondisi sederhana.

Sama seperti if, switch merupakan percabangan yang digunakan untuk melakukan tindakan yang berbeda berdasarkan kondisi yang berbeda.

Tapi, dalam kondisi tertentu switch bisa menjadi pilihan yang tepat, kode yang kita tulis bisa menjadi lebih mudah dibaca dan to the point.

Mari kita pelajari lebih lanjut agar kita bisa menggunakannya di tempat yang tepat.

Berikut topik yang akan kita bahas seputar switch…case.

Sintaks :

switch (ekspresi) {
  case value1:
    statement1;
    break;
  case value2:
    statement2;
    break;
  case valueN:
    statementN;
    break;
  default:
    statementDefault;
    break;
}

• ekspresi: nilai yang akan dibandingkan dengan nilai case.
• value: nilai yang akan dibandingkan dengan ekspresi, jika cocok maka statement yang ada di dalam case terkait dieksekusi sampai break lalu keluar dari switch statement.
• default: statement Default akan dieksekusi jika tidak ada nilai case yang cocok dengan ekspresi.

Kata kunci default dan break bersifat opsional, umumnya ditulis kecuali di akhir.

Mari kita gunakan contoh agar lebih mudah dipahami.

Contoh Switch Case

Misalnya kita ingin mengkonversi hari dalam angka ke hari dalam huruf.

Jadi, 1 adalah senin, 2 selasa dan seterusnya sampai minggu.

Maka kodenya sebagai berikut :

const hari = 2;


switch (hari) {
  case 1:
    console.log('senin');
    break;
  case 2:
    console.log('selasa');
    break;
  case 3:
    console.log('rabu');
    break;
  case 4:
    console.log('kamis');
    break;
  case 5:
    console.log('jumat');
    break;
  case 6:
    console.log('sabtu');
    break;
  case 7:
    console.log('minggu');
    break;
  default:
    console.log('Maaf, harus angka 1 - 7');
}

Begini cara kerjanya:

Pertama, karena kita menggunakan variabel hari sebagai ekspresi switch ((hari)), maka nilai variabel inilah yang akan dibandingkan dengan nilai yang ditentukan pada setiap case.

Kedua, dimulai dari case pertama yang bernilai 1, apakah 2 sama dengan 1 (2 === 1), karena hasilnya false, maka statement pada case tersebut tidak dieksekusi.

Ketiga, JavaScript kemudian membandingkan dengan nilai case kedua yang bernilai 2, 2 === 2 menghasilkan nilai true, oleh karena itu console.log(‘selasa’); dieksekusi.

Karena statement diakhiri kata kunci break, JavaScript akan keluar dari blok switch, artinya case yang ada di bawahnya tidak diperiksa.

Jadi, setiap nilai case akan dibandingkan dengan ekspresi dari atas ke bawah.

Bagaimana dengan statement default?

statement default hanya dieksekusi jika semua case tidak sesuai dengan ekspresi, mirip seperti blok else pada percabangan if.

Ekspresi Tidak Dikonversi ke Boolean

Berbeda dengan percabangan if, ekspresi switch tidak dikonversi ke nilai truthy maupun falsy.

Oleh karena itu, selama switch memiliki ekspresi, kode yang ada di dalamnya akan dieksekusi.

Kita tidak bisa membuat switch statement tanpa ekspresi, karena ini yang akan dibandingkan dengan case.

Contoh kode di bawah kita menggunakan false sebagai ekspresi, tapi hello world tetap di tampilkan ke console.

switch (false) {
  case 1:
    console.log("1");
    break;
  default:
    console.log("hello world");
    break;
}


// output: hello world

Ekspresi dan case Dibandingkan dengan strict equality operator (===)

Ekspresi dan nilai pada case dibandingkan menggunakan strict equality operator (===).

Misalnya, jika ekspresi bernilai ‘1’ (string) dan case bernilai 1 (angka), statement dalam case tidak akan dieksekusi.

Lihat contoh berikut.

const hari = '1';


switch (hari) {
  case 1:
  console.log ('1');
  break;
  default:
    console.log('hello world');
    break;
}


// output: hello world

Statement tidak dieksekusi karena 1 (angka) tidak sama dengan ‘1’ (string).

Kata Kunci break

Kata kunci break tidak wajib ditulis.

Mari kita lihat seperti apa perilakunya jika dihilangkan.

Perilaku break bisa kita manfaatkan untuk membuat beberapa case satu statement.

Apa yang Terjadi Jika Lupa menulis break?

Karena bersifat opsional, lantas apa yang terjadi jika kita lupa atau dengan sengaja menghilangkan kata kunci break?

Jawabannya, JavaScript akan mengeksekusi semua statement yang tulis setelah kondisi ekspresi true termasuk dalam case lain terlepas dari apakah nilai case sama dengan ekspresi atau tidak, sampai menemukan break atau akhir blok switch.

const hari = 2;


switch (hari) {
  case 1:
    console.log("senin");
    break;
  case 2:
    console.log("selasa");
  case 3:
    console.log("rabu");
    break;
  case 4:
    console.log("kamis");
    break;
  default:
    console.log("Angka yang kalian masukkan salah");
    break;
}


/** output:
 * selasa
 * rabu
 */

Lihat kode di atas, statement pada case 2, dan case 3 dieksekusi karena kita tidak menulis break.

Baru keluar di akhir statement case 3 karena di sana ada kata kunci break. Coba kalian ubah kode diatas tadi dengan variabel hari menjadi 1 maka hanya statement pada case 1 saja yang akan dieksekusi karena ada break disana.

Multi-case untuk Satu Operasi

Dengan menggunakan switch kita juga bisa membuat satu statement atau operasi untuk beberapa case, memanfaatkan perilaku break yang sudah dibahas sebelumnya.

Misalnya, katakanlah kita ingin mengelompokkan hari berdasarkan hari kerja (senin – jumat) dan libur (sabtu – minggu).

const hari = "rabu";


switch (hari) {
  case "senin":
  case "selasa":
  case "rabu":
  case "kamis":
  case "jumat":
    console.log("hari kerja");
    break;
  case "sabtu":
  case "minggu":
    console.log("hari libur");
    break;
  default:
    console.log("Maaf, hari tidak diketahui");
    break;
}
// output: hari kerja

Lihat kode diatas, kita tidak perlu membuat statement yang sama berulang-ulang untuk masing-masing case jika setiap case menggunakan statement yang sama.

default Dapat Ditulis Di Antara case

Blok default dapat ditempatkan diantara case tidak harus selalu diakhir, umumnya memang di akhir.Tapi, default akan selalu dieksekusi hanya ketika tidak ada case yang cocok dengan ekspresi.

const hari = 3;


switch (hari) {
  case 1:
    console.log('senin');
    break;
  case 2:
    console.log('selasa');
    break;
  default:
    console.log('Maaf, saya tidak tau hari.');
    break;
  case 3:
    console.log('rabu');
    break;
}
// output: rabu

kalian tidak boleh menempatkan default diantara multi-case karena ini akan dieksekusi, kecuali memang itu perilaku yang kalian harapkan.

Lingkup Variabel

Di atas kita hanya menulis statement sederhana untuk menampilkan pesan ke console.

Sebetulnya kalian dapat menyisipkan kode yang lebih kompleks, termasuk membuat variabel.

Variabel yang dideklarasikan di dalam case akan memiliki lingkup blok, artinya dapat diakses di statement case mana saja.

Perhatikan kode dibawah, ini akan menghasilkan kesalahan karena dianggap mendeklarasikan ulang variabel const.

const hari = 2;


switch (hari) {
  case 1:
    const ucapan = `selamat hari senin`;
    console.log(ucapan);
    break;
  case 2:
    const ucapan = 'selamat hari selasa'; // SyntaxError: Identifier 'ucapan' has already been declared
    console.log(ucapan);
    break;
  default:
    console.log('Maaf, saya tidak tau hari.');
    break;
}

Solusinya, bungkus statement dengan kurung kurawal { … }.

const hari = 2;


switch (hari) {
  case 1: {
    const ucapan = `selamat hari senin`;
    console.log(ucapan);
    break;
  }
  case 2: {
    const ucapan = 'selamat hari selasa';
    console.log(ucapan);
    break;
  }
  default:
    console.log('Maaf, saya tidak tau hari.');
    break;
}


// output: selamat hari selasa

Demikian pembahasan kita kali ini tentang Switch \Case dalam JavaScript, jangan khawatir kita akan kembali melanjutkan pembahasan tentang JavaScript lainnya pada artikel selanjutnya. 

Dan untuk kalian yang berminat belajar lebih lanjut tentang pemrograman javascript dan bahasa pemrograman lainnya, silahkan kunjungi social media Xsis Academy untuk info lebih lanjut mengenai Bootcamp Xsis Academy atau instagram Xsis Academy.

Selain itu, temukan juga video tutorial ngoding dari Tim Trainer Xsis Academy pada channel ETG berikut ini Youtube Equine Technologies Group

——–

Penulis : Aulia Brahmantio Diaz – Webmaster Xsis Mitra Utama