Learn TypeScript in Construct, part 4: Control flow

UpvoteUpvote 4 DownvoteDownvote

Index

Tagged

Features on these Courses

Attached Files

The following files have been attached to this tutorial:

.c3p

guess-the-number-ts.c3p

Download now 53.24 KB
.c3p

while-loop-ts.c3p

Download now 49.44 KB

Stats

136 visits, 167 views

Tools

Share

Translations

This tutorial hasn't been translated.

Create a translation

License

This tutorial is licensed under CC BY-NC 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 24 Jun, 2025.

Switch-case

The switch statement is similar to a series of 'if/else if' statements. It takes a value, and jumps to a matching case label, or the default label if none match. Here's a sample switch statement.

let num = 5;
switch (num) {
case 0:
	console.log("Number is 0!");
	break;
case 5:
	console.log("Number is 5!");
	break;
case 10:
	console.log("Number is 10!");
	break;
default:
	console.log("Number is something else!");
	break;
}

This is equivalent to the following series of 'if' statements:

let num = 5;
if (num === 0)
{
	console.log("Number is 0!");
}
else if (num === 5)
{
	console.log("Number is 5!");
}
else if (num === 10)
{
	console.log("Number is 10!");
}
else
{
	console.log("Number is something else!");
}

Note that with the switch statement:

  • Each possible value is given in a case label, followed by a colon : (rather than a semicolon), and is matched by strict equality (as if it compared with ===)
  • If none of the given cases match, it jumps to the default label
  • Each case and default section ends with a break statement. This exits the switch statement. (It's the same keyword as used for exiting loops, too.)

The default section is optional, in which case if no case matches it just skips over the entire switch statement.

Optional break

The break statement after each case is actually optional. If it's omitted, then it "falls through" and continues to execute the following lines of code from the next case! Try the following code snippet with all the break statements removed to see how this works.

let num = 5;
switch (num) {
case 0:
	console.log("Number is 0!");
case 5:
	console.log("Number is 5!");
case 10:
	console.log("Number is 10!");
default:
	console.log("Number is something else!");
}

This will log Number is 5!, Number is 10! and Number is something else!. The reason is since num is 5, it will jump to case 5: and start running statements from there. Since there are no break statements, it will continue running all the console log statements down to the end. In some cases this is a mistake, but it does have some uses, such as by matching multiple cases to the same line of code, as shown below.

let num = 5;
switch (num) {
case 0:
	console.log("Number is 0!");
	break;
case 5:
case 10:
	console.log("Number is 5 or 10!");
	break;
default:
	console.log("Number is something else!");
	break;
}

Now if num is either 5 or 10, it will log Number is 5 or 10!. The reason is case 5 is allowed to fall through to case 10 and run the same line of code. It's similar to an 'if' statement with the condition num === 5 || num === 10.

Why use a switch statement? It can be a concise way to match a long list of possible values. However in many cases a series of 'if/else if' statements will do the same job. It's another kind of style choice. It's worth knowing how switch statements work as they are commonly used so you're likely to come across them.

Conclusion

In this part we've covered various features that control how code executes, also known as control flow, including:

  • 'if' statements
  • 'else' and 'else if'
  • Formatting (such as whitespace and optional braces)
  • A simple 'Guess the number' game
  • 'while' and 'for' loops
  • break and continue
  • switch statements with case and default labels

In the next part we'll take a closer look at TypeScript's types, and how they can work with control flow, as well as some other TypeScript-specific details.

Learn more

If you want to dig deeper, you can learn more about the features mentioned in this guide at the following MDN Web Docs links:

  • 0 Comments

Want to leave a comment? Login or Register an account!