Switch Statements in JavaScript

Sometimes, it is required to make decisions in the code on the basis of certain conditions. That’s the place where JavaScript conditional statements come in. Conditional statements in JavaScript help in running different code based on different conditions. One of the conditional statements in JavaScript is the switch statement JavaScript which allows you to compare a single value against multiple cases. In this blog, you will learn everything about the switch statement in JavaScript, including how it works and how to use it in code with examples.

Table of Contents:

• What is a switch case in JavaScript?
• JavaScript Switch Statement Syntax
• Examples of Switch Case Statements in JavaScript
  • Example 1: Simple Example with String Matching
  • Example 2: Using Boolean Condition
• How the JavaScript Switch Statement Works
• The break Keyword
• The default Keyword
• Difference Between if-else and switch Statements
• Conclusion

What is a switch case in JavaScript?

The switch case JavaScript statement is a special type of JavaScript conditional statement that allows users to run different blocks of code based on the value of a single variable or expression. You provide a value, like a number, string, or expression, inside the switch condition, and then list different cases to compare with the value. If a case matches the value, the code under that case runs, and if none of the condition matches, then the default block will be executed.

JavaScript Switch Statement Syntax

JavaScript provides you with the following syntax to use a switch case statement. Let’s understand the syntax with each component in detail:

switch (expression) {
    case value1:
        // Code to run if expression === value1
        break;
    case value2:
        // Code to run if expression === value2
        break;
    // You can add more cases as needed
    default:
        // Code to run if no case matches
}

• switch (expression): This is the value that you want to check. It can be anything like a variable, string, or condition.
• case values: These are the possible values that you define to compare with the expression.
• break: This is defined as a keyword in JavaScript that stops the code from moving to the next case. If the condition is true, the code written in that block will be executed, and the rest of the cases are ignored.
• default: This is an optional block. It only runs when none of the cases match the expression.

Launch Your Web Development Career

Start Learning Now

Explore Program

Examples of Switch Case Statements in JavaScript

Now, let us look at some JavaScript switch case examples. These examples will help you understand more about the switch case statement in JavaScript.

Example 1: Simple Example with String Matching

Output:

Explanation: In this example, a fruit variable is compared with each case. Since the value of the fruit variable is apple. The switch case matches the value with each case, and if the condition matches, it runs that block of code. The break keyword prevents the code from running the remaining cases.

Example 2: Using Boolean Condition

Output:

Explanation: This JavaScript switch case example shows how to use comparison operators with switch case in JavaScript. It checks for a condition, and once a matching condition is found (score >= 80), it runs the code written in that case and ignores the rest of the block.

How the JavaScript Switch Statement Works?

The switch statement in JavaScript is used to make decisions in the code. It helps you to execute the code based on the right case. Here is how it works when used in the code:

1. Expression is Evaluated: In the first step, the value written inside the switch statement is calculated. This value could be anything, including a number, a string, a number or any expression.
2. It Compares Using Strict Match (===): After this, the value is compared to each case by using the strict equality operator, which means it checks both the value and the type.
3. Code Block Executes: The switch statement in JavaScript compares the expression with each case. If a match is found, the code written under the matching case runs.
4. The break Keyword Stops Further Checks: The break keyword written inside every case stops the remaining checks. Without the break keyword, the code will continue running the next cases, even if they don’t match with expression.
5. If No Match is Found: In case no match is found, the code written in the default case will be executed. The default case is just like the else block and is useful for handling unexpected values in your JavaScript conditional statement.

The break Keyword

The break keyword is important while using switch case in JavaScript. It stops the browser from running more code once a matching case is found. Without a break, the switch statement will not stop.

Example: Switch Case Without break.

Output:

Explanation: In this example, a JavaScript switch case statement is used to compare a number value with each case. Here, you are not using a break keyword, which means the code after successfully matching with the desired case, not stop and executes the remaining code until it finds the break keyword.

The default Keyword

The default case in a switch statement JavaScript executes when none of the case values match the expression. It is similar to the else block in an if-else statement in JavaScript. Let’s understand the default case with an example:

Example: Displaying a message according to the weather.

Output:

Difference Between if-else and switch Statements

Both if-else and switch case JavaScript statements are used to make decisions in your code, but they work differently. Here is the comparison between the if-else statement and switch case in JavaScript.

Conclusion

The switch statement JavaScript is an important and best way to handle multiple conditions based on a single value or expression. It can keep your code organised and more readable. You can use the break keyword to stop the code from running the next case. For writing complex logic and or ranges, if-else statements are more preferred than switch statements in JavaScript. By understanding switch statements in JavaScript, you can write better and efficient code.

To learn more about switch statements in JavaScript, check out this Web Development course and also explore JavaScript Interview Questions prepared by industry experts.

JavaScript Switch Statement – FAQs