The == and === operators have long been the subject of online debate. Let's look at how these two differ from one another.

Both operators are comparison operators, as they are used to compare the values of variables. But there is a slight difference between these operators. Let's have a look at it.

Note: The operators Loose Equality and Strict Equality both return boolean values [true or false].

Loose Equality Operator(==)

Double equals (==) is known as the Loose Equality Operator. It's a comparison operator that is used to check whether two operands are the same or not.

• However, Type Coercion is used before comparing its value.

Now the question is, what is Type Coercion?

Type Coercion: In JavaScript, the process of converting a value from one data type to another data type implicitly (internally) so that both the operands are of the same type is known as Type Coercion.

Once the type coercion is done, the loose equality checks the operands' value. If it has the same value, it returns "true," otherwise "false."

Example 1:

In the above example 1, num is a constant variable that holds the number value of 19, and likewise, str is a constant variable that holds the string value of "19."

The "==" operator first converts the str value from a string type to a number type, and then it is compared to num. Now, since both the operands' data types are the same and their values are the same, it returns true.

Example 2:

In the above example 2, str is a constant variable that holds the string value of "20", and likewise, num is a constant variable that holds the number value of 20.

The "==" operator first converts the str value from a string type to a number type, and then it is compared to num. Now, since both the operands' data types are the same and their values are the same, it returns true.

From the preceding two examples, I hope you can see that it doesn't matter whether a string is on the right or left side of an operator (==), if one of the operands is a number, then the other operand will be converted into a number data type.

Example 3:

In the above example 3, bool is a constant variable that holds the boolean value of true, and likewise, num is a constant variable that holds the number value of 1.

The "==" operator internally first converts the boolean value to a number type and then compares it to num. Now, since both the operands' data types are the same and their values are the same, it returns true.

You're probably wondering how "true value" equates to "value 1." To clarify, in the above snippet, I have explicitly (intentionally) converted a bool value to a number type, and the result is 1. This means that when we convert a boolean "true" value to a Number, the output is 1, and likewise, for a "false" value, the output is 0.

As a result, in the preceding example, the (==) operator implicitly converts the boolean value to a number and returns true after comparing its value.

Note: Whenever there is a boolean operand and the other operand is anything, the boolean will be converted into a number, and it will compare accordingly.

Example 4 :

In Example 4, where bool=true and str="true," the comparison (bool==str) will first convert the boolean value "true" to a number 1, then compare it to the string "true." Since "true" cannot be converted to a number, it will be converted to "NaN." Therefore, the result of the comparison will be "false."

Strict Equality Operator(===)

Triple equals (===) is known as the Strict Equality Operator. The strict equality operator in JavaScript is an equality operator that compares two values for equality without converting their types. It does not use type coercion.

This means that for a comparison to succeed using the operator ===, both the value and the type of the input values must match. The comparison will return false if either the value or the type of the values disagree.

Being a loose equality operator, the == operator conducts type coercion when comparing two values. This means that before making the comparison, JavaScript will attempt to convert one or both of the values to a common type if the types of the values being compared are different. It is typically advised to use the === operator rather than the == operator when comparing values in JavaScript due to the potential for unexpected outcomes brought on by type coercion.