Javascript Switch Statement – How it Works and How to Use it

Javascript Switch Statement – How it Works and How to Use it

blog.alexdevero.com blog.alexdevero.com3 weeks ago in #Dev Love26

Switch statement is one of the oldest features of JavaScript. Yet, it is not used as often as if…else. This is unfortunate. Switch statement can sometimes do a better job and make your code more readable. This tutorial will teach you what JavaScript switch statement is, how to use it and when. Introduction to switch statement Every JavaScript switch statement must have three things in order to work. The first thing is the switch keyword. Every switch statement has to start with this keyword. The second thing is an expression you want to compare with case value. You will learn more about case blocks in “Case blocks” section. The expression goes between the parentheses that follow after the switch keyword. What follows next are curly braces with block of code. This block of code is the body of a switch statement. // Switch statement syntax switch (expression) { // body with block of code } The case block JavaScript switch statement works in a similar way to if….else statement. In case of if….else, there is some condition and you “test” if that condition is either true or false. Then, you can execute code specific for each boolean value, or one of them. Switch statement uses different syntax, but the result is the same. What JavaScript switch statement does is it operates with two parts. The first one is the expression you want to check. The second part is a case block. This, the case block, is also the third thing you need to make switch work. Every case block you add to a switch statement should have some value. A bit how it works. When you execute a switch statement, it will do two things. First, it will take the expression you passed in parentheses, that follow after the switch keyword. Second, it will compare this expression with values you specified for each statement. Now, let’s talk about the case blocks. A case block consists of two parts. First, there is the case keyword. This keyword defines a case block. This keyword is then followed by some value, colons and code you want to execute if switch expression matches the value a case. This can be a little bit confusing. Case blocks don’t use curly braces. There are only colons at the end of the line. Then, on the next line is the code you want to execute if the case is used. That is, if the switch expression matches the value you specified after the case keyword. When you want to add a new case block you add it to the body of switch statement, inside the curly braces. When it comes to case blocks, there is no limit to how many of them you can use. You can add as many case blocks as you want. // Switch statement with one case block switch (expression) { case value: // Do something if ‘value’ matches the ‘expression’ break // Stop the execution of switch statement } // Switch statement with multiple case blocks switch (expression) { case value: // Do something if ‘value’ matches the ‘expression’ break // Stop the execution of switch statement case firstDifferentValue: // Do something if ‘firstDifferentValue’ matches the ‘expression’ break // Stop the execution of switch statement case secondDifferentValue: // Do something if ‘secondDifferentValue’ matches the ‘expression’ break // Stop the execution of switch statement case thirdDifferentValue: // Do something if ‘thirdDifferentValue’ matches the ‘expression’ break // Stop the execution of switch statement } // Example with calendar // Create expression to check const today = ‘Wednesday’ // Create a switch statement // and…

Like to keep reading?

This article first appeared on blog.alexdevero.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply