Skip to content

The JavaScript Switch Conditional

Learn the basics of the JavaScript Switch Conditional

An if/else statement is great when you have a few options to choose.

When they are too many however it might be overkill. Your code will look too complex.

In this case you might want to use a switch conditional:

switch(<expression>) {
  //cases
}

based on the result of the expression, JavaScript will trigger one specific case you define:

const a = 2
switch(a) {
  case 1:
    //handle case a is 1
    break
  case 2:
    //handle case a is 2
    break
  case 3:
    //handle case a is 3
    break
}

You must add a break statement at the bottom of each case, otherwise JavaScript will also execute the code in the next case (and sometimes this is useful, but beware of bugs). When used inside a function, if the switch defines a return value, instead of using break you can just use return:

const doSomething = (a) => {
  switch(a) {
    case 1:
      //handle case a is 1
      return 'handled 1'
    case 2:
      //handle case a is 2
      return 'handled 2'
    case 3:
      //handle case a is 3
      return 'handled 3'
  }
}

You can provide a default special case, which is called when no case handles the result of the expression:

const a = 2
switch(a) {
  case 1:
    //handle case a is 1
    break
  case 2:
    //handle case a is 2
    break
  case 3:
    //handle case a is 3
    break
  default:
    //handle all other cases
    break
}

→ Here's my latest YouTube video

→ Get my JavaScript Beginner's Handbook

→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter

JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025

Bootcamp 2025

Join the waiting list