JavaScript == vs === : A Simple Explanation

When you're working with JavaScript, one of the first things you'll encounter is comparing values. To do this, JavaScript offers two main operators: == (double equals) and === (triple equals). Although they might look similar, they function quite differently. In this blog, we'll break down what these operators do, how they differ, and when you should use each one.

1. The == Operator: Loose Equality

   The == operator is known as the loose equality operator. It compares two values for equality after type conversion. This means that if the values are of different types, JavaScript will try to convert them to the same type before making the comparison.

console.log(5 == '5'); // true

In this example, JavaScript converts the string '5' to the number 5 before comparing. Since both values are now 5, the comparison returns true.

console.log(true == 1); // true

Here, true is converted to the number 1, so the comparison returns true.

console.log(null == undefined); // true

Both null and undefined are treated as equal in loose equality comparison, even though they are different types.

---

2. The === Operator: Strict Equality

   The === operator is known as the strict equality operator. It compares two values for equality without type conversion. For the comparison to return true, both the value and the type must be the same.

console.log(5 === '5'); // false

In this case, no type conversion occurs, so 5 (a number) is not equal to '5' (a string). Therefore, the comparison returns false.

console.log(true === 1); // false

Here, true (a boolean) is not the same type as 1 (a number), so the comparison returns false.

console.log(null === undefined); // false

null and undefined are different types (null is an object, while undefined is its own type), so strict equality returns false.

---

3. Why === is Generally Preferred Over == ?

In JavaScript, it's common practice to use === instead of == to avoid the pitfalls of type coercion. Type coercion (And this is going to be the topic for my next blog) can lead to unexpected results and bugs that are hard to track down. Using === ensures that you are explicitly checking for both value and type, leading to more predictable and reliable code.

console.log('' == 0); // true

Here, JavaScript converts the empty string '' to the number 0, which can be surprising and lead to unintended behaviour in your code.

Using === Instead:

console.log('' === 0); // false

With ===, there’s no type conversion, so an empty string is not equal to 0, avoiding unexpected results.

---

4. When to Use == ?

   Although === is generally preferred, there are scenarios where == is useful, particularly when comparing with null or undefined.

function checkValue(value) {
    if (value == null) {
        console.log('Value is null or undefined');
    }
}

Here, the == operator checks if value is either null or undefined in a single condition, which can be convenient.

---

5. Summary

   • == (Loose Equality): Converts the values to the same type before comparison.

   • === (Strict Equality): Compares both the value and type without conversion.

While == can be useful in some situations, === is often the safer choice, preventing unexpected type coercion and making your code more predictable.

By understanding the difference between == and ===, you can write cleaner and more reliable JavaScript code. Remember to use === when you want to avoid surprises, and reserve == for specific cases where type coercion is actually what you need.

---

If you enjoyed this blog, hit the like button. To stay updated with more JavaScript tips and tutorials, subscribe to my newsletter! You'll get the latest blogs, coding tips, and exclusive content right in your inbox. Don't miss the next post—follow me and subscribe now!