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
}
- 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');
}
on this code above, the program will log Rabat, because the given country is equal to Morocco.
Rabat
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');
}
Output:
Rabat
Cairo
Madrid
Paris
your country is not in our list
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');
}
Output:
Rabat
Cairo
Madrid
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');
}
Output:
Rabat
Cairo
Madrid
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 !");
}
Output:
you have to pay 60$
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 !");
}
Output:
I don't know!
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 :)
Top comments (2)
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.I totally agree with you, thank you for the comment 😊🙏