Learn JavaScript in Construct, part 4: control flow

24

Index

Tagged

Attached Files

The following files have been attached to this tutorial:

.c3p

guess-the-number-js.c3p

Download now 49.84 KB
.c3p

Stats

6,816 visits, 17,433 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.

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 number = 5;
switch (number) {
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 number = 5;
if (number === 0)
{
	console.log("Number is 0!");
}
else if (number === 5)
{
	console.log("Number is 5!");
}
else if (number === 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 number = 5;
switch (number) {
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 number 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 number = 5;
switch (number) {
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 number 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 number === 5 || number === 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 look at another core building block of programming: functions! We'll also move on to using script files instead of a snippet of code in an event sheet.

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:

Part 5

When you're ready to continue, head on to the next part at Learn JavaScript in Construct, part 5: Functions!

Next Tutorial In Course

Learn JavaScript in Construct, part 5: Functions 17:50

Introduces functions, a core part of all computer programming.

  • 3 Comments

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

  • Why do we need to use the tilde mark in the console.log (`Variable `i`is ${i}`); I was getting errors because i thought they were single quotations.

  • As aulas estão sendo maravilhosas. Muito obrigado pela disponibilidade e paciência!!

  • Thanks for the lessons!