Why you should use == over ===

Why you should use == over ===

Let's start with the fun part the ECMA DOCS!

Docs for == ECMAScript 11.9.3

image.png

Docs for === ECMAScript 11.9.6

image.png

TL;DR: the difference between == and === is that in the case when variables on the left and right are of different types e.g. string and number, it immediately returns false (If Type(x) is different from Type(y), return false). However, == does coercion (type conversion) and proceeds with comparison.

Here are some best practices and use cases to help you decide which operator to use === or ==:

Case 1: Comparing Variables of the Same Type
If you need to compare two variables that are of the same type, use either the == or === operator. Both operators will work the same in this case.

Case 2: Comparing Variables of Different
Types When comparing two variables that are of different types, such as a string and a number, use the == operator if you need to perform type coercion before comparison. The == operator will automatically convert the string to a number before comparison. However, if you want to compare the values without type coercion, use the === operator.

Case 3: Comparing Variables of Different
If you are comparing two variables and one of them can be a string while the other is a number, such as when you are dealing with input values from a form, you should use the == operator. Because you need to convert the string representation of the number, such as "1", into a number to be able to compare it with the other variable. The == operator performs this conversion automatically for you.
However, if you decide to go with === in you will end up with one of the thous

Number(x) === Number(y)
parseInt(x) === parseInt(y)
+x === +y
String(x) === String(y)
''+x === ''+y
`${x}` === `${y}`
JSON.stringify(x) === JSON.stringify(y)
JSON.parse(JSON.stringify(x)) === JSON.parse(JSON.stringify(y))

After parsing both sides or one side, using === is redundant because you manually made sure that types on both sides are the same so == and === will behave the same way.

let num = 420,
    inputNum = "420"
Number(inputNum) == num
// No need for === because left side is already same type as right
Number(x) === Number(y)
// Again no need for === because left and right sides are of same type

Case 4: Unknown Types
If you are comparing two variables and you don't know what type one or both of them can be. then you have a problem with your code and you need to refactor it. Because in what reasonable case you will need to compare two variables and have no idea what type they can be?

Case 5: Comparing Arrays, Objects, and Reference Types
When comparing arrays, objects, or other reference types, both the == and === operators will give you the same result. They perform shallow (reference) comparisons, so you don't need to use the === operator.

Case 6: Working with TypeScript
If you are using TypeScript, you are working with typed variables. In this case, if you have two variables with different types and you want to compare them, using the === operator is not helpful because it will always return false. Instead, use the == operator to convert the values and perform the comparison.

Case 7: Comparing NaN
When comparing two NaN values, both the == and === operators will give you false. In this case, use Object.is(NaN, NaN) instead.

Case 8: Comparing null and undefined
When comparing null and undefined, you can use the === operator. However, if you need to do this comparison frequently, consider using the ??= , ?? , .? operators or creating functions like isUndefined(val), isNull(val), and isNil(val) for better readability.

In general, it is considered to be best to use the strict equality operator (===) to avoid mistakes and unexpected results in your code. However, I believe that using == is better because if you feel unsure about using it, it might mean you need to clean up your code. Also, the loose equality operator (==) can sometimes be helpful because it does type coercion.