DEV Community

Danish Saleem
Danish Saleem

Posted on

JavaScript for Beginners - Chapter 5: Switch Statements

The switch statement is another form of conditional logic in JavaScript. In this chapter we will cover the syntax of the switch statements as well as how it differs from the if statement and when to use which.

Switch vs If

A switch statement is a good alternative to the if statement when you are comparing a single value against multiple variants. For example, the following if statement can be written as a switch instead.

const fruit = "Cherry";

if (fruit === "Apples") {
  console.log("Apples are on isle 2");
} else if (fruit === "Banana") {
  console.log("Bananas are on isle 3");
} else if (fruit === "Cherry") {
  console.log("Cherries are on isle 4");
} else {
  console.log("We do not stock any of this fruit");
}
Enter fullscreen mode Exit fullscreen mode

The Syntax

In a switch statement you start with the value you are checking and create a case block for each variant you want to check against.

const fruit = "Cherry";

switch (fruit) {
  case "Apple":
    console.log("Apples are on isle 2");
    break;

  case "Banana":
    console.log("Bananas are on isle 3");
    break;

  case "Cherry":
    console.log("Cherries are on isle 4");
    break;
  default:
    console.log("We do not stock any of this fruit");
}

// Output: Cherries are on isle 4
Enter fullscreen mode Exit fullscreen mode

Break

Once there is a match the execution starts and will run until the next break. If you don't include breaks it will continue through each case.

const fruit = "Banana";

switch (fruit) {
  case "Apple":
    console.log("Apples are on isle 2");
    break;

  case "Banana":
    console.log("Bananas are on isle 3");
    break;

  case "Cherry":
    console.log("Cherries are on isle 4");
    break;
  default:
    console.log("We do not stock any of this fruit");
}

// Output: Bananas are on isle 3
// Output: Cherries are on isle 4
// Output: We do not stock any of this fruit
Enter fullscreen mode Exit fullscreen mode

Case Group

Several variants of case which share the same code can be grouped together.

const fruit = "Cherry";

switch (fruit) {
  case "Apple":
    console.log("Apples are on isle 2");
    break;

  case "Banana":
  case "Cherry":
    console.log("Bananas and Cherries are on isle 4");
    break;

  default:
    console.log("We do not stock any of this fruit");
    break;
}

// Output: Bananas and Cherries are on isle 4
Enter fullscreen mode Exit fullscreen mode

Type Matters

Switch statements use a strick equality check so type always matters. If there is a possibility of your value being a different type it's best to transform if first before the switch statement.

const enteredValues = "2";
switch (Number(enteredValues)) {
  case 1:
    console.log("You picked number 1");
    break;

  case 2:
    console.log("You picked number 2");
    break;

  case 3:
    console.log("You picked number 3");
    break;

  default:
    console.log("Pick a number between 1 and 3");
}

// Output: You picked number 2
Enter fullscreen mode Exit fullscreen mode

Within Function

Switch statements can also be used within function to return a value. If your switch has a return then it doesn't need break since a return will terminate the execution.

function getGreeting(language) {
  switch (language) {
    case "English":
      return "Hello";

    case "Spanish":
      return "Hola";

    case "French":
      return "Bonjour";

    case "Italian":
      return "Ciao";
  }
}

getGreeting("Spanish");

// Output: Hola
Enter fullscreen mode Exit fullscreen mode

Summary

  • Use switch statement when comparing equality against multiple variants.
  • Use a case block per variant.
  • Use break to stop subsequent executions.
  • Group case blocks that execute the same code.
  • Type matters, transforms values that might be a different type before comparing.
  • Switch statements can return a value when used within a function.

Let's connect 💜

You can follow me on Twitter, Instagram & GitHub

If you like this post. Kindly support me by Buying Me a Coffee

Buy Me a Coffee

Discussion (2)

Collapse
kiran9866 profile image
Kiran Kumar

Instead of switch we can use js objects:

const language={
english: "Hello",
spanish:"Hola",
french: "Bonjour",
italian:"Ciao"
}

console.log(language.english ?? "wrong key")

Collapse
mrdanishsaleem profile image
Danish Saleem Author • Edited on

Hmmm thanks for letting me know.