Introduction to JavaScript Switch Cases

In this short article, I will introduce you to JavaScript switch cases and how to use them with practical examples. This article will explain better with more practical examples to help you understand switch cases in depth. Prerequisites. Basic JavaScript knowledge Code editor Web Browser Your brain :) A statement can basically replace multiple checks in JavaScript. switch if It gives a more descriptive way to compare a value with multiple variants. The Switch Syntax The has one or more blocks and an optional default case. switch case switch(x) { case 'value1': // if (x === 'value1') //code here [break] case 'value2': // if (x === 'value2') //code here [break] default: //code here [break]} The value of is checked for strict equality to the value from the first (that is, ) then to the second ( ) and so on. x case value1 value2 If the equality is found, starts to execute the code starting from the corresponding , until the nearest (or until the end of ). switch case break switch If no case is matched then the code is executed (if it exists). default Some few real examples Simple Play & Pause Switch The statement can be used for multiple branches based on a number or string: switch switch (movie) { case 'play': playMovie(); break; case 'pause': pauseMovie(); break; default: doNothing();} If you don’t add a statement, the execution will "fall through" to the next level. It's essential that you deliberately label the fall through with a comment if you really meant it to aid debugging: break switch (movie) { case 'play': // fallthrough case 'pause': pauseMovie(); break; default: doNothing();} The default clause is optional. You can have expressions in both the switch part and the cases if you like; comparisons take place between the two using the operator: === switch (3 + 7) { case 5 + 5: correct(); break; default: neverhappens();} Simple Maths Calc Switch let average = 2 + 6;switch (average) { case 4: alert( 'Too small' ); break; case 8: alert( 'Exactly!' ); break; case 10: alert( 'Too large' ); break; default: alert( "Incorrect values!" );} Here the starts to compare from the first variant that is . The match fails. switch average case 4 Then . That’s a match, so the execution starts from until the nearest . 8 case 8 break If there is no **break** then the execution continues with the next **case** without any checks. Here is an example without : break let average = 2 + 6;switch (average) { case 4: alert( 'Too small' ); case 8: alert( 'Exactly!' ); case 10: alert( 'Too big' ); default: alert( "Incorrect values!" );} In the example above we’ll see sequential execution of three s: alert alert( 'Exactly!' );alert( 'Too big' );alert( "Incorrect values!" ); getDay() method switch case The method returns the weekday as a number between 0 and 6. getDay() Sunday=0, Monday=1, Tuesday=2 , Wednesday=3, Thursday=4, Friday=5, Saturday=6 This example uses the weekday number to calculate the weekday name: switch (new Date().getDay()) {case 0:day = "Sunday";break;case 1:day = "Monday";break;case 2:day = "Tuesday";break;case 3:day = "Wednesday";break;case 4:day = "Thursday";break;case 5:day = "Friday";break;case 6:day = "Saturday";} The result of day will be the current weekday in day format PS: This would change according to when you’re reading this article I wrote this artcle on 01/04/2019 which is a Friday, so the result would be: Friday The default Keyword The keyword specifies the code to run if there is no case match, more like an else statement: default switch (new Date().getDay()) {case 6:text = "Today is Saturday";break;case 0:text = "Today is Sunday";break;default:text = "Its not weekend yet!";} The result of text will be: Its not weekend yet! The case does not have to be the last case in a switch block: default switch (new Date().getDay()) {default:text = "Its not weekend yet!";break;case 6:text = "Today is Saturday";break;case 0:text = "Today is Sunday";} If default is not the last case in the switch block, remember to end the default case with a break. Conclusion There are so many practical examples of switch cases, you can head over to and run a quick search for more switch cases examples. google.com If this article helped you, show it by clapping, sharing or dropping some comments :) Thanks for reading! Check out my blog where I write articles on Web and Front-end Development. _Articles on Web & Frontend Development. ⚡️⚡️ All written by Bolaji Ayodeji. 🚀_bolajiayodeji.com Bolaji Ayodeji