Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at BFusion / BFLEX 2009 (Bloomington, Indiana) with: Aaron Wolfe and Lance Smith
Ben Nadel at BFusion / BFLEX 2009 (Bloomington, Indiana) with: Aaron Wolfe ( @Wolfeman77 ) and Lance Smith@outlan )

Using Multiple Break Statements In A Single Case Block In JavaScript

By Ben Nadel on

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:


 
 
 

 
 Using multiple break statements inside a single case block in JavaScript. 
 
 
 

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.




Reader Comments

A small note regarding the term "case block": According to the spec (http://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.

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.