JavaScript for Beginners - Chapter 5: Switch Statements
Tags: javascript, codenewbie, tutorial, beginners
Published: 2021-12-09 12:16:26

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.

```JavaScript
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.

```JavaScript
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.

```JavaScript
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.

```JavaScript
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.

```JavaScript
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.

```JavaScript
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.

---

### Let's connect 💜

You can follow me on [Twitter](https://twitter.com/MrDanishSaleem), [Instagram](https://www.instagram.com/mrdanishsaleem/) & [GitHub](https://github.com/mrdanishsaleem/)

If you like this post. Kindly support me by [Buying Me a Coffee](https://www.buymeacoffee.com/mrdanishsaleem)

![Buy Me a Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fefzbxbnwww7tkght33w.png)