JavaScript
Hard
25 mins
215 points
What you need:
  • Computer/laptop

JavaScript Switch Statements

In this lesson we learn about JavaScript Switch Statements, what they are and how we use them in JavaScript.

1 - What is a Switch Statement?

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
}
Note that JavaScript switch statements must be written in lowercase.
switch is correct
Switch is not correct
SWITCH is not correct

2 - The 'break' keyword

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

3 - The 'default' keyword

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


4 - Multiple cases, same code

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
}

5 - Write a 'switch' statement

Now try write your own switch statement for the following scenario.

We have the following 2 variables:

  1. age - that stores the persons age. 
  2. price - that stores the price of a ticket.
let age = 12
let price = 0

What code would you need to write to set the price variable to:

  • 6.50 if the persons age is 12
  • and 7.50 if the persons age is 16

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.

see the code

let age = 12
let price = 0

switch(age){
    case 12:
        price = 6.50
        break
    case 16:
        price = 7.50
        break
}

basic.showNumber(price)

Join our club 😃

To view the remaining 1 steps and access hundreds of other coding projects please login or create an account.

Copyright Notice
This lesson is copyright of Coding Ireland. Unauthorised use, copying or distribution is not allowed.
🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more