switch

This YouTube video was created by Steve Griffith.

The switch statement

The switch statement is similar to the if...else statement, but instead of evaluating a condition, the switch statement contains different cases. Each case is evaluated to see if it matches the provided expression. A case will only match the expression if the case has the exact same values using the strict comparison (===) operator. If a case does match the expression, the associated block of code will be executed.

A break statement is used tell the program to jump out of switch statement and ignore the remaining cases. If a break statement is not used, then fall through will occur.

/* Let's do the same thing we were doing in the if...else examples using a switch statement.
With this new statement, we can include all the conditions in the same block of code.
*/

let productTotal = 30
const shippingFee = 15
let cartTotal
let discount = 0.05 * productTotal

switch (true) {
  case productTotal < 50:
    // this block of code will execute
    cartTotal = productTotal + shippingFee
    console.log('Cart Total is ' + cartTotal)
    break
  case productTotal >= 50:
    // this block of code will NOT execute
    cartTotal = productTotal
    console.log('Cart Total is ' + cartTotal)
    break
  case productTotal >= 100:
    // this block of code will NOT execute
    cartTotal = productTotal - discount
    console.log('Cart Total is ' + cartTotal)
}

NOTE

The expression for thisswitch statement is set to true because we are checking if each of these cases are true or false. See below for a generic switch statement syntax.

const answer = 'A'

switch(answer)
{
  case 'A':
    // This block of code WILL execute
    console.log('A is the correct answer.')
    break
  case 'B': 
    // This block of code will NOT execute
    console.log('B is the wrong answer.')
    break
  case 'C': 
    // This block of code will NOT execute
    console.log('C is the wrong answer.')
}

The break statement

In most cases, it is necessary to include a break at the end of a case. If a break statement is not used than fall through will occur and all remaining cases will executed. This is because once a switch encounters a matching case all remaining cases are also considered matches.

// Note that productTotal is $30
switch (true) {
  case productTotal < 50:
    // this block of code will execute
    cartTotal = productTotal + shippingFee
    console.log('Cart Total is ' + cartTotal)
    break
  case productTotal >= 50:
    // this block of code will ALSO execute
    cartTotal = productTotal
    console.log('Cart Total is ' + cartTotal)
    break
  case productTotal >= 100:
    // this block of code will ALSO execute
    cartTotal = productTotal - discount
    console.log('Cart Total is ' + cartTotal)
}

NOTE

There is no need to add a break at the end of the last case because the switch statement will stop executing anyway

When used properly, fall through can be used to make the code more efficient, by stacking cases together.

/* Our e-commerce example does not work in this case, so below is a generic example: */

const answer = 'C'

switch (answer) {
  case 'A':
  case 'B':
    // this block of code will execute
    console.log('This is the wrong answer')
    break
  case 'C':
    // this block of code will NOT execute
    console.log('This is the correct answer')
    break
}

The default clause

The default clause, similar to the else statement, is use to provide a default statement if no matching case is found.

NOTE

It is best practice to set the default clause as the last clause in a switch statement.

// Note that productTotal is $30
switch (true) {
  
  case productTotal >= 50:
    // this block of code will NOT execute
    cartTotal = productTotal
    console.log('Cart Total is ' + cartTotal)
    break

  case productTotal >= 100:
    // this block of code will NOT execute
    cartTotal = productTotal - discount
    console.log('Cart Total is ' + cartTotal)
    break

  default:
    // this block of code will execute
    cartTotal = productTotal + shippingFee
    console.log('Cart Total is ' + cartTotal)

}