Why You Should Never Use (==) in JavaScript
Tags: webdev, javascript, react, beginners
Published: 2023-10-30 05:55:35

While this topic may appear basic and familiar but I think we've all been there, using `==` when `===` was the better choice, only to wonder why our code behaves strangely.

So no "_ugh you didn't even know this silly, it was so simple_" comments please and let's unravel the mysteries of JavaScript's equality operators together.

## Loose Equality

The loose equality operator `==` is designed for type coercion (datatype conversion), allowing JavaScript to convert operands to a common type **BEFORE** comparison. 

While this can be convenient, it can also lead to subtle bugs.

### Example 1: String and Number

```javascript
const a = 10;
const b = '10';
console.log(a == b) // Result: true
```

- Even though `a` is a number and `b` is a string, we get true. This is because the type of the variable `a` is converted to a string before making the comparison.
 
- After the comparison, the value is checked in both the variables. If it's same, we will get true otherwise we will get false. 

**But that's not a problem, at least the values are same?**

Haha, just wait for it..

### Example 2: NaN Comparison

```javascript
NaN == NaN;  // Result: false
```

- Due to the complexities of `NaN`, using `==` to compare `NaN` values will ALWAYS return false. 

- For `NaN` checks, use `isNaN()` or a strict comparison: `===`.

### Example 3: String and Boolean

```javascript
const a = true;
const b = 'true';
console.log(a == b)
```

**If you thought the answer is true, unfortunately that's not correct.**

Surprised huh?

- If either operand is a **Boolean**, it will be converted to a number (true becomes 1 and false becomes 0). 
**Now, you know why the answer was true, not false in the above example.**

- It is because the value of the variable `a` (true) gets converted to a number before the comparison. So after comparison, we're basically comparing `1` and `'true'` hence we get false because the variables contain different values.

Pretty unexpected behavior, **I TOLD YOU.**

Hence many experienced developers favor strict equality operator `===` for its strictness, as it reduces ambiguity and encourages explicit type handling.

## Strict Equality

The strict equality operator `=== ` is, well, very strict. It compares both **value** and **type**, making it more predictable and less prone to unexpected results.

### Example 1: String and Number

```javascript
"5" === 5; // Result: false
```

Since the types are different, the comparison returns `false`.

### Example 2: Boolean and Number

```javascript
false === 0; // Result: false
```

In this case, false and 0 have different types, so the comparison is `false`.

## Conclusion

In JavaScript, clarity and predictability are vital. While loose equality operator can be convenient, it introduces potential pitfalls and surprises. The choice between `==` and `===` depends on your intent and having knowledge of both of the operators is must but there are reasons you should avoid using `==` in your code as we discussed above. 

Hope it helps!

For more such content feel free to connect with me.

LinkedIn: [https://www.linkedin.com/in/quratulain](https://www.linkedin.com/in/quratulain-shoro-7792721a4/)

GitHub: [https://github.com/QuratAin](https://github.com/QuratAin)