JavaScript for Beginners - Chapter 5: Switch Statements

#javascript #codenewbie #tutorial #beginners

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");
}

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

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

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

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

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

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.