Equality is one of the most fundamental concepts in JavaScript, but it can also be a bit tricky if you're not familiar with its nuances. In this blog, we will focus on two types of equality operators: == and ===. Let’s break them down to understand their differences and when to use them.
1️⃣ == (Allows Coercion)
The == operator checks for equality but allows type coercion. This means JavaScript will try to convert the values into the same type before comparing them.
📌 Example:
console.log(5 == '5'); // true
console.log(false == 0); // true
console.log(null == undefined); // true
⁉️ Explanation
In these cases, JavaScript forcefully converts (or coerces) one type to another to make the comparison possible. For instance:
- The string
'5'is coerced into the number5before comparing.
falseis coerced into0.
nullandundefinedare considered equal in loose equality.
🚨 Warning:
While == might seem convenient, it can lead to unexpected results, especially when comparing values of different types. Always double-check your logic when using this operator.
2️⃣ === (Does Not Allow Coercion)
The === operator, also known as the strict equality operator, does not perform type coercion. It compares both the value and the type of the operands.
📌 Example:
console.log(5 === '5'); // false
console.log(false === 0); // false
console.log(null === undefined); // false
⁉️ Explanation
Here, no type conversion happens. The operands must match in both value and type for the comparison to return true. This makes === a safer and more predictable option.
🤔 What is Coercion?
In simple terms, coercion is JavaScript's way of "forcefully persuading" one value type to convert into another for the sake of comparison.
Real-Life Example: Comparing Apples and Oranges
Imagine you’re comparing an apple and an orange:
1️⃣ == (Loose Equality)
It’s like saying, "An apple is the same as an orange if both are fruit." Here, you focus only on their category (type coercion).
🍎 == 🍊 → True (Both are fruit)
2️⃣ === (Strict Equality)
It’s like saying, "An apple is only equal to an orange if they are exactly the same fruit." No forcing or conversion happens here.
🍎 === 🍊 → False (One is an apple, the other is an orange)
💡 Best Practices
1️⃣ Use === by default.
- Strict equality avoids unexpected results caused by coercion.
2️⃣ Use == only when necessary.
- If you’re intentionally leveraging type coercion (e.g., when comparing null and undefined), document your reasoning clearly.
💻 Try it:
console.log("== Case 1 ==")
const var1 = '10'
const var2 = '10'
console.log(var1 == var2) // Output: true
console.log(var1 === var2) // Output: true
console.log("== Case 2 ==")
const var3 = '10'
const var4 = 10
console.log(var3 == var4) // Output: true // JavaScript automatically coercion variable var4 to var3 string type
console.log(var3 === var4) // Output: false // Must ensure both value have same datatype
console.log("== Case 3 ==")
const var5 = ''
const var6 = 10
console.log(var5 == var6) // Output: false
console.log(var5 === var6) // Output: false
console.log("== Case 4 ==")
const var7 = ''
const var8 = 10
console.log(var7 == var8) // Output: false
console.log(var7 === var8) // Output: false
console.log("== Case 5 ==")
const var9 = 0
const var10 = ''
console.log(var9 == var10) // Output: true
console.log(var9 === var10) // Output: false
console.log("== Case 6 ==")
const var11 = false
const var12 = ''
console.log(var11 == var12) // Output: true
console.log(var11 === var12) // Output: false
console.log("== Case 7 ==")
const var13 = null
const var14 = undefined
console.log(var13 == var14) // Output: true
console.log(var13 === var14) // Output: false
Conclusion
== allows type coercion and can result in unexpected comparisons. === is stricter and ensures both value and type match. Understanding coercion can help you write more predictable and bug-free code.
Happy coding! ✨
SOCIAL SHARE CARD GENERATOR