A switch statement evaluates the value of a variable or an expression against a set of values. Each value in a switch statement is called a case. When a case is matched with the variable’s value, the code present in the body of that case statement is executed.

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/08/echo/word-image-6.jpeg" data-lazy- height="808" src="data:image/svg xml,” width=”528″>

When to use a Switch Statement?

Switch statements are an alternative to if-else statements. Following is the list of differences and similarities between the switch and if-else statements:

  • For an, if statement, the condition can be a range value, whereas a switch statement can only take a single integer, string object, or enumerated value as its condition.
  • If-else statements are great for boolean conditions, whereas a switch statement works with fixed data values.
  • The condition in an if-else statement can be an equality or any other logical expression, whereas a switch statement can only work with equalities.

Note: We will use the browser console to demonstrate examples performed in this post. To open up the browser console:

  • Use the F12 key in Chrome and other chromium-based browsers.
  • Use CTRL SHIFT K keyboard shortcut keys for Mozilla.
  • Use Option ⌘ C keyboard shortcut keys in Safari (if developer menu does not appear, then open Preferences by pressing ⌘ , and in Advanced tab check “Show Develop menu in menu bar”).

How to use a switch statement?

In this example, we will make a simple program using a switch statement in JavaScript. But first, let’s discuss the syntax of switch statements in JavaScript.

Syntax

switch(expression) {

case a:


Statements

break;

case b:


Statements

break;

default:


Statements

}

The switch statement evaluates the variable or the expression present between the parentheses (). It compares it with each case present in the switch statements body. If the first case is true, then the statements present in its body are executed. If the second case is true, then the statements present in the second case’s body are executed. The break and default statements are optional. The statements present under default are only executed in case all the case statements are false. The break statement is used to exit the body of the switch statement once a case is matched with the expression. If we do not use a break statement, then the switch statement will evaluate the expression against every case even if one of the cases is true.

var car = “Toyota Prius”;

switch(car) {


  case“Toyota Prius”:


console.log(“Car Name: Toyota PriusnFuel Economy: 18/21 KM/L”);

break;

case“Toyota Vitz”:


    console.log(“Car Name: Toyota VitznFuel Economy: 20/22 KM/L”);

break;

case“Toyota Corolla”:


    console.log(“Car Name: Toyota Corolla(Axio)nFuel Economy: 19/22 KM/L”);

break;


  default:


    console.log(“This car is not present in our Database.”)

}

Output:

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/08/echo/word-image-506.png" data-lazy- height="85" src="data:image/svg xml,” width=”691″>

In the example given above, first, we declared a variable named car and assigned it a value. Next, we passed the variable car as an argument to the switch statement and gave it three cases. The switch statement will check the value of the variable car against each case until a match is found. Then it will execute the body of that particular case and then terminate the switch statement using the break statement.

In the example above, as the value of the variable car is ‘Toyota Prius,’ the switch statement only checks against the first case, and the switch statement is terminated. But if we modify the value of the variable car in the following way:

var car = “Toyota Corolla”;

Then the switch statement will check against every case, and the output will be:

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/08/echo/word-image-507.png" data-lazy- height="76" src="data:image/svg xml,” width=”691″>

If we put the name of any other car which is not present as a case in our switch statement, then the body of the default statement will execute, and the output will change to:

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/08/echo/word-image-508.png" data-lazy- height="69" src="data:image/svg xml,” width=”686″>

Conclusion

Switch statements are used to check multiple conditions on a single variable. Switch statements are an efficient alternative to if-else statements. If statements can evaluate almost all types of data while switch statements can only evaluate integers or characters. You can use them in your code, depending on your style.

In this post, we have learned what switch statements are. Moreover, we also learned about when we should prefer them over other conditional statements.

About the author

<img alt="" data-del="avatar" data-lazy-src="https://kirelos.com/wp-content/uploads/2021/08/echo/7011409B3A384F43A8417D1DAC68D179-150×150.jpg611810ee5a01b.jpg" height="112" src="data:image/svg xml,” width=”112″>

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.