If you’ve ever wondered about the difference between == vs === in JavaScript, you’re not alone. These two equality operators look similar but work very differently. It is really important to understand how == (double equals) and === (triple equals) work, as this knowledge can help you write cleaner, bug-free code.
🔁 What is == (Loose Equality)?
- Compares only values, not data types.
- If types differ, JavaScript tries to convert one or both values (called type coercion) before comparing.
Think of it like comparing euros and dollars: you need to convert one currency into the other before you can truly compare.
🔒 What is === (Strict Equality)?
- It compares both value and data type. No type conversion takes place.
- If data types differ, it immediately returns false.
- If data types are same, it compares values and give true or false accordingly.
🧠 Conversion Rules for == (When Types Differ)
JavaScript loves to “help out” when types don’t match using ==. It auto-converts stuff behind the scenes. Here’s its cheat sheet:
| When comparing… | JavaScript converts… |
|---|---|
| Number & String | String → Number |
| Boolean & Anything | Boolean → Number (true → 1, false → 0) |
| Object or Array & Primitive | Object/Array → Primitive via valueOf() or toString() |
| null & undefined | No conversion, but treated as equal (special rule) |
| null or undefined with others | No conversion & result is false |
If you’re curious about the in-depth rules behind == and === in JavaScript, check out this detailed explanation on MDN.
🔍 Full Comparison Table with Examples
| Expression | == Result | Why it’s true/false (simple) | === Result | Why it’s true/false |
|---|---|---|---|---|
5 == "5" | ✅ true | "5" changes to 5, number 5 stays 5, now → 5 == 5 | ❌ false | Different types: number vs string |
0 == false | ✅ true | false changes to 0, number 0 stays 0, now → 0 == 0 | ❌ false | Different types: number vs boolean |
"1" == true | ✅ true | "1" changes to 1, true also changes to 1, now → 1 == 1 | ❌ false | Different types: string vs boolean |
null == undefined | ✅ true | null and undefined treated equal by JS so it’s treated as true | ❌ false | Different types: null vs undefined |
null == 0 | ❌ false | null stays null, 0 stays 0, no conversion, so it’s treated as false | ❌ false | null and number are not equal |
undefined == 0 | ❌ false | undefined stays undefined, 0 stays 0, no conversion, so it’s treated as false | ❌ false | undefined and number are not equal |
[] == "" | ✅ true | [] changes to "", "" stays "" now → “” == “” | ❌ false | Array and string are different types |
[] == 0 | ✅ true | [] changes to "" (an empty string), and then "" further converts to 0. The right side 0 remains 0 now → 0 == 0 | ❌ false | Array and number are different types |
["0"] == 0 | ✅ true | ["0"] changes to "0", and then "0" further converts to 0. The right side 0 remains 0 now → 0 == 0 | ❌ false | Array and number are different types |
[1] == 1 | ✅ true | [1] changes to "1" and this "1" further changes to 1, right side 1 stays 1(as it is) now → 1 == 1 | ❌ false | Array and number are different types |
{ } == "[object Object]" | ✅ true | {} changes to "[object Object]", "[object Object]" stays "[object Object]" now → “[object Object]” == “[object Object]” | ❌ false | Object and string are different types |
{ } == { } | ❌ false | Two objects have different memory locations so it’s treated as false | ❌ false | Different references |
NaN == NaN | ❌ false | NaN is a special value that doesn’t match anything, not even itself so it’s treated as false | ❌ false | Even strict check doesn’t match NaN to NaN because they’re always considered not equal |
🧪 Try These in Your Console
console.log(5 == "5"); // true
console.log(0 == false); // true
console.log("1" == true); // true
console.log([1] == 1); // true
console.log([] == ""); // true
console.log([] == 0); // true
console.log({} == "[object Object]"); // true
console.log(null == undefined); // true
console.log(null == 0); // false
console.log(NaN == NaN); // false✅ Best Practice
- Prefer
===and!==to avoid unexpected coercion. - Use
==only if you fully understand these rules and really want loose comparison.
🎯 Quick Summary
| Operator | Name | Checks | Type Conversion? |
|---|---|---|---|
== | Loose Equality | Value only | ✅ Yes |
=== | Strict Equality | Value and Type | ❌ No |
📝 Final Thought
If you’re unsure whether coercion will cause trouble, always default to using ===. Your code will be cleaner, more predictable, and less prone to bugs.
