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
loose equality in JavaScript
The loose equality operator == compares two values after performing type coercion, converting them to a common type before comparison. This differs from strict equality (===) which compares both value and type.
Syntax
operand1 == operand2
How Loose Equality Works
When using ==, JavaScript follows specific conversion rules:
- If types are the same, compare values directly
- If one is a number and the other a string, convert string to number
- If one is boolean, convert to number first
-
nullandundefinedare equal to each other
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loose Equality Example</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.result {
font-size: 18px;
font-weight: 500;
color: blueviolet;
background: #f5f5f5;
padding: 15px;
border-radius: 5px;
margin: 10px 0;
}
.btn {
background: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Loose Equality in JavaScript</h1>
<div class="result"></div>
<button class="btn">Show Comparisons</button>
<h3>Click the button to see loose equality examples</h3>
<script>
let resEle = document.querySelector(".result");
let btnEle = document.querySelector(".btn");
btnEle.addEventListener("click", () => {
resEle.innerHTML = "<strong>Loose Equality Results:</strong><br><br>";
// Number and string comparison
resEle.innerHTML += `1 == "1": ${1 == "1"}<br>`;
// Boolean conversion
resEle.innerHTML += `true == 1: ${true == 1}<br>`;
resEle.innerHTML += `false == 0: ${false == 0}<br>`;
// null and undefined
resEle.innerHTML += `null == undefined: ${null == undefined}<br>`;
// Empty string and zero
resEle.innerHTML += `"" == 0: ${"" == 0}<br>`;
// Array conversion
resEle.innerHTML += `[] == 0: ${[] == 0}<br>`;
});
</script>
</body>
</html>
Output
Loose Equality Results: 1 == "1": true true == 1: true false == 0: true null == undefined: true "" == 0: true [] == 0: true
Comparison with Strict Equality
| Expression | Loose Equality (==) | Strict Equality (===) |
|---|---|---|
1 == "1" |
true | false |
null == undefined |
true | false |
0 == false |
true | false |
Common Pitfalls
Loose equality can produce unexpected results due to type coercion:
<!DOCTYPE html>
<html>
<body>
<script>
console.log(0 == []); // true (unexpected)
console.log("0" == []); // false (unexpected)
console.log(0 == ""); // true
console.log(false == "0"); // true
// These might surprise you
console.log(" \t\r
" == 0); // true (whitespace converts to 0)
console.log([] == ![]); // true (very confusing!)
</script>
</body>
</html>
Best Practices
- Prefer strict equality (
===) for most comparisons - Use loose equality only when you specifically need type coercion
- Be aware of the coercion rules to avoid unexpected behavior
- Consider explicit type conversion instead of relying on coercion
Conclusion
Loose equality (==) performs type coercion before comparison, which can be useful but also leads to unexpected results. Use strict equality (===) when you need to compare both value and type without conversion.
Updated on: 2026-03-15T23:18:59+05:30
300 Views
Advertisements