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.

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.

I am the co-founder and lead engineer at InVision App, Inc — the world's leading prototyping,
collaboration & workflow platform. I also rock out in JavaScript and ColdFusion 24x7 and I dream about
promise resolving asynchronously.