drink = 'beer'
switch(drink){
case 'beer':
case 'whiskey':
console.log('The drink is BEER or WHISKEY');
case 'juice':
console.log('The drink is JUICE');
default:
console.log('Nothing to drink');
}
drink = 'beer'
switch(drink){
case 'beer':
case 'whiskey':
console.log('The drink is BEER or WHISKEY');
case 'juice':
console.log('The drink is JUICE');
default:
console.log('Nothing to drink');
}For my code above, why do I get all three messages in the console? Can someone please explain? Without a break, I expected the case message and the default message to be printed, but why does the "juice" related message also appear in the console?
-
7
Switch statements in JS 'fall through' cases that don't have a
break. Quoting MDN: "Ifbreakis omitted, the program continues execution at the next statement in theswitchstatement." In your code, it matches the first case ('beer') and then 'falls through' each of the subsequent cases. – p.s.w.g Commented Feb 25, 2020 at 20:59 - 1 check this developer.mozilla/it/docs/Web/JavaScript/Reference/… – Alberto Commented Feb 25, 2020 at 20:59
- 1 @p.s.w.g i agree, but when the case 'juice': is not satisfied, still the console logs that message. Thats my question. Is it expected? – prabh Commented Feb 25, 2020 at 21:00
- 2 @prabh thats what it means by fall thru. – Daniel A. White Commented Feb 25, 2020 at 21:01
- 1 @DanielA.White sorry for my poor knowledge, i e from mainframe background and always coded in Natural programming language. We have Decide for first and decide for every condition statements there, But it always checks for condition before executing the logic. I thought it will fall thru the next Case to check if that condition is also matched and then only process the code. Didnt expect that Case will be ignored and just logic will be performed. – prabh Commented Feb 25, 2020 at 21:08
4 Answers
Reset to default 10According to the switch statement reference, "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". So, inside a switch statement, once a case statement matches the given variable, all following statements will be executed ignoring the criteria until a break statement or closing curly bracket is encountered.
If you would rewrite your code to this, the output will only be "The drink is BEER or WHISKEY" and "Nothing to drink".
drink = 'beer'
switch(drink){
case 'juice':
console.log('The drink is JUICE');
case 'beer':
case 'whiskey':
console.log('The drink is BEER or WHISKEY');
default:
console.log('Nothing to drink');
}
This is because of 'Fallthrough' (Read more here: https://en.wikipedia/wiki/Switch_statement#Fallthrough).
In some languages (like JavaScript and C) switch statements behave such that they will execute the matching block and then fallthrough to the statements that follow. This is why we need to break;, this will exit the switch block.
Play around with it to see the behavior. You are not breaking after the Beer case, so all blocks are being executed as Beer is the first case checked and it matches. If you change drink to Juice, only the last 2 blocks will be executed; the matching case, and the case that follows.
Switch cases in javascript "falls through" by default if no break or return statement is used.
For desired opearation you could write it like this:
drink = 'beer'
switch(drink){
case 'beer':
case 'whiskey':
console.log('The drink is BEER or WHISKEY');
break;
case 'juice':
console.log('The drink is JUICE');
break;
default:
console.log('Nothing to drink');
}
You can use function
const res = ((val) => {
if (['beer', 'whiskey'].includes(val)) return 'The drink is BEER or WHISKEY'
if (val === 'juice') return 'The drink is JUICE'
return 'Nothing to drink'
})(drink)
console.log(res)