Skip to main content
Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.

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