Strict Equality vs Loose Equality Operators

If you have started learning to code, you must have learned about the equality operator. Among different operators in JavaScript, it's a unique one. There exist two types of equality operators. === (Strict Equality) and == (Loose Equality). Let's learn about these:

Strict Equality:

=== equality operator is very simple. It compares two variables and checks:

1. If they have the same data type?

2. If both of them are similar?

   1. For string: they must have the same character in similar order.

   2. For integer: same number.

   3. For objects: Must have the same reference to the object.

   4. For boolean: Both must have the same value. (True or False).

   5. For bigint: Both must have the same numerical value.

A better way to understand will be with an example:

console.log(🍊 === 🥬); // Output: false
console.log(🍊 === 🍎); // Output: false => Orange is not equal to Apple
console.log(🍊 === 🍊); // Output: true

Carefully observe the above example:

1. The first console returns false because type of both are different. One is vegetable while the other one is fruit.

2. The second console returns false because the type of both are the same(fruits) but one is orange while the other one is an apple.

3. The third console returns true because both have the same type(fruits) and are similar to each other.

Strict equality strictly compares the values of both variables and only returns true if the type and value are the same. It does not do any changes to the type of the variable itself.

Loose Equality:

Loose equality can be used to compare two variables of different types. It can be used to compare strings and integers, integers with boolean and vice-versa. Here are some rules that JS follows:

1. If both are of the same type, they are compared with === operator and the result is returned.

2. If the type is different, they are converted and then compared using === operator. This forceful type conversion also follows some rules:

   1. Number and String: string is converted to type number => then compared. If the string can't be converted to a number, the conversion is NaN which returns false when compared with the number.

   2. Number and Boolean: Boolean is converted to a number (true = 1 and false = 0) => both are compared and the result is returned.

   3. Number and Bigint: Numerical value of both is compared and the result is returned. If anyone of the variable is NaN, +∞, or -∞, return false.

   4. String and Boolean: It's quite interesting => boolean is converted to type number=> string is converted to type number => both are compared and the result is returned.

   5. String and BigInt: String is converted to bigint => Compared and the result is returned.

   6. null and undefined: This is a special case, comparing null and undefined in the loose equality returns true. It's simply because it is the rule as stated in ECMAScript.

   7. Any type and Object: Directly comparing object and other primitive types cause the conversion of object => primitive type => compared and the result is returned.

console.log("25" == 25); // Output: true
console.log("25ABC" == 25); // Output: false => NaN(String to Number) and Number
console.log(25 == true); // Output: false => 25 and 1 (true = 1)
console.log(1 == true); // Output: true => 1 and 1 (true = 1)
console.log(25 == 25n); // Output: true => 25 and 25n => Numerical value is compared.
console.log("As we see" == false); // Output: false => NaN(String converted to number) and 0 (false = 0)
console.log(null == undefined); // true => due to ECMAScript rule

Loose equality compares the type of the variables, If they are not same, it converts both of them to same type and then compares with strict equality operator.

TLDR:

1. In Strict equality, variables are compared as they are and they do not undergo an implicit conversion of types.

2. Whereas in loose equality, the variables undergo type coercion and are converted to the same type and then compared.

For more reference on the rules behind comparison, you can visit here.

Also, this is an excellent tool for following what's going on behind the comparison during loose equality comparison. Have fun with it.

Hope this blog helped address all your doubts.