Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Is it a good practice to end switch with defaults in JavaScript?
In this tutorial, we will learn if it is a good practice to end switch with defaults in JavaScript.
In JavaScript, we generally use the if or if-else statements if we need to check any conditions. Still, if we need to check multiple conditions for an expression, it becomes very complex and unorganized, so we use the switch statements for that situation.
The switch statement compares the value of an expression to a series of case clauses, then executes statements after the first case clause that matches the value, and so on, until a break statement is met. If no case matches the value of the expression, the switch statement’s default case is executed.
Users can follow the below syntax to use the switch statement.
Syntax
switch (expression) {
case value1:
// code block if the expression matches the value1
break
case value2:
// code block if the expression matches the value2
break
...
default:
// code block if expression not matches any values
}
The above syntax shows the switch statement's different cases, break statements, and default statements.
It is a question that arrives to many JavaScript developers: Is it good practice to end switch statements with a default clause or not? But before directly jumping to the conclusion, let’s see what behavior the switch statement shows with and without the default clause.
Example 1
Switch statement without a ‘default` case
In the below example, we have used the switch in JavaScript without the default. We use an array of result grades and pass each grade in the switch statement to show the original meaning of these grades. For example, the grade “O” will show “Outstanding”. A button “Show” is associated with a click, an event that executes a function whenever a user clicks on it. This function loop through each grade and outputs its corresponding meaning in the webpage using a switch statement.
<html> <body> <h2>Using the <i>switch statement without default</i> in JavaScript</h2> <button onclick = "show()"> Show </button> <div id = "root" style = "border: 1px solid gray; margin: 5px 0px; padding: 5px" > </div> <script> // Grades array const grades = ['O', 'A', 'F', 'Z'] // root element const root = document.getElementById('root') // Showing grades in the webpage grades.map((grade) => { root.innerHTML += grade + '<br /> <br/>' }) // 'Show' button click event handler funtion function show() { root.innerHTML = ''; grades.map((grade) => { // switch statement switch (grade) { case 'O': root.innerHTML += grade + ' = Outstanding!' + '<br /> <br/>' break case 'A': root.innerHTML += grade + ' = Good!' + '<br /> <br/>' break case 'F': root.innerHTML += grade + ' = Fail!' + '<br /> <br/>' break } }) } </script> </body> </html>
So we can see if the expression did not match with any of the cases, then the switch statement did not run any code corresponding to it. Hence undesired output can arrive. In this case, the ‘Z’ grade is missing on the webpage after clicking the button.
Example 2
Switch statement with the ‘default’ case
In the example below, we will use the same example as the previous one, in this time, we will use the switch statement with the default clause and compare the two outputs.
<html> <body> <h2>Using the <i>switch statement with default</i> in JavaScript</h2> <button onclick = "show()"> Show </button> <div id = "root" style = "border: 1px solid gray; margin: 5px 0px; padding: 5px"> </div> <script> // Grades array const grades = ['O', 'A', 'F', 'Z'] // root element const root = document.getElementById('root') // Showing grades in the webpage grades.map((grade) => { root.innerHTML += grade + '<br /> <br/>' }) // 'Show' button click event handler funtion function show() { root.innerHTML = '' grades.map((grade) => { // switch statement switch (grade) { case 'O': root.innerHTML += grade + ' = Outstanding!' + '<br /> <br/>' break case 'A': root.innerHTML += grade + ' = Good!' + '<br /> <br/>' break case 'F': root.innerHTML += grade + ' = Fail!' + '<br /> <br/>' break default: root.innerHTML += grade + ' = Unknown Grade!' + '<br /> <br/>' } }) } </script> </body> </html>
So, after comparing both outputs of the switch statement with and without the default clause, we can conclude that the default values help to run the code when the expression does not match with any case clause. If the user did not use the default clause, then the output may show some undesired results, like in this tutorial, we see the ‘Z’ grade is omitted in the output in example 1. Hence, it is a good practice to end the switch with default in JavaScript.
576 Views
To Continue Learning Please Login