Understanding Equality in JavaScript

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 number 5 before comparing.
• false is coerced into 0.
• null and undefined are 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! ✨