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
Strict equality vs Loose equality in JavaScript.
In JavaScript, there are two ways to compare values for equality: loose equality (==) and strict equality (===). Understanding the difference is crucial for writing reliable code.
Loose Equality (==)
The loose equality operator == compares values after converting them to a common type (type coercion). This can lead to unexpected results.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loose Equality Examples</title>
</head>
<body>
<h2>Loose Equality Results</h2>
<div id="output"></div>
<script>
let output = document.getElementById('output');
// Loose equality examples
output.innerHTML += `1 == "1": ${1 == "1"}<br>`;
output.innerHTML += `true == 1: ${true == 1}<br>`;
output.innerHTML += `false == 0: ${false == 0}<br>`;
output.innerHTML += `null == undefined: ${null == undefined}<br>`;
output.innerHTML += `"" == 0: ${"" == 0}<br>`;
</script>
</body>
</html>
1 == "1": true true == 1: true false == 0: true null == undefined: true "" == 0: true
Strict Equality (===)
The strict equality operator === compares both value and type without any conversion. No type coercion occurs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strict Equality Examples</title>
</head>
<body>
<h2>Strict Equality Results</h2>
<div id="output"></div>
<script>
let output = document.getElementById('output');
// Strict equality examples
output.innerHTML += `1 === "1": ${1 === "1"}<br>`;
output.innerHTML += `true === 1: ${true === 1}<br>`;
output.innerHTML += `false === 0: ${false === 0}<br>`;
output.innerHTML += `null === undefined: ${null === undefined}<br>`;
output.innerHTML += `"" === 0: ${"" === 0}<br>`;
</script>
</body>
</html>
1 === "1": false true === 1: false false === 0: false null === undefined: false "" === 0: false
Side-by-Side Comparison
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Equality Comparison</title>
</head>
<body>
<button onclick="compareEquality()">Compare Equality Operators</button>
<div id="result"></div>
<script>
function compareEquality() {
let result = document.getElementById('result');
result.innerHTML = "<h3>Loose Equality (==) Results:</h3>";
result.innerHTML += `1 == "1": ${1 == "1"}<br>`;
result.innerHTML += `undefined == null: ${undefined == null}<br>`;
result.innerHTML += "<h3>Strict Equality (===) Results:</h3>";
result.innerHTML += `1 === "1": ${1 === "1"}<br>`;
result.innerHTML += `undefined === null: ${undefined === null}<br>`;
}
</script>
</body>
</html>
Comparison Table
| Aspect | Loose Equality (==) | Strict Equality (===) |
|---|---|---|
| Type Conversion | Yes - performs type coercion | No - compares types directly |
| Performance | Slower due to conversion | Faster - direct comparison |
| Predictability | Less predictable results | More predictable and reliable |
| Best Practice | Generally avoided | Recommended approach |
Key Points
- Always use
===unless you specifically need type coercion - Loose equality can produce unexpected results due to implicit type conversion
- Strict equality is more performant and predictable
- ESLint and most style guides recommend using
===by default
Conclusion
Use strict equality (===) as the default choice for comparisons in JavaScript. It provides predictable behavior and better performance by avoiding type coercion. Reserve loose equality (==) only for specific cases where type conversion is intentionally needed.
Updated on: 2026-03-15T23:18:59+05:30
1K+ Views
Advertisements