When we want to compare two values in javascript, our first instinct is to use "==".
Example:

let a = 5;
let b = 7;
console.log(a==b) //false

But there is another type of equality operator which is stricter than "==". This operator is "===".

"==" operator

The "==" operator is known as the loose equality operator. Its main purpose is
1. To check whether its two operands are equal after type coercion, then
2. Returning a Boolean result

As seen in the above example, it checked the value of variables "a" and "b" and gave a boolean answer which in our case was false.

So what does type coercion mean? Type coercion means that JavaScript will automatically convert the data types of the values being compared to a common type before making the comparison.

For Example:

let a = 5;
let b = "5";
console.log(a==b) //true

In this code, we can see that variable "a" has a type Number whereas variable "b" has a type string. When we tried to compare them using "==". It first converted the type of variable "b" from string to number and then checked equality with "a". Their values came equal and thus the result is returned as true.

"===" operator

The "===" operator is known as the strict equality operator. Its main purpose is
1. To check whether its two operands are equal without type coercion then
2. Returning a Boolean result

"===" is not doing type coercion so it will not convert the data types of the values being compared and will only return true if the values have the same type and the same value.

let a = 5;
let b = "5";
console.log(a===b) //false

As you can see in the above example, when we checked values of "a" and "b" using "==", it resulted in true, whereas when we used "===", it resulted in false. As it also checked datatype and in this case variable "a" was the type number and variable "b" was the type string which was a mismatch.

Which is prioritized by the "===" operator: type or value?

The "===" has precedence for type over the value.
This means that If two values are to be compared and their type doesn't match, the result will immediately be returned as false, regardless of their actual values.

Example:

let a_string = "0";
let b_num = 0;
console.log(a===b) //false

In this example, the "===" operator saw that the two variables "a_string" and "b_num" has different datatype. So without even checking the value, it returned false.

"==" vs "==="

Below are a few examples where "==" gives a different result than "===".

1. Comparing a boolean value to a number:

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

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

2. Comparing null and undefined:

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

Conclusion

It is important to understand the difference between "==" and "===" in JavaScript and to choose the appropriate operator for each comparison.

• "==" will only check the value and if the operands have a different type, it will do type coercion and then check the value.

• "===" will check the type, if that matches then will check the value and give the result. If the type itself is different, It will immediately result in a false.

So, To sum up, Using the strict equality operator(===) is a better option as it won't give unexpected results from type coercion. It will help to prevent bugs and make the code more effective and efficient.

References

• MDN Strict Equality

• MDN Equality comparisons and sameness

• GURU99 Difference Equality strict operator