Switch statement in JavaScript

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

Now let's explore the switch case statement.

Check out this simple example:

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:

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.

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.

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.

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:

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