In JavaScript, it is typically best to use the switch case with only numbers and strings. For other values, they are compared based of strict equality - that is, that the values occupy the same location in memory - which is rarely the intended behavior.
Advanced Topics: Switch Statement
When implementing powerups in the case study game,
the same ||sprites:Kind||
was used to maintain the
same behavior for all the different powerups.
The PowerUp type was kept seperate, and obtained using the powerUps.getType
function, which took in a sprite and returned the type of power up that it represented.
This structure simplifed the behavior of the power ups -
as they shared behavior outside of the bonus they gave the player -
but required a long chain of ||logic:if ... else if||
checks in the event,
with each ||logic:if condition||
simply checking the type returned by
powerUps.getType
against a different type of power up.
To more appropriately handle a situation like this, the switch
statement can be used.
This accepts a value, uses that value to select an appropriate case
to run.
Concept: Switch-Case Syntax
The switch
statement takes a value and checks that value against a series of case
s.
Combined, this is often called a switch case
,
as neither statement is particularly useful without the other.
switch (valueToCheck) {
case FirstCase: {
// code to run for FirstCase
break;
}
case SecondCase: {
// code to run for SecondCase
break;
}
// repeat for as many cases as necessary
}
In this case, valueToCheck
is the value that the switch case will match the case for:
in the case study, this would be the type
of the power up.
FirstCase
and SecondCase
are two of the cases
being checked:
these would be two of the different PowerUpType
s,
like PowerUpType.Health
and PowerUpType.Score
.
Example #1: What Number?
- Review the code below
- Identify which case will run
- Identify how this would be written using
||logic:if||
and||logic:else||
let myNumber: number = 2;
switch (myNumber) {
case 1: {
game.splash("My number is 1!");
break;
}
case 2: {
game.splash("My number is 2!");
break;
}
case 3: {
game.splash("My number is 3!");
break;
}
}
Student Task #1: Make the Switch
- Start with the code below
- Convert the
||logic:if ... else if||
section to useswitch case
controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
info.changeScoreBy(1);
})
controller.B.onEvent(ControllerButtonEvent.Pressed, function () {
if (info.score() == 0) {
game.splash("You have no points!");
} else if (info.score() == 1) {
game.splash("You've got one point!");
} else if (info.score() == 2) {
game.splash("Two points!");
}
})
Concept: Fall Through and Default Case
The break;
statement at the end of each case is used to stop running the
switch case
, but is optional.
Without it, the switch case will continue you “fall through” the cases until
it reaches the end of the final case
or a break
statement.
This can be used to handle multiple cases in the same way.
Additionally, a default
case can be added, which will match any value.
This can be thought of as an ||logic:else||
branch for the
||logic:if .. else if||
blocks.
Example #2: Using Fall Through and Default
- Review the code below
- Identify how the “fall through” is used to combine the cases for 1, 2, and 3
- Identify how the “fall through” is used with cases 4 and 5
- Identify how the default case is used for all other values
let myNumber: number = 2;
switch (myNumber) {
case 1:
case 2:
case 3: {
game.splash("My number is one, two, or three!");
break;
}
case 4: {
game.splash("My number is four, and the next number is");
}
case 5: {
game.splash("five!");
break;
}
default: {
game.splash("My number is something else :(.")
}
}
Student Task #2: More Options
- Start with the code from task #1
- Add cases for 3, 4, and 5. These should
||game:splash||
“My number is three, four, or five!” - Add a default case that will
||game:splash||
“That is a lot of points!”
Concept: Strings
Strings can also be used as values in the switch case.
Example #3: Switch Mystery
- Review the code below, and copy it into a new project
- Before running the code, identify what the expected output is
for each of the three
||variables:mysteryInput
s - Identify how the switch case is used to assign
||variables:output||
different values - Uncomment the first commented assignment of
||variables:mysteryInput||
and run the code. Check the code against your expected output from step 2 - Repeat step 4 for the second and third assignments of
||variables:mysteryInput||
let output: string = "";
let mysteryInput = "";
// mysteryInput = "a";
// mysteryInput = "c";
// mysteryInput = "z";
switch (mysteryInput) {
case "a": {
output += "Hello! ";
}
case "b": {
output += "I'm here!";
break;
}
case "c": {
output += "I'm actually here.";
break;
}
default: {
output += "Somewhere else";
}
}
game.splash(output)
Student Task #3: How are You?
- Start with the code snippet below
- Convert the
||logic:if ... else if||
section to useswitch case
let input: string = game.askForString("How are you?");
if (input == "good") {
game.splash("That is good!");
} else if (input == "okay") {
game.splash("Good enough!");
} else if (input == "bad") {
game.splash("That's too bad!");
} else if (input == "I don't know" || input == "Something else") {
game.splash("Okay.");
} else {
game.splash("I don't understand.");
}