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
Explain Strict Comparison in JavaScript switch statement?
The JavaScript switch statement performs strict comparison (===) to match values. This means both value and type must be identical for a case to execute. If no strict match is found, the default case runs.
Understanding Strict Comparison
Strict comparison checks both value and type. For example, the number 1 is not equal to the string "1" in strict comparison:
<!DOCTYPE html>
<html>
<head>
<title>Strict Comparison Demo</title>
</head>
<body>
<script>
// Demonstrating strict vs loose comparison
console.log(1 == "1"); // true (loose comparison)
console.log(1 === "1"); // false (strict comparison)
document.getElementById("output").innerHTML =
"1 == '1': " + (1 == "1") + "<br>" +
"1 === '1': " + (1 === "1");
</script>
</body>
</html>
Switch Statement Example
Here's an example showing how switch performs strict comparison. When you enter a number in the input field, it becomes a string, so numeric cases won't match:
<!DOCTYPE html>
<html>
<head>
<title>Switch Strict Comparison</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.result { color: green; font-weight: bold; margin: 10px 0; }
input, button { padding: 5px; margin: 5px; }
</style>
</head>
<body>
<h2>JavaScript Switch Statement Strict Comparison</h2>
<p>Enter day number (1-7):
<input type="text" id="dayInput" placeholder="Enter 1-7">
<button onclick="checkDay()">CHECK</button>
</p>
<script>
function checkDay() {
let dayValue = document.getElementById("dayInput").value;
let result = document.getElementById("result");
// Input values are always strings!
console.log("Input value:", dayValue, "Type:", typeof dayValue);
switch (dayValue) {
case 1: // This will never match because dayValue is a string
result.innerHTML = "It's Monday";
break;
case 2:
result.innerHTML = "It's Tuesday";
break;
case 3:
result.innerHTML = "It's Wednesday";
break;
case 4:
result.innerHTML = "It's Thursday";
break;
case 5:
result.innerHTML = "It's Friday";
break;
case 6:
result.innerHTML = "It's Saturday";
break;
case 7:
result.innerHTML = "It's Sunday";
break;
default:
result.innerHTML = "No match found! Input '" + dayValue +
"' (string) doesn't match numeric cases.";
}
}
</script>
</body>
</html>
Correct Implementation
To fix this, either compare with strings or convert the input to a number:
<!DOCTYPE html>
<html>
<head>
<title>Fixed Switch Example</title>
</head>
<body>
<p>Enter day (1-7):
<input type="text" id="dayInput2" placeholder="Enter 1-7">
<button onclick="checkDayFixed()">CHECK</button>
</p>
<script>
function checkDayFixed() {
let dayValue = parseInt(document.getElementById("dayInput2").value);
let result = document.getElementById("result2");
switch (dayValue) { // Now comparing numbers to numbers
case 1:
result.innerHTML = "It's Monday";
break;
case 2:
result.innerHTML = "It's Tuesday";
break;
case 3:
result.innerHTML = "It's Wednesday";
break;
default:
result.innerHTML = "Enter a number between 1-7";
}
}
</script>
</body>
</html>
Key Points
- Switch uses strict comparison (
===), not loose comparison (==) - HTML input values are always strings, even when entering numbers
- Use
parseInt()orNumber()to convert strings to numbers - Alternatively, compare against string values in your cases
Conclusion
JavaScript switch statements always use strict comparison, requiring exact type and value matches. Convert data types appropriately or use string comparisons to avoid unexpected default case execution.
473 Views
