Getting Started with JavaScript Switch Case: A Beginner's Guide

Sign up to my newsletter for more tutorials!.

JavaScript is a popular programming language used to create interactive websites and web applications. One of the most useful features of JavaScript is the switch case statement, which allows developers to compare a variable to multiple values in a concise and organized way. In this guide, we'll cover the basics of the switch case statement in JavaScript and provide some examples to help you get started.

What is a Switch Case Statement?

A switch case statement is a conditional statement that compares a variable to multiple values and executes different code blocks based on the value of the variable. The switch case statement is often used as an alternative to long if-else chains, and can make your code more organized and easier to read.

Syntax of a Switch Case Statement

Here's the basic syntax of a switch case statement in JavaScript:

switch(variable) {
  case value1:
    // code block to execute if variable equals value1
    break;
  case value2:
    // code block to execute if variable equals value2
    break;
  // add more cases as needed
  default:
    // code block to execute if none of the cases match
}

In this example, variable is the variable that you want to compare to multiple values. Each case is a possible value of the variable, and the code block following each case will be executed if the variable equals that value. The default case is optional, and its code block will be executed if none of the other cases match.

Example: Switch Case Statement in Action

Let's look at an example to see how the switch case statement works in practice. Suppose you want to display a message to the user based on the day of the week. You could use an if-else chain to accomplish this, but a switch case statement would be more concise and easier to read:

var day = "Monday";

switch(day) {
  case "Monday":
    console.log("Today is Monday.");
    break;
  case "Tuesday":
    console.log("Today is Tuesday.");
    break;
  case "Wednesday":
    console.log("Today is Wednesday.");
    break;
  case "Thursday":
    console.log("Today is Thursday.");
    break;
  case "Friday":
    console.log("Today is Friday.");
    break;
  default:
    console.log("It's the weekend!");
}

In this example, we declare a variable day and assign it the value "Monday". We then use a switch case statement to compare day to multiple values ("Monday", "Tuesday", "Wednesday", etc.) and display a message to the user based on the value of day. If day equals "Monday", for example, the code block following the first case will be executed and the message "Today is Monday." will be displayed to the user.

Example: Switch Case Statement with Multiple Conditions

You can also use the switch case statement with multiple conditions. In the following example, we use the switch case statement to determine the grade of a student based on their score:

var score = 80;

switch(true) {
  case (score >= 90):
    console.log("A");
    break;
  case (score >= 80 && score < 90):
    console.log("B");
    break;
  case (score >= 70 && score < 80):
    console.log("C");
    break;
  case (score >= 60 && score < 70):
    console.log("D");
    break;
  default:
    console.log("F");
}

In this example, we declare a variable score and assign it the value 80. We then use a switch case statement to compare score to multiple values (90, 80, 70, 60, etc.) and display a message to the user based on the value of score. If score equals 80, for example, the code block following the second case will be executed and the message "B" will be displayed to the user.

Summary

In this guide, we've covered the basics of the switch case statement in JavaScript. We've learned that a switch case statement is a conditional statement that compares a variable to multiple values and executes different code blocks based on the value of the variable. We've also learned the syntax of a switch case statement and provided some examples to help you get started.

By using a switch case statement instead of a long if-else chain, you can make your code more organised and easier to read. You can also use the switch case statement with multiple conditions to perform more complex comparisons.