The Switch Statement in JavaScript: When and How to Use It

Conditional statements form the backbone of any logic-driven programming language.

Popular conditions make logic constructs easier to write - but what if you had say, 10 conditions to check?

Writing that many nested statements wouldn't be a great solution!

Fortunately, the statement is a useful feature for this. It is found in most programming languages, including JavaScript!

Let’s learn about the JS switch statement and how to use it.

What is the JS Switch Statement?

The JS statement is used to evaluate expressions and execute a subsequent set of code blocks if the result matches the case.

The syntax is similar to an condition:

switch(expression) {
  case 1:
    // execute code
    break;
  case 2:
    // execute code
    break;
  case 2:
    // execute code
    break;
  case 3:
    // execute code
    break;
  default:
  // execute fall-back code
}

As you can see, the syntax is very readable - almost natural language-ish! That’s what makes the statement a breeze to work with.

The Syntax

Now, let’s dive deeper into the syntax and relevant keywords:

• We first have the keyword itself with an expression to evaluate in parentheses. This is followed by
• Within the curly braces, there are numerous - each with a specific If the evaluated JavaScript switch expression matches a particular case, then the corresponding code for the case will be executed.
• After each case, we write the keyword - this is to instruct the interpreter to stop executing/evaluating any more cases if the evaluated expression has been matched. Otherwise, the interpreter would just keep evaluating all the cases regardless!
• There is also a keyword at the end. This is to specify a block of fall-back code for the JS switch statement to execute if none of the cases are a match.

Pretty handy, right? 😎

But, as Linus Torvalds famously said,

So, let's dive into an example to see how it all comes together.

An Example

Let's explore a JavaScript string example:

const dayOfWeek = ‘Monday’

switch (dayOfWeek) {
 case ‘Monday’:
   console.log(‘The best work day of the week!’);
   break;
 case ‘Tuesday’:
   console.log(‘The day of endless meetings!’);
   break;
 case ‘Wednesday’:
   console.log(‘Halfway there!’);
   break;
 case ‘Thursday’:
   console.log(‘Monday - one day, Tuesday - two day, Wednesday - huh? What day? THUUURSDAYYY’);
   break;
 case ‘Friday’:
   console.log(‘The weekend’s already begun, woohoo!’);
   break;
 case ‘Saturday’:
   console.log(‘Off the planet!’);
   break;
 case ‘Sunday’:
   console.log(‘Wasted the day anticipating the Monday blues’);
   break;
 default:
   console.log(‘You seem to have a different calendar there!’);
}

In this JavaScript switch string example, we evaluate the variable against different string cases, i.e. days of the week.

If one of the days of the week are a match, that particular statement will be executed.

If none of the days of the week match, then the case will execute.

Think of the case as a fallback for the scenario when

Evaluating Ranges

The keyword can also evaluate expressions! This is very useful when working with a range of data.

A great use-case of this would be that of evaluating grades. For each of marks scored on a test by a student, there is a specific grade that can be attached to it.

For example:

switch (grade) {
 case grade >= 85: // data range
  console.log(‘You scored an A’);
  console.log(‘Congratulations!’);
  break;
 case grade >= 60: // data range
  console.log(‘You scored a B’);
  console.log(‘Congratulations!’);
  break;
//….
…
//
 default:
  console.log(‘Please contact your teacher’);
}

Multiple Cases

Did you notice in the above code that we have logged multiple times?

There are some situations where we may need to execute the same block of code in multiple cases - but repeating this same code over and over is not optimal!

This is where the multiple cases feature of a JS statement can help:

switch(marks) {
 case 100:
 case 90:
 case 80:
   console.log(‘Congratulations! You passed with Distinction’);
   break;
 case 70:
 case 60:
  console.log(‘Congratulations! You passed First Class with Distinction’);
  break;
//..
..
//
}

Conclusion

Fun fact - did you know that the statement goes as far back as the 1950s to the times of languages like Lisp used in mainframes? 😯

In that context, the statement is quite literally a time-tested, handy feature in programming!

It helps solve a variety of match-based expression evaluations and does so without abstracting away any of the logic.