Switch statement in JavaScript
Tags: javascript, webdev, beginners
Published: 2022-02-25 07:43:51

When is comes to **controlling** the *flow* of a particular program with making decision, there are typically two options we have:

- if…else
- switch case

In our previous article we had covered everything you need to know about the if..else in JavaScript. Here is the link:

> **[if else in JavaScript - Conditional Statements](https://withinbracket.com/posts/if-else-in-javascript-conditional-statement/)**

Now let's explore the switch case statement.

## Check out this simple example:

```js
let fruit = "apple";
switch (fruit){
 case "apple":
   console.log("This is an apple");
   break;
 case "mango":
   console.log("This is a mango");
   break;
 default:
   console.log("This is a fruit");
}
// Output:
This is an apple
```

In case if you are not familiar with `switch` before, then it's a fairly simple procedure to control a flow of a program.

## Here is a typical syntax of `switch`:

```js
switch(expression_to_be_checked){
  case first_value:
     //do something
     break;
  case second_value:
     //do something else
     break;
  case third_value:
     //do something else
     break;
  default:
     // do what not defined in above cases
}
```

## Let's breakdown the syntax:

- every `switch` statement start with a `switch` keyword which hold an expression to be checked either as a `value` or as a `variable`

- then we have several `cases` to check the expression, and do a particular task according to the `case`

- in every `case` block we have a `break` keyword. It is used to **break** the further flow of the program and limit us to execute task of a particular _case_ block

- at the end we have a `default` case. It executes the _default_ task if no case condition is satisfies.

There you have it the switch case statement in JavaScript.

> **But**, _it's not gonna end here, there are few important points you need to aware of before using it._

## You can put the `default` keyword wherever you want; not necessary to put at the end

Everywhere you'll find that the `default` keyword has been put at the end of every required `case` block, but it's not necessary to put `default` at the end.

In-fact I prefer putting the default at the **beginning**, because it make me feel comfortable to not worry about any further if I use lot of `case` block.

Either way it's a subjective matter, so you put it where you want, it's not a big deal.

```js
let animal = "mouse";
switch (animal){
  default:
     console.log("This is an animal");
  case "rabbit":
     console.log("This is an rabbit");
     break;
  case "lion":
     console.log("This is a lion");
}
// Output:
This is an animal  
```

> In-fact I don't need to put `break` at the last case block, because it makes sense, it's the last case and no other `case` is going to be checked after the last case block

## Not every switch statement require a default case.

Yeah you read it right. It's not **mandatory** to use default in every `switch` statement. You may have condition where you wouldn't need to use `default` case.

```js
let animal = "mouse";
switch (animal){
  case "rabbit":
    console.log("This is an rabbit");
    break;
  case "lion":
    console.log("This is a lion");
}
// Output:
you might not able to see anything as output
```

## What if you forgot to use `break` keyword

It's fairly simple answer - _All the case block would be executed whether the condition meets or not_ - Simple.

Let me comment out the `break` keyword.

```js
let fruit = "guava";
switch (fruit){
  case "apple":
     console.log("This is an apple");
     //break;
  case "mango":
     console.log("This is a mango");
     //break;
  default:
     console.log("This is a fruit");
}
// Output:
This is an apple
This is a mango
```

> Not using `break` keyword can leads to a new experience as well. It's called **multi-case** operation.

Check this out:

```js
let fruit = "guava";
switch (fruit){
  case "apple":
  case "mango":
  case "pineapple":
  case "guava":
  case "watermelon":
    console.log("This is a fruit");
    break;
  default:
    console.log("This is a thing");
}
//Output
This is a fruit.
```

> It's also known as **fall-through**.

Here we use the four case statement perform the same task.

## Conclusion:

So this is all you need to know to work with `switch` case. Sometimes switch statement is used as a alternative of `if…else`. But they have their own use cases.

It's also seen that `switch` statement work faster than `if…else` in most cases if there are too many **conditions** to be checked.

I've illustrated several example and scenarios to explain switch statement, but I would highly recommend to tweak with your own example to have a better understanding.

Cause as they say practice makes perfection.

Thanks for sticking around. Keep Learning.

> **This article is officially published on [Within Bracket](https://withinbracket.com/posts/switch-statement-in-javascript/)**