Belajar Dasar Percabangan Switch Case JavaScript

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

Sama seperti if, switch merupakan percabangan yang digunkan 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
Contoh
Ekspresi Tidak Dikonversi ke Boolean
Ekspresi dan case Dibandingkan Secara Ketat (===)
Perilaku Kata Kunci break
1. Apa yang Terjadi Jika Lupa break?
2. Multi-case untuk Satu Operasi
default Dapat Ditulis Diantara case
Lingkup Variabel

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: statementDefault 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

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

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

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');
}

// output: selasa

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 dibawah kita menggunkaan false sebagai ekspresi, tapi hello world tetap di tampilkan ke console.

switch (false) {
  default:
    console.log('hello world');
    break;
}

// output: hello world

Ekspresi dan `case` Dibandingkan Secara Ketat `===`

Ekspresi dan nilai pada case dibandingkan menggunakan operator kesetaraan ketat (===).

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: // '1' === 1
    console.log('senin');
    break;
}

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

Perilaku 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 `break`?

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

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

const hari = 1;

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

/** output:
 * senin
 * selasa
 * rabu
 */

Lihat kode di atas, statement pada case 1, 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.

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 Diantara `case`

Blok default dapat ditempatkan diantara case tidak harus selalu diakhir, umumnya memang diakhir.

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

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

Lingkup Variabel

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

Sebetulnya Anda 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

Sintaks

Contoh

Ekspresi Tidak Dikonversi ke Boolean

Ekspresi dan case Dibandingkan Secara Ketat ===

Perilaku Kata Kunci break

Apa yang Terjadi Jika Lupa break?

Multi-case untuk Satu Operasi

default Dapat Ditulis Diantara case