DEV Community

Cover image for Understanding Switch Statement In Javascript
Aya Bouchiha
Aya Bouchiha

Posted on

Understanding Switch Statement In Javascript

Hello, I'm Aya Bouchiha, today, we're going to discuss switch statements in Javascript.

The switch is a statement used to perform different operations based on multiple conditions (cases)

Writing a switch statement

switch (expression) {
    case 'value_1':
        // do something
        break;
    case 'value_2':
        // do something
        break;
    case 'value_3':
        // do something
        break;
    default:
    // do something if the varaibale does not match any case
}
Enter fullscreen mode Exit fullscreen mode
  • we need to know that if the variable matches multiple cases, the code block of the first matched case will be executed.
  • case: we use it to match against an expression, If it matches, the code block of this case will be executed. If It is not, The default code block will be executed.
  • default: is used to perform some operations if the variable does not match any case of the specified cases.
  • break (optional): is a statement associated with each case that orders the program to breaks out of the switch statement.

Example 1:

const country = 'Morocco';

switch (country) {
    case 'USA':
        console.log('Washington');
        break;
    case 'Morocco':
        console.log('Rabat');
        break;
    case 'Egypt':
        console.log('Cairo');
        break;
    case 'Spain':
        console.log('Madrid');
        break;
    case 'France':
        console.log('Paris');
        break;
    default:
        console.log('your country is not in our list');
}
Enter fullscreen mode Exit fullscreen mode

on this code above, the program will log Rabat, because the given country is equal to Morocco.

Rabat
Enter fullscreen mode Exit fullscreen mode

Example 2

Let's delete all break statements;

const country = 'Morocco';

switch (country) {
    case 'USA':
        console.log('Washington');
    // break;
    case 'Morocco':
        console.log('Rabat');
    // break;
    case 'Egypt':
        console.log('Cairo');
    // break;
    case 'Spain':
        console.log('Madrid');
    // break;
    case 'France':
        console.log('Paris');
    // break;
    default:
        console.log('your country is not in our list');
}
Enter fullscreen mode Exit fullscreen mode

Output:

Rabat
Cairo
Madrid
Paris
your country is not in our list
Enter fullscreen mode Exit fullscreen mode

We observe that the code blocks of the matched case which is Morocco, and the rest cases including the default one are executed due to forgetting to write break statements.

Example 3

Let's remove break statements that are only inside Morocco's and Egypt's case, Let's see what will happen :)

const country = 'Morocco';

switch (country) {
    case 'USA':
        console.log('Washington');
        break;
    case 'Morocco':
        console.log('Rabat');
    // break;
    case 'Egypt':
        console.log('Cairo');
    // break;
    case 'Spain':
        console.log('Madrid');
        break;
    case 'France':
        console.log('Paris');
        break;
    default:
        console.log('your country is not in our list');
}
Enter fullscreen mode Exit fullscreen mode

Output:

Rabat
Cairo
Madrid
Enter fullscreen mode Exit fullscreen mode

We observe that the code blocks of Morocco's and Egypt's cases are executed because of not writing a break statement.

conclusion 1

  • If the break statement is not written, the code block of the matched case and the rest cases including the default one, will be executed until the program finds a break statement.

Example 4:

If we wrote the same code of example 3 and we replaced Spain's break statement with a return statement, the program will log the same thing.

const country = 'Morocco';
switch (country) {
    case 'USA':
        console.log('Washington');
        break;
    case 'Morocco':
        console.log('Rabat');
    // break;
    case 'Egypt':
        console.log('Cairo');
    // break;
    case 'Spain':
        console.log('Madrid');
        return;
    case 'France':
        console.log('Paris');
        break;
    default:
        console.log('your country is not in our list');
}
Enter fullscreen mode Exit fullscreen mode

Output:

Rabat
Cairo
Madrid
Enter fullscreen mode Exit fullscreen mode

Conclusion 2

  • break statement is not required if the code block contains a return statement.

Example 5:

const price = 60;

switch (price) {
    case 100:
        console.log('you have to pay 100$');
        break;
    case 80:
        console.log('you have to pay 80$');
        break;
    case 60:
        console.log('you have to pay 60$');
        break;
    default:
        console.log("I don't know !");
}
Enter fullscreen mode Exit fullscreen mode

Output:

you have to pay 60$
Enter fullscreen mode Exit fullscreen mode

In this example, the program logged "you have to pay 60$" because the price is 60. Let's do a small change by replacing the price cases with a string without changing the value, just adding a double or single quote :)

const price = 60;

switch (price) {
    case '100':
        console.log('you have to pay 100$');
        break;
    case '80':
        console.log('you have to pay 80$');
        break;
    case '60':
        console.log('you have to pay 60$');
        break;
    default:
        console.log("I don't know !");
}
Enter fullscreen mode Exit fullscreen mode

Output:

I don't know!
Enter fullscreen mode Exit fullscreen mode

We observe that the code block of the default case is executed instead of the third case code block due to changing the datatype.

conclusion 3

Switch cases use strict comparison which is ===, So the cases values should be the same type of the given expression.

Summary

  • Switch statement use strict comparison.
  • case: we use it to match against an expression, If it matches, the code block of this case will be executed. If It is not, The default code block will be executed.
  • default: is used to perform some operations if the variable does not match any case of the specified cases.
  • break (optional): is a statement associated with each case that orders the program to breaks out of the switch statement. In addition, a break statement is not required if the code block contains a return statement.
  • If the break statement is not written, the code block of the matched case and the rest cases including the default one, will be executed until the program finds a break or a return statement.

Hope you enjoyed reading this post

Suggested Posts

References

To Contact Me:

email:developer.aya.b@gmail.com

telegram: Aya Bouchiha

Hope you enjoyed reading this post :)

Discussion (2)

Collapse
amn3s1a2018 profile image
Amn3s1a2018

It would be nice, to talk about the switch(true) pattern, which is useful for some more complex conditions, but can become a wrong tool if not used wisely.

Collapse
ayabouchiha profile image
Aya Bouchiha Author

I totally agree with you, thank you for the comment 😊🙏