Using Multiple Break Statements In A Single Case Block In JavaScript
This morning, I was trying to learn how to use Redux when I found myself in a situation in which I wanted to break out of a reducer Case block early based on a dynamic condition (whether or not an item with the given ID could be found). If I was in a vanilla function, I'd simply create a "guard condition" with a return statement inside of it; but, I didn't want to return out of the reducer [function] - just the case. Then it occurred to me, maybe a Case block could employ multiple break statements in the same way that a function can employ multiple return statements.
Run this demo in my JavaScript Demos project on GitHub.
To test this, I created a function that would test a given expression against two sets of Case block. Each case block would match against three values in a range; and, it would console-log each value, in the range, up to the given value; but, it will "break" out of the case when it reaches the given value.
It's probably easier to just look at the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>
Using Multiple Break Statements In A Single Case Block In JavaScript
</title>
</head>
<body>
<h1>
Using Multiple Break Statements In A Single Case Block In JavaScript
</h1>
<script type="text/javascript">
// Test values against the various ranges.
[ "A", "B", "C", "D", "E", "F", "G" ]
.forEach( testExpression )
;
// I test the given expression across different groups of values to see how
// multiple Break statements behave within a single Case block. This is akin
// to using multiple Return statements in a Function (which I happen to think
// is a wonderful feature of the language).
function testExpression( expression ) {
switch ( expression ) {
case "A":
case "B":
case "C":
console.log( "Testing " + expression + " in [ A - C ]:" );
console.log( "A" );
// Try to break out of case early.
if ( expression === "A" ) {
break;
}
console.log( "B" );
// Try to break out of case early.
if ( expression === "B" ) {
break;
}
console.log( "C" );
break;
case "D":
case "E":
case "F":
console.log( "Testing " + expression + " in [ D - F ]:" );
console.log( "D" );
// Try to break out of case early.
if ( expression === "D" ) {
break;
}
console.log( "E" );
// Try to break out of case early.
if ( expression === "E" ) {
break;
}
console.log( "F" );
break;
}
}
</script>
</body>
</html>
As you can see, within each case "range", I'm only logging-out up to the given letter; then, I'm attempting break out of the case with a conditional break statement. And, when we run the above code, we get the following output:
Very cool! The conditional break statement, inside of the if-blocks, worked just as we had hoped. You can use multiple break statements inside a single case block in JavaScript and it will act just like multiple return statements inside of a single function. I'm sure there are people who will say that this is a horrible idea, just as they would likely say this about multiple return statements. But, for guard logic, I think this makes for a wonderful feature of the language.
Want to use code from this post? Check out the license.
Reader Comments
great informative article...
Thank you..
@Manohar,
Glad you enjoyed :)
This reminds me of [Duff's Device](https://en.wikipedia.org/wiki/Duff's_device).
A small note regarding the term "case block": According to the spec (www.bennadel.com/blog/2986-using-multiple-break-statements-in-a-single-case-block-in-javascript.htm), the switch statement contains a *single* case block, which in turn contains one or more case clauses. The case clause finally contains a list of statements (which is optional). So, it would be more correct to say "case clause" instead of "case block" in your article.
@Šime,
The correct URL: http://tc39.github.io/ecma262/#sec-switch-statement
I much needed this bit of knowledge - thanks again to you Ben.