JavaScript Switch Statement

Sharing is caring 🙂

Understanding the Basic Syntax of the Switch Statement: The syntax for the JavaScript switch statement is similar to the syntax for the if-else statement, but it can be more concise and easier to read in certain situations. Here is an example of the basic syntax of the switch statement using Nintendo game names:

switch (expression) {
  case 'Super Mario Bros':
    // code block
    break;
  case 'The Legend of Zelda':
    // code block
    break;
  case 'Metroid':
    // code block
    break;
  default:
    // code block
}

In the example above, the expression is evaluated and compared to the values in the case clauses. If a match is found, the code block associated with that case is executed. If no match is found, the code block in the default clause is executed.

Using the Switch Statement to Test for Multiple Values
Implementing the Default Case in a Switch Statement
Using the Break Statement to Exit a Switch Statement
Compare the Switch Statement to If-Else Statements

The break statement is used to exit the switch statement and prevent the code from executing the code blocks of the remaining cases. If you omit the break statement, the code will continue to execute the code blocks of the following cases until a break statement is encountered or the end of the switch statement is reached.

Here is an example of using the switch statement to determine which game to play based on the value of a variable:

const game = 'Super Mario Bros';

switch (game) {
  case 'Super Mario Bros':
    console.log('Let's play Super Mario Bros!');
    break;
  case 'The Legend of Zelda':
    console.log('Let's play The Legend of Zelda!');
    break;
  case 'Metroid':
    console.log('Let's play Metroid!');
    break;
  default:
    console.log('Sorry, we don't have that game.');
}

// Output: "Let's play Super Mario Bros!"

In this example, the value of the game variable is compared to the values in the case clauses. Since the value of game is 'Super Mario Bros', the code block associated with the 'Super Mario Bros' case is executed, and the message “Let’s play Super Mario Bros!” is logged to the console.

Using the Switch Statement to Test for Multiple Values

The switch statement in JavaScript allows you to test for multiple values in a single case clause. Here is an example of using the switch statement to test for multiple values using names of game consoles:

const console = 'Nintendo Switch';

switch (console) {
  case 'Nintendo Switch':
  case 'PlayStation 4':
  case 'Xbox One':
    console.log('This is a current-generation console.');
    break;
  case 'Nintendo 64':
  case 'PlayStation 1':
  case 'Sega Genesis':
    console.log('This is a retro console.');
    break;
  default:
    console.log('I am not sure what type of console this is.');
}

// Output: "This is a current-generation console."

In the example above, the switch statement tests the value of the console variable against the values in the case clauses. Since the value of console is 'Nintendo Switch', the code block associated with the 'Nintendo Switch' case is executed, and the message “This is a current-generation console.” is logged to the console.

Note that multiple case clauses can share the same code block by omitting the break statement. In the example above, if the value of the console variable was 'PlayStation 4' or 'Xbox One', the same code block would be executed.

This feature of the switch statement can be useful for testing multiple values or grouping similar cases together. However, remember that the switch statement is not as flexible as the if-else statement, as it does not allow for testing for complex conditions or using comparison operators. In these cases, the if-else statement may be a better choice.

Implementing the Default Case in a Switch Statement

The default case in a switch statement is a clause that is executed when no other case clause matches the value of the switch expression. The default case is optional, but it is a good practice to include a default case in your switch statement to handle cases that are not covered by the other case clauses.

Here is an example of using the default case in a switch statement:

const color = 'purple';

switch (color) {
  case 'red':
    console.log('The color is red.');
    break;
  case 'green':
    console.log('The color is green.');
    break;
  case 'blue':
    console.log('The color is blue.');
    break;
  default:
    console.log('The color is not red, green, or blue.');
}

// Output: "The color is not red, green, or blue."

In the example above, the value of the color variable is 'purple', which does not match any of the values in the case clauses. Therefore, the code block in the default clause is executed, and the message “The color is not red, green, or blue.” is logged to the console.

The default case is only executed if none of the other case clauses match the value of the switch expression. If a case clause is matched, the code block of that case is executed, and the default case is skipped.

const color = 'green';

switch (color) {
  case 'red':
    console.log('The color is red.');
    break;
  case 'green':
    console.log('The color is green.');
    break;
  case 'blue':
    console.log('The color is blue.');
    break;
  default:
    console.log('The color is not red, green, or blue.');
}

// Output: "The color is green."

In this example, the value of the color variable is 'green', which matches the value in the 'green' case. Therefore, the code block of the 'green' case is executed, and the message “The color is green.” is logged to the console. The default case is skipped.

Using the Break Statement to Exit a Switch Statement

The break statement is used to exit a switch statement and prevent the code from executing the code blocks of the remaining cases. The break statement is typically used at the end of each case clause to ensure that the switch statement is exited as soon as a match is found.

Here is an example of using the break statement to exit a switch statement:

const animal = 'cat';

switch (animal) {
  case 'dog':
    console.log('This is a dog.');
    break;
  case 'cat':
    console.log('This is a cat.');
    break;
  case 'bird':
    console.log('This is a bird.');
    break;
  default:
    console.log('I am not sure what animal this is.');
}

// Output: "This is a cat."

In the example above, the value of the animal variable is 'cat', which matches the value in the 'cat' case. The code block of the 'cat' case is executed, and the message “This is a cat.” is logged to the console. The break statement then exits the switch statement and prevents the code from executing the code blocks of the remaining cases.

If the break statement is omitted, the code will continue to execute the code blocks of the following cases until a break statement is encountered or the end of the switch statement is reached.

const animal = 'cat';

switch (animal) {
  case 'dog':
    console.log('This is a dog.');
  case 'cat':
    console.log('This is a cat.');
  case 'bird':
    console.log('This is a bird.');
  default:
    console.log('I am not sure what animal this is.');
}

// Output:
// "This is a cat."
// "This is a bird."
// "I am not sure what animal this is."

In this example, the value of the animal variable is 'cat', which matches the value in the 'cat' case. The code block of the 'cat' case is executed, and the message “This is a cat.” is logged to the console. Since the break statement is omitted, the code continues to execute the code blocks of the following cases until the default case is reached. As a result, the messages “This is a bird.” and “I am not sure what animal this is.” are also logged to the console.

It is important to use the break statement appropriately in your switch statements to ensure that the code executes as intended and to avoid unintended behavior.

Compare the Switch Statement to If-Else Statements

The JavaScript switch statement is used to execute one block of code from multiple conditions. It is similar to the if-else statement, but it is more efficient and easier to read in some cases.

Here is an example of using an if-else statement to check a variable and execute different code depending on its value:

let x = 5;

if (x === 5) {
  console.log("x is 5");
} else if (x === 6) {
  console.log("x is 6");
} else {
  console.log("x is not 5 or 6");
}

Here is the same example using a switch statement:

let x = 5;

switch (x) {
  case 5:
    console.log("x is 5");
    break;
  case 6:
    console.log("x is 6");
    break;
  default:
    console.log("x is not 5 or 6");
}

As you can see, the switch statement is shorter and easier to read, especially if there are multiple conditions to check. The switch statement also executes faster than an if-else statement in some cases.

However, the if-else statement is more flexible, as it allows for any type of expression to be used as the condition, whereas the switch statement only allows for a single value to be compared using the strict equality operator (===). Additionally, the if-else statement allows for multiple conditions to be checked using logical operators (&&, ||, etc.), which is not possible with the switch statement.

So, which one to use depends on the specific needs of your code. In general, if you only need to check for a few specific values, the switch statement is a good choice. If you need to check for a wider range of values or conditions, or if you need to use logical operators, the if-else statement is a better choice.

Sharing is caring 🙂