In this lesson we learn about JavaScript Switch Statements, what they are and how we use them in JavaScript.
The switch statement is used to pick or switch to a piece of code to run depending on a condition. We pass an expression into a switch statement and then choose a piece of code to run depending what condition matches it.
In the following example the expression is the age
variable and we have 3 conditions for 10
years old, 13
years old and 16
years old. We set the price depending on which condition equals the expression.
switch(age){
case 10:
price = 5.99
break
case 13:
price = 6.99
break
case 16:
price = 7.99
break
}
As you can see from the above example a switch statement is written like this:
switch(expression){
}
And each condition we want to put a separate piece of code for is written like this:
case condition1:
// code for condition1 to run goes here
break
So putting it altogether it looks like this:
switch(expression){
case condition1:
// code for condition1 to run goes here
break
case condition2:
// code for condition2 to run goes here
break
}
switch
is correctSwitch
is not correctSWITCH
is not correct
When JavaScript code is running, the break
keyword lets it know that it should "break out" of the switch
statement.
Look at the comments in this example that show the order that the lines of code are run. Notice how it 'breaks' out of the switch
statement and then continues on.
let age = 13 // this line will run 1st
let price = 0 // this line will run 2nd
let freeHat = false // this line will run 3rd
switch(age){ // this line will run 4th
case 10: // this line will run 5th (does not match)
price = 5.99
freeHat = true
break
case 13: // this line will run 6th (matches)
price = 6.99 // this line will run 7th
freeHat = false // this line will run 8th
break // then this will run 9th (breaks out of the switch statement)
case 16:
price = 7.99
freeHat = false
break
}
basic.showNumber(price) // this line will run 10th
The default
keyword can be used to specify some code to run if none of the case
conditions are true.
Look at the following example, notice how none of the case
conditions are true so it runs the default
code.
let age = 18 // this line will run 1st
let price = 0 // this line will run 2nd
let freeHat = false // this line will run 3rd
switch(age){ // this line will run 4th
case 10: // this line will run 5th (does not match)
price = 5.99
freeHat = true
break
case 13: // this line will run 6th (does not match)
price = 6.99
freeHat = false
break
case 16: // this line will run 7th (does not match)
price = 7.99
freeHat = false
break
default: // this line will run 8th
price = 9.99 // this line will run 9th
freeHat = false // this line will run 10th
break // this line will run 11th (breaks out of the switch statement)
}
basic.showNumber(price) // this line will run 12th
Sometimes we will want the same piece of code to run for different case conditions.
Notice that in the following example we are saying that the same code should run for when age is 10 or 13.
switch(age){
case 10:
case 13:
price = 5.99
freeHat = true
break
case 16:
price = 7.99
freeHat = false
break
default:
price = 9.99
freeHat = false
break
}
Now try write your own switch statement for the following scenario.
We have the following 2 variables:
let age = 12
let price = 0
What code would you need to write to set the price variable to:
Open this Microbit project that has the above code already added and click the 'Edit Code' button. Try write the switch
statement to set the price depending on the age.