Masukkan Password
20 Pernyataan Kondisional: Switch
Kita bahas switch statement dari dasar sampai bagian yang sering bikin bingung, terutama break, default, strict comparison, dan cara menggabungkan beberapa case.
1. Apa itu switch?
switch adalah salah satu conditional statement di JavaScript.
Fungsinya adalah:
Memilih kode mana yang harus dijalankan berdasarkan nilai tertentu.
Sebelumnya kita sudah belajar:
ifif...elseif...else if...else- ternary operator
switch bisa menjadi alternatif untuk kondisi yang bentuknya seperti:
if (day === 1) {
...
} else if (day === 2) {
...
} else if (day === 3) {
...
}
Kalau kondisinya hanya membandingkan satu nilai dengan banyak kemungkinan nilai, switch sering lebih rapi.
2. Contoh masalah yang akan kita selesaikan
Misalnya kita menentukan hari berdasarkan angka:
0 = Sunday
1 = Monday
2 = Tuesday
3 = Wednesday
4 = Thursday
5 = Friday
6 = Saturday
User memasukkan angka 4.
Kita ingin menghasilkan:
Today is Thursday
Dengan if...else if, kita bisa menulis:
let day = 4;
if (day === 1) {
console.log("Today is Monday");
} else if (day === 2) {
console.log("Today is Tuesday");
} else if (day === 3) {
console.log("Today is Wednesday");
} else if (day === 4) {
console.log("Today is Thursday");
} else if (day === 5) {
console.log("Today is Friday");
} else {
console.log("Today is weekend");
}
Ini bisa bekerja.
Tetapi kalau kemungkinan nilainya semakin banyak, kode bisa menjadi panjang.
switch memberikan cara yang lebih terstruktur.
3. Bentuk dasar switch
Struktur dasarnya:
switch (expression) {
case value1:
// kode
break;
case value2:
// kode
break;
case value3:
// kode
break;
default:
// kode default
}
Mari kita pecah.
switch (expression)
JavaScript akan mengambil nilai dari expression.
Kemudian JavaScript mencari:
“Apakah ada
caseyang nilainya sama dengan hasil expression ini?”
4. Contoh sederhana
Misalnya:
let day = 4;
switch (day) {
case 1:
console.log("Today is Monday");
break;
case 2:
console.log("Today is Tuesday");
break;
case 3:
console.log("Today is Wednesday");
break;
case 4:
console.log("Today is Thursday");
break;
case 5:
console.log("Today is Friday");
break;
default:
console.log("Today is weekend");
}
Karena:
day = 4
JavaScript akan mencari:
4 === 1 ❌
4 === 2 ❌
4 === 3 ❌
4 === 4 ✅
Maka:
console.log("Today is Thursday");
dijalankan.
Hasil:
Today is Thursday
5. Apa itu case?
Ini penting.
Pada:
case 1:
angka 1 bukan berarti “urutan case pertama”.
Ini adalah nilai yang ingin dibandingkan.
Misalnya:
case 1:
artinya:
“Jalankan kode ini kalau nilai
switchsama dengan1.”
Begitu juga:
case 2:
artinya:
“Jalankan kode ini kalau nilai
switchsama dengan2.”
Jadi:
switch (day) {
case 1:
...
case 2:
...
}
secara konsep seperti:
if (day === 1) {
...
} else if (day === 2) {
...
}
6. case tidak harus angka
Ini juga penting.
case bisa menggunakan berbagai macam nilai.
Contoh string:
let fruit = "apple";
switch (fruit) {
case "apple":
console.log("This is an apple");
break;
case "banana":
console.log("This is a banana");
break;
}
Bisa juga:
switch (color) {
case "red":
...
break;
case "blue":
...
break;
}
Jadi angka pada contoh sebelumnya hanya karena kita sedang merepresentasikan hari dengan angka.
7. Apa itu default?
default adalah semacam “kalau tidak ada yang cocok”.
Misalnya:
let day = 8;
switch (day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
case 3:
console.log("Wednesday");
break;
default:
console.log("Invalid day");
}
JavaScript mengecek:
8 === 1 ❌
8 === 2 ❌
8 === 3 ❌
Tidak ada yang cocok.
Maka:
default
dijalankan.
Output:
Invalid day
8. default mirip dengan else
Ini cara paling mudah mengingatnya:
if (...) {
...
} else {
...
}
kurang lebih setara dengan:
switch (...) {
case ...:
...
break;
default:
...
}
default berarti:
“Kalau tidak ada
caseyang cocok, lakukan ini.”
Biasanya default ditulis di bagian paling bawah.
9. Bagian PALING PENTING: break
Nah, ini salah satu konsep terpenting dari switch.
Perhatikan:
switch (day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
case 3:
console.log("Wednesday");
break;
}
Misalnya:
day = 2;
JavaScript menemukan:
case 2:
Kemudian menjalankan:
console.log("Tuesday");
Setelah itu:
break;
break memberitahu JavaScript:
“Sudah selesai. Keluar dari switch sekarang.”
10. Apa yang terjadi kalau tidak ada break?
Ini bagian yang sangat penting.
Misalnya:
let day = 3;
switch (day) {
case 1:
console.log("Monday");
case 2:
console.log("Tuesday");
case 3:
console.log("Wednesday");
case 4:
console.log("Thursday");
default:
console.log("Weekend");
}
Tidak ada break.
JavaScript menemukan:
case 3:
Kemudian:
console.log("Wednesday");
Tetapi karena tidak ada break, JavaScript tidak berhenti.
Dia terus menjalankan kode berikutnya:
Wednesday
Thursday
Weekend
Jadi outputnya:
Today is Wednesday
Today is Thursday
Today is weekend
11. Kenapa bisa begitu?
Ini disebut fall-through.
Artinya setelah JavaScript menemukan case yang cocok, dia akan masuk ke sana dan terus menjalankan kode setelahnya sampai menemukan break atau keluar dari switch.
Misalnya:
switch (day) {
case 1:
console.log("Monday");
case 2:
console.log("Tuesday");
case 3:
console.log("Wednesday");
break;
case 4:
console.log("Thursday");
break;
}
Kalau:
day = 1;
maka:
case 1 cocok
↓
"Monday"
↓
tidak ada break
↓
"Tuesday"
↓
tidak ada break
↓
"Wednesday"
↓
break
↓
keluar switch
Output:
Monday
Tuesday
Wednesday
12. Analogi break
Bayangkan kamu masuk ke sebuah gedung yang punya beberapa ruangan:
Case 1
Case 2
Case 3
Case 4
Case 5
Kamu mencari ruangan nomor 3.
Begitu sampai:
Case 3
kamu masuk.
Tetapi kalau tidak ada tanda:
“KELUAR”
kamu akan terus berjalan ke:
Case 4
Case 5
Nah, break adalah tanda:
🚪 “Keluar dari switch sekarang.”
Jadi:
case 3:
console.log("Wednesday");
break;
artinya:
Jalankan kode case 3, lalu keluar dari switch.
13. Kenapa break sangat penting?
Kalau tujuan kita adalah:
“Ketika menemukan case yang cocok, jalankan hanya kode case tersebut.”
maka biasanya kita menggunakan:
break;
Contoh:
switch (day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
case 3:
console.log("Wednesday");
break;
case 4:
console.log("Thursday");
break;
default:
console.log("Weekend");
}
Dengan break, hanya satu bagian yang dijalankan.
14. switch menggunakan strict equality
Ini juga sangat penting.
switch membandingkan case dengan expression menggunakan konsep strict equality, yaitu seperti:
===
Bukan:
==
Misalnya:
let day = 4;
switch (day) {
case 4:
console.log("Thursday");
break;
}
Ini cocok karena:
4 === 4
hasilnya:
true
15. Masalah prompt()
Nah, di sinilah contoh pada lecture menjadi menarik.
Kita punya:
let day = prompt("Enter weekday number");
Misalnya user mengetik:
4
Kelihatannya seperti angka.
Tetapi prompt() mengembalikan String.
Jadi sebenarnya:
day
berisi:
"4"
bukan:
4
Perhatikan perbedaannya:
"4" // String
4 // Number
16. Kenapa ini bermasalah di switch?
Misalnya:
let day = prompt("Enter weekday number");
switch (day) {
case 4:
console.log("Thursday");
break;
default:
console.log("Weekend");
}
User memasukkan:
4
Tetapi:
day
berisi:
"4"
Sedangkan:
case 4:
berisi:
4
Maka perbandingannya secara konsep:
"4" === 4
Hasil:
false
Karena tipe datanya berbeda.
"4" → String
4 → Number
Akibatnya:
default
yang dijalankan.
17. Cara memperbaikinya
Kita harus mengubah hasil prompt() dari String menjadi Number.
Salah satu cara yang digunakan di lecture:
let day = +prompt("Enter weekday number");
Tanda + di depan adalah unary plus.
Fungsinya di sini adalah mengubah nilai menjadi Number.
Misalnya:
+"4"
hasilnya:
4
Sehingga:
let day = +prompt("Enter weekday number");
akan membuat:
User mengetik "4"
↓
prompt() menghasilkan "4" (String)
↓
+ mengubahnya menjadi 4
↓
day = 4 (Number)
Sekarang:
case 4:
cocok.
Karena:
4 === 4
→ true.
18. Alternatif yang lebih eksplisit
Selain:
let day = +prompt("Enter weekday number");
kita juga bisa menulis:
let day = Number(prompt("Enter weekday number"));
Menurut saya, untuk pemula ini justru lebih mudah dibaca:
let day = Number(prompt("Enter weekday number"));
Karena langsung terlihat:
“hasil prompt akan dikonversi menjadi Number.”
19. Contoh lengkap
Misalnya kita ingin:
0 = Sunday
1-5 = Weekday
6 = Saturday
Kita bisa menulis:
let day = Number(prompt("Enter weekday number"));
switch (day) {
case 1:
case 2:
case 3:
case 4:
case 5:
console.log("Today is a weekday");
break;
case 0:
case 6:
console.log("Today is weekend");
break;
default:
console.log("Weekday number is not correct");
}
Nah, di sini ada konsep baru yang sangat bagus.
20. Beberapa case bisa menggunakan kode yang sama
Perhatikan:
case 1:
case 2:
case 3:
case 4:
case 5:
console.log("Today is a weekday");
break;
Tidak ada kode setelah:
case 1:
Tidak ada juga setelah:
case 2:
dan seterusnya.
Kenapa?
Karena kita sengaja membuat beberapa case menuju kode yang sama.
Artinya:
case 1 ─┐
case 2 ─┤
case 3 ─┤
case 4 ─┤──> "Today is a weekday"
case 5 ─┘
21. Bagaimana cara kerja multiple case?
Misalnya:
day = 4;
JavaScript mencari:
case 1 ❌
case 2 ❌
case 3 ❌
case 4 ✅
Kemudian dia menjalankan kode setelah case 4:
console.log("Today is a weekday");
Lalu:
break;
Keluar dari switch.
22. case 0 dan case 6
Kita juga bisa melakukan hal yang sama:
case 0:
case 6:
console.log("Today is weekend");
break;
Artinya:
Kalau
dayadalah0ATAU6, jalankan kode yang sama.
Visualisasinya:
case 0 ─┐
├──> "Today is weekend"
case 6 ─┘
Ini sangat berguna ketika beberapa nilai memiliki perlakuan yang sama.
23. Contoh hasil program
Misalnya:
let day = 2;
Maka:
case 1 ❌
case 2 ✅
case 3
case 4
case 5
Masuk ke kode weekday:
Today is a weekday
Kalau:
day = 6;
Maka:
case 0 ❌
case 6 ✅
Output:
Today is weekend
Kalau:
day = 8;
Tidak ada case yang cocok:
case 1 ❌
case 2 ❌
case 3 ❌
case 4 ❌
case 5 ❌
case 0 ❌
case 6 ❌
Maka:
default
Output:
Weekday number is not correct
24. Kenapa default tidak perlu break?
Biasanya default diletakkan paling akhir:
default:
console.log("Invalid day");
Karena setelah itu memang tidak ada kode case lagi.
Jadi:
break;
di default biasanya tidak diperlukan.
Walaupun secara teknis kita bisa menulis:
default:
console.log("Invalid day");
break;
tetapi kalau default benar-benar berada di akhir, break tersebut tidak punya manfaat praktis.
25. Urutan kerja switch
Coba hafalkan alur berikut:
switch(expression)
↓
ambil nilai expression
↓
bandingkan dengan case
↓
apakah cocok?
↙ ↘
tidak ya
↓ ↓
case berikut jalankan kode
↓
break?
↙ ↘
ya tidak
↓ ↓
keluar switch lanjut
Kalau tidak ada case yang cocok:
tidak ada case cocok
↓
default
26. switch vs if...else if
Sekarang kita bandingkan.
Menggunakan if...else if
if (day === 1) {
console.log("Monday");
} else if (day === 2) {
console.log("Tuesday");
} else if (day === 3) {
console.log("Wednesday");
} else if (day === 4) {
console.log("Thursday");
} else {
console.log("Weekend");
}
Menggunakan switch
switch (day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
case 3:
console.log("Wednesday");
break;
case 4:
console.log("Thursday");
break;
default:
console.log("Weekend");
}
Keduanya bisa menghasilkan keputusan yang sama.
27. Kapan menggunakan switch?
switch cocok ketika:
Kita punya satu nilai dan ingin membandingkannya dengan banyak kemungkinan nilai.
Misalnya:
switch (role) {
case "admin":
...
break;
case "editor":
...
break;
case "user":
...
break;
default:
...
}
Atau:
switch (status) {
case "pending":
...
break;
case "success":
...
break;
case "failed":
...
break;
}
Atau:
switch (menu) {
case 1:
...
break;
case 2:
...
break;
case 3:
...
break;
}
28. Kapan lebih baik if...else?
Kalau kondisinya lebih kompleks, if...else biasanya lebih cocok.
Contohnya:
if (age >= 18 && hasId) {
...
} else if (age >= 13) {
...
} else {
...
}
Karena kita sedang memeriksa kondisi/aturan, bukan sekadar mencocokkan satu nilai.
Contoh lain:
if (score >= 90) {
...
} else if (score >= 80) {
...
} else if (score >= 70) {
...
}
Ini lebih natural menggunakan if...else if.
29. Perbedaan penting dengan if
Ini bagus untuk kamu pahami sejak sekarang.
if biasanya bertanya:
“Apakah kondisi ini benar?”
Contoh:
if (age >= 18)
Sedangkan switch lebih seperti:
“Nilai ini termasuk yang mana?”
Contoh:
switch (day)
Kemudian:
case 1:
case 2:
case 3:
...
Jadi mental modelnya:
if
↓
Apakah kondisi X benar?
switch
↓
Nilai ini cocok dengan case yang mana?
30. switch menggunakan ===, bukan ==
Ini wajib diingat.
Misalnya:
let value = "1";
switch (value) {
case 1:
console.log("Number 1");
break;
case "1":
console.log("String 1");
break;
}
Yang cocok adalah:
case "1"
karena:
"1" === "1" // true
Sedangkan:
"1" === 1 // false
Jadi tipe data juga harus sama.
31. Hubungannya dengan materi sebelumnya
Ini sebenarnya menggabungkan beberapa materi yang sudah kamu pelajari.
Misalnya:
prompt()
let day = prompt("Enter day");
Kamu sudah tahu bahwa hasil prompt() adalah:
String
Type conversion
Kemudian:
let day = Number(prompt("Enter day"));
Kamu menggunakan pengetahuan tentang type conversion.
Strict equality
Kemudian switch melakukan perbandingan secara strict:
day === caseValue
Ini menghubungkan dengan materi:
===
yang sudah kita pelajari.
break
Kemudian ada break yang mengatur agar eksekusi keluar dari switch.
Jadi lecture ini sebenarnya menggabungkan banyak konsep sebelumnya.
32. Contoh program lengkap + penjelasan
let day = Number(prompt("Enter weekday number"));
switch (day) {
case 1:
case 2:
case 3:
case 4:
case 5:
console.log("Today is a weekday");
break;
case 0:
case 6:
console.log("Today is weekend");
break;
default:
console.log("Weekday number is not correct");
}
Misalnya user memasukkan:
4
Langkah 1
prompt() menghasilkan:
"4"
Langkah 2
Number() mengubahnya:
4
Langkah 3
Masuk ke:
switch (day)
Jadi:
switch (4)
Langkah 4
JavaScript mencari case:
case 1 ❌
case 2 ❌
case 3 ❌
case 4 ✅
Langkah 5
Menjalankan:
console.log("Today is a weekday");
Langkah 6
Menemukan:
break;
Langkah 7
Keluar dari switch.
Output:
Today is a weekday
33. Jebakan paling umum
Jebakan 1 — Lupa break
case 1:
console.log("Monday");
case 2:
console.log("Tuesday");
Ini bisa menyebabkan kedua kode dijalankan.
Kalau memang hanya ingin satu case:
case 1:
console.log("Monday");
break;
Jebakan 2 — Lupa prompt() menghasilkan String
let day = prompt("Enter day");
switch (day) {
case 1:
...
}
User memasukkan 1, tetapi sebenarnya:
day === "1"
bukan:
day === 1
Lebih aman:
let day = Number(prompt("Enter day"));
Jebakan 3 — Mengira case 1 berarti urutan pertama
Tidak.
case 1:
berarti:
cocokkan dengan nilai
1.
Bukan:
case nomor satu.
Jebakan 4 — Mengira switch hanya bisa angka
Tidak.
Bisa string:
switch (username) {
case "John":
...
break;
case "Mark":
...
break;
}
Bisa boolean juga secara sintaksis, walaupun untuk kasus boolean biasanya if lebih natural.
34. Analogi paling sederhana
Bayangkan kamu punya mesin pemilah paket.
Ada paket dengan label:
1
2
3
4
5
Kamu memasukkan satu paket dengan label 3.
Mesin:
Apakah 3?
↓
case 1 → bukan
↓
case 2 → bukan
↓
case 3 → YA!
↓
jalankan instruksi case 3
↓
BREAK → berhenti
Kalau tidak ada break:
case 3 → YA!
↓
jalankan case 3
↓
lanjut case 4
↓
jalankan case 4
↓
lanjut case 5
↓
jalankan case 5
Itulah fall-through.
35. Cheat sheet
Struktur dasar
switch (expression) {
case value1:
// code
break;
case value2:
// code
break;
default:
// code
}
Cara membacanya
switch(expression)
↓
nilai expression apa?
↓
cocok dengan case mana?
↓
jalankan case tersebut
↓
break
↓
keluar
default
default:
= tidak ada case yang cocok.
break
break;
= keluar dari switch.
Multiple case
case 1:
case 2:
case 3:
console.log("Same action");
break;
= 1, 2, atau 3 melakukan aksi yang sama.
Strict comparison
Secara konsep:
switch (value) {
case 1:
...
}
mencocokkan seperti:
value === 1
Jadi:
"1" !== 1
36. Inti yang paling penting
Kalau kamu hanya ingin mengingat 7 hal dari lecture ini, ingat ini:
switchadalah conditional statement untuk memilih berdasarkan sebuah nilai.caseberisi kemungkinan nilai yang ingin dicocokkan.defaultdijalankan jika tidak ada case yang cocok.breakmenghentikan eksekusi dan keluar dariswitch.- Tanpa
break, bisa terjadi fall-through: kode case berikutnya ikut dijalankan. switchmenggunakan strict comparison (===), jadi nilai dan tipe data harus cocok.- Beberapa
casebisa digabung untuk menjalankan kode yang sama.
Mental model paling gampang:
switch = "Nilai ini masuk kategori yang mana?"
case = "Kalau nilainya ini..."
break = "Sudah, keluar."
default = "Kalau tidak ada yang cocok..."
Dan satu hubungan yang sangat penting dengan materi sebelumnya:
prompt()
↓
hasilnya String
↓
Number(...)
↓
hasilnya Number
↓
switch
↓
dibandingkan secara strict (===)
↓
case yang cocok
↓
break
Kalau alur ini sudah kamu pahami, konsep switch sebenarnya sudah cukup kuat.