Table of Contents
It is recommended to use a switch instead of multiple if…else statements.
The code will be simpler and clearer.
How Switch Statement will work?
- The switch expression is evaluated once.
- The value of the expression is compared with the values of each case.
- If find a match, the associated block of code is executed.
- If there is no match, the default code block is executed.
let num2 = 5; switch (num2) { case 0: console.log("Number is 0"); break; case 10: console.log("Number is 10"); break; case 100: console.log("Number is 100"); break; default: console.log("I don't know the number"); } //I don't know the number
Switch statement example for greater-than/less-than
let num1 = 5; switch (true) { case (num1 < 5): console.log("Number is very low"); break; case (num1 < 10): console.log("Number is low"); break; case (num1 > 100): console.log("Number is high"); break; default: console.log("Number is medium") } //Number is low
Where to place the “default” statement?
The JavaScript convention is to place the “Default” statement after all other “case” statements, but the default is not required to be the last clause.
Multiple case statements
If the expression matches any case, then the statements are executed.
let num3 = 5; switch (num3) { case 0: case 5: case 6: console.log("Number is low"); break; case 100: console.log("Number is high"); break; default: console.log("I don't know the number"); } //Number is low
What happens if You forgot a break?
If you forget a break then the script will run from the case where the criterion is met and will run the cases after that regardless if a criterion was met. Read more here about the switch statement.
let num4 = 100; switch (num4) { case 0: case 5: case 6: console.log("Number is low"); break; case 100: console.log("Number is high"); default: console.log("I don't know the number"); } //Number is high //I don't know the number
Strict Comparison
Switch cases use strict comparison (===).
That means the values must be of the same type to match.
let num5 = 100; switch (num5) { case 0: case 5: case 6: console.log("Number is low"); break; case "100": console.log("Number is high"); default: console.log("I don't know the number"); } I don't know the number
Block level scope
The switch statement is a block, but each case statement is not a block.
If you want to make a case statement a block, you have to wrap it with braces.
If you try the code below you will get the error: SyntaxError: Identifier ‘message’ has already been declared
let num6 = 5; switch (true) { case (num6 < 5): let message = "Number is very low" console.log(message); break; case (num6 < 10): let message = "Number is low" console.log(message); break; case (num6 > 100): let message = "Number is high" console.log(message); break; default: console.log("Number is medium") }
The solution, in this case, is to place each case statement in its own block purpose, as below:
let num7 = 5; switch (true) { case (num7 < 5): { let message = "Number is very low" console.log(message); break; } case (num7 < 10): { let message = "Number is low" console.log(message); break; } case (num7 > 100): { let message = "Number is high" console.log(message); break; } default: console.log("Number is medium") } //Number is low
Any variable declared within that block is only visible within the block, and is released once the block end.
Hello there!
I hope you find this post useful!I'm Mihai, a programmer and online marketing specialist, very passionate about everything that means online marketing, focused on eCommerce.
If you have a collaboration proposal or need helps with your projects feel free to contact me. I will always be glad to help you!