Introduction to Comparison Operators in JavaScript

While writing different programs, sometimes we face situations where we need to compare two values and then we can proceed ahead. For example, you can only get a driving licence if your age is greater than or equal to 18 years. This can be expressed in programming using this (>=) comparison operator. Refer to the code given below.

In the above example, we have assigned the 'age' variable a value 19 and used the greater than or equal to (>=) comparison operator for the comparison in the if-else conditional statement. Hence, "You can get the driving licence" is returned in the console as (age >= 18) returned true. This is how the Comparison Operators in Javascript can be applied in programming.

As the name suggests, Comparison Operators are used to compare two operands(simply values). A boolean value (either true or false) is returned based on comparing two values, and different actions or decisions are taken based on that returned boolean value. There are eight Comparison Operators in Javascript. Refer to the table given below.

Examples

We have declared variables and used comparison operators with two operands (here numbers) in those variables. Note that the value that will be stored in these variables after the comparison is the boolean value(either true or false) as we have used comparison operators. In the below-given examples, the operand on the left of the comparison operator is referred to as the first operand, and the operand on the right is referred to as the second operand.

Example 1:

In val_1, a greater than (>) operator is used. It returns true if the first operand is greater than the second operand and false otherwise. Hence for (40 > 54), we get false because 40 is not greater than 54.

Example 2:

In val_2, less than (<) operator is used. It returns true if the first operand is less than the second operand and false otherwise. Hence for (40 < 54), we get true because 40 is less than 54.

Example 3:

In val_3, a greater than or equal to (>=) operator is used. It returns true if the first operand is greater than or equal to the second operand and false otherwise. Hence, for (15 >= 20), we get false because 15 is not greater than or equal to 20.

Example 4:

In val_4, less than or equal to the (<=) operator is used. It returns true if the first operand is less than or equal to the second and false otherwise. Hence, we get true for (15 <= 20) because 15 is less than 20. Even if we replace 15 with 20, we get true as an equal sign is also present in this(<=) operator.

Example 5:

In val_5, an equal to (==) operator is used. It converts both the operands to the common or same data type and returns true if both the operands are equal in value. Hence, for (7 == '7') we get true.

Example 6:

In val_6, a strict equal to (===) operator is used. It does not convert the operands to the common data type before comparing them and returns true if both the operands are equal in value as well as the same in data type. Hence, for (7 === '7'), we get false as both the operands are equal in value but different in data types as the first operand 7 is of number data type and the second operand '7' is of string data type.

Example 7:

In val_7, not equal to (!=) operator is used. It converts both the operands to the common data type and returns true if both the operands are not equal in value. Hence, for (7 != '7') we get false.

Example 8:

In val_8, a strict not equal to (!==) operator is used. It does not convert the operands to the common or same data type before comparing them and returns true if both the operands are not equal in value. Hence, for (7 !== '7'), we get true as both the operands are equal in value but different in data types as the first operand 7 is of number data type and the second operand '7' is of string data type.

Comparing Numbers

While comparing the operands that are numbers, numeric comparison is done by JavaScript in which both the number operands will be compared to each other. In the example given below, a is compared with b.

Comparing Strings

The comparison is completely different in the case of strings. Strings characters have character codes that are compared one by one when the comparison is between two strings. Let us understand this by an example-

Explanation

In the 1st output, you can see that the 'str_compared' variable returns true. But how? It is because of the comparison of character codes of both the string operands. We see the comparison of strings, but actually, character codes are compared behind the scenes. We can get the character codes of the 1st character of both the strings using the charCodeAt(index) method, as you can see in the example above. As the character code of variable 'str_2' i.e. 66 is less than that of variable 'str_1' i.e. 71, str_compared (str_2 < str_1) is returned true.

There can be some cases where you will get unexpected results for example -

Explanation:

The above code shows that the output of variable 'str_compared' is false now. But why? It is because of the first character of variable 'str_2' which is in lowercase now, due to which its character code is also different (greater than the previous one). To solve this issue, we must first convert both the strings to a similar case, either uppercase or lowercase, for correct character code comparison. This will result in correct output. See the code given below.

Comparing a Number with a Value of Another Type

When comparing numbers with other data type operands that are non-numeric like strings, JavaScript converts the non-numeric operands to a numeric one and then compares them.

In the 1st example above, 5 is a numeric value while '4' is a string value. JavaScript converts the string '4' to a numeric 4 and then compares them. Hence we get true in return as 5 is greater than 4. The second example is similar.

Comparing Objects in JavaScript

In JavaScript, Objects are used to store values in the form of key: value pairs, i.e. key(name of the variable) and value separated by using a colon. Objects can have properties (key and value pairs) and methods (an object property having a function definition as a value).

Comparing an object with a non-object

To compare an object with a non-object, JavaScript needs a value from the object that is to be compared. Hence to get this value from that object, JavaScript calls the valueOf() method. valueOf() method as the name suggests returns the value. In case if the valueOf() method is not present in that object, JavaScript calls the toString() method. The toString() method returns a value that JavaScript uses for comparing an object with a non-object. Note that all of this process is performed internally by JavaScript. Refer to the example given below.

Code:

Output:

Explanation

In the 1st output above, you can clearly see that when the first object "notebook" is compared with 60, true is returned as the valueOf() method in the object "notebook" has returned the value 60 that is equal to the other non-object value which is also 60.

In the 2nd output above, as the valueOf() method is not present in the object "comicbook", the toString() method has returned the value that is 30. This returned value is then used for the comparison with another operand 20. Hence, false is returned after the comparison as 30 is not less than 20.

Comparing an object with another object

Code:

Output:

In the output above, an object 'notebook' is compared with another object 'comicbook'. It is a straight comparison between the two objects. The 'notebook' object has returned 60, which is not equal to the value that the 'comicbook' object has returned i.e. 30. Hence, false is returned in the console.

Comparing a Boolean with Another Value

While comparing a boolean with another data type value in JavaScript, the boolean value is first converted to a number. Then it is compared as we know that the boolean in JavaScript has two values that are true and false. From these two values, only one is returned at the comparison time, i.e. either true or false. Hence JavaScript converts true to one(1) and false to zero(0). Refer to the examples given below.

Explanation

As you can see, when we console.log the comparison of boolean with another value and boolean value itself, true is treated as 1, and false is treated as 0. As a result, we get true for 'true > 0' because '1 > 0' one is greater than zero. Other examples also work in the same way.

Comparing null and undefined

null: It is an assignment value which means that it is specially assigned to a variable as a value that represents an empty state of that variable.

undefined: It is not an assignment value, which means it is not specially assigned to a variable. JavaScript returns undefined on a particular instance. For example, undefined is returned when a variable is declared but not assigned any value. Refer to the code given below:

In the above example, you can see that 'myVar' is declared but not assigned any value; hence when we console.log 'myVar', undefined is returned, and when we check the type of myVar using the typeOf operator, again, the undefined is returned.

But null is different from undefined. Null is an assignment value that is specially assigned to a variable as a value representing an empty state of that variable.

In the above example, it can be seen that we get null when we console.log 'myVar' variable. But we get Object when we check the type of 'myVar' variable using the typeof Operator in JavaScript.

Hence, it is clear that null and undefined are of different types. null is of object type, and undefined is of undefined type. Let us check if null equals undefined or not.

When we checked if (null == undefined), we got true in the console, but when we checked if (null === undefined), we got false because null equals undefined but not strictly. As we have already seen that null and undefined are of different types, we get false when they are compared using the strict equal operator(===). We will see the difference between equal and strict equal operators in detail in this article.

Comparing NaN with Other Values

In JavaScript, NaN (Not a Number) is a special numeric value used to verify a non-numeric value. It returns true when the specified value is not a number and false otherwise. Refer to the NaN example given below.

Whenever we compare NaN with any other operand, we get false. Refer to the examples given below.

In the above examples, you can see that we get false whenever NaN is compared with any other operand. Observe in variable_5 that false is returned even when NaN is compared with itself.

What is the Strict Equal (=== ) Operator and not Strict Equal (!==) Operator in JavaScript?

Strict equal (=== ) operator and not strict equal (!==) operator, both are the Comparison Operators in Javascript used to compare two operands.

Strict equal operator (=== ) does not convert the data types of the operands before comparing them, it compares their equality on the basis of their values just as they are. This operator is used to check the equality of operands strictly. Due to such a strict equality behaviour, it is called a 'Strict' equal operator(===). This operator returns true when the operands are strictly equal and false otherwise.

In the above example, the variable 'myVar_1' returns false in the console because 30 is a number, whereas "30" is a string.

Not Strict equal operator (!== ) also does not convert the data types of the operands before comparing them; it compares their inequality based on their values just as they are. In simple words, it is just the not of or negative of a strict equal operator, which is used to check the inequality strictly. Due to such strict inequality behaviour of this operator, it is called the 'Not Strict' equal operator(!==). This operator returns true when the operands are not strictly equal and false otherwise.

In the above example, the variable 'myVar_2' returns true in the console because 30 is a number, whereas "30" is a string.

The Difference Between Equal operator and Strict Equal Operator in JavaScript