Functions of the equals operators (== and ===)

The two equals operators supported by JavaScript can cause a little bit of confusion when working with them.

When using ==, values can be considered equal even when they are of different types. This can be confusing even for a senior JavaScript developer. Let's analyze how == works using the following table:

Type(x)	Type(y)	Result
null	undefined	true
undefined	null	true
Number	String	x == toNumber(y)
String	Number	toNumber(x) == y
Boolean	Any	toNumber(x) == y
Any	Boolean	x == toNumber(y)
String or Number	Object	x == toPrimitive(y)
Object	String or number	toPrimitive(x) == y

 

If x and y are of the same type, then JavaScript will use the equals method to compare the two values or objects. Any other combination that is not listed in the table gives a false result.

The toNumber and toPrimitive methods are internal and evaluate the values according to the tables that follow.

The toNumber method is as follows:

Value type	Result
undefined	This is NaN
null	This is +0
Boolean	If the value is true, the result is 1; if the value is false, the result is +0
Number	This is the value of the number

 

Finally, toPrimitive is as follows:

Value Type	Result
Object	If valueOf returns a primitive value, it returns the primitive value; otherwise, if toString returns a primitive value, it returns the primitive value and otherwise returns an error

 

Let's verify the results of some examples. First, we know that the output of the following code is true (string length > 1):

console.log('packt' ? true : false); 

Now, what about the following code? Let's take a look:

console.log('packt' == true); 

The output is false, so let's understand why:

• First, it converts the boolean value using toNumber, so we have packt == 1.
• Then, it converts the string value using toNumber. Since the string consists of alphabetical characters, it returns NaN, so we have NaN == 1, which is false.

What about the following code? Let's take a look:

console.log('packt' == false); 

The output is also false, and the following is why:

• First, it converts the boolean value using toNumber, so we have packt == 0.
• Then, it converts the string value using toNumber. Since the string consists of alphabetical characters, it returns NaN, so we have NaN == 0, which is false.

What about the === operator? This is much easier. If we are comparing two values of different types, the result is always false. If they have the same type, they are compared according to the following table:

Type(x)	Values	Result
Number	x has the same value as y (but not NaN)	true
String	x and y are identical characters	true
Boolean	x and y are both true or both false	true
Object	x and y reference the same object	true

 

If x and y are different types, then the result is false. Let's consider some examples:

console.log('packt' === true); //false  
console.log('packt' === 'packt'); //true 
var person1 = {name:'John'};  
var person2 = {name:'John'}; 
console.log(person1 === person2); //false, different objects