Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Explain common code blocks in JavaScript switch statement?
Common code blocks in JavaScript switch statements allow multiple cases to share the same execution code. This is achieved by omitting the break statement, causing execution to "fall through" to subsequent cases.
What are Common Code Blocks?
Common code blocks occur when multiple case values need to execute the same code. Instead of duplicating code, you can group cases together by omitting break statements.
Syntax
switch (expression) {
case value1:
case value2:
case value3:
// Common code for all three cases
break;
case value4:
// Different code
break;
default:
// Default code
}
Example: Grouping Weekdays and Weekends
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Switch Statement Common Code Blocks</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.result {
font-size: 18px;
font-weight: 500;
color: green;
margin: 10px 0;
}
input, button {
padding: 8px;
margin: 5px;
font-size: 16px;
}
</style>
</head>
<body>
<h2>Day Type Checker</h2>
<p>Enter day number (1-7):</p>
<input type="text" id="dayInput" placeholder="1-7">
<button onclick="checkDayType()">Check Day Type</button>
<div class="result" id="result"></div>
<script>
function checkDayType() {
const dayNum = parseInt(document.getElementById('dayInput').value);
const resultDiv = document.getElementById('result');
switch (dayNum) {
case 1:
case 2:
case 3:
case 4:
case 5:
resultDiv.innerHTML = "It's a weekday - Time to work!";
break;
case 6:
case 7:
resultDiv.innerHTML = "It's a weekend - Time to relax!";
break;
default:
resultDiv.innerHTML = "Please enter a number between 1-7";
resultDiv.style.color = "red";
return;
}
resultDiv.style.color = "green";
}
</script>
</body>
</html>
Example: Season Classification
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Season Classifier</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.result {
padding: 10px;
margin: 10px 0;
border-radius: 4px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h2>Season Finder</h2>
<p>Enter month number (1-12):</p>
<input type="number" id="monthInput" min="1" max="12" placeholder="1-12">
<button onclick="findSeason()">Find Season</button>
<div class="result" id="seasonResult"></div>
</div>
<script>
function findSeason() {
const month = parseInt(document.getElementById('monthInput').value);
const resultDiv = document.getElementById('seasonResult');
switch (month) {
case 12:
case 1:
case 2:
resultDiv.innerHTML = "?? Winter - Bundle up!";
resultDiv.style.backgroundColor = "#e6f3ff";
resultDiv.style.color = "#0066cc";
break;
case 3:
case 4:
case 5:
resultDiv.innerHTML = "? Spring - Flowers are blooming!";
resultDiv.style.backgroundColor = "#f0fff0";
resultDiv.style.color = "#228b22";
break;
case 6:
case 7:
case 8:
resultDiv.innerHTML = "?? Summer - Time for vacation!";
resultDiv.style.backgroundColor = "#fff8dc";
resultDiv.style.color = "#ff8c00";
break;
case 9:
case 10:
case 11:
resultDiv.innerHTML = "? Fall - Leaves are changing!";
resultDiv.style.backgroundColor = "#fdf5e6";
resultDiv.style.color = "#d2691e";
break;
default:
resultDiv.innerHTML = "Please enter a valid month (1-12)";
resultDiv.style.backgroundColor = "#ffe6e6";
resultDiv.style.color = "#cc0000";
}
}
</script>
</body>
</html>
How It Works
When a case matches but has no break statement, execution continues to the next case. This continues until a break statement is encountered or the switch block ends.
Key Points
- Omitting
breakcreates fall-through behavior - Multiple cases can share the same code block
- Always include
breakafter the shared code block - Use common code blocks to avoid code duplication
- The
defaultcase handles unexpected values
Conclusion
Common code blocks in switch statements provide an efficient way to handle multiple cases with the same logic. By strategically omitting break statements, you can group related cases together and maintain cleaner, more maintainable code.
Updated on: 2026-03-15T23:18:59+05:30
310 Views
Advertisements