Comparison Operators or Relational operators compares the values of the two operand. The comparison operators are less than <, less than or equal <=, greater than >, greater than equal >=, equal (== & ===) & not equal ( != & !==). All comparison operators return true or false.
Table of Contents
Equality Operators == & ===
There are two operators for checking equality in JavaScript. One is (==) known as an equality operator or loose equality operator. The other one is (===) strict Equality operator.
Equality Operators in JavaScript
Not Equal Operators != & !==
!= operator checks the un equality of two operands. It is similar to == except it returns true if operands are not equal. The !== operator is similar to === except it returns true if operands are not equal.
Not Equal Operators in JavaScript
Less than (<)
The Less than (<) comparison operator checks if the left operand is less than its right operand. If yes then it returns true otherwise returns false
Examples:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | let x=10 console.log(x < 20) //true console.log(x < 15) //true console.log(x < 10) //false console.log(x < 5) //false //String Examples let y="Hello" console.log(y < "I") //true console.log(y < "Hello") //false console.log(y < "H") //false console.log(y < "J") //true |
Greater than (>)
The greater than > operator checks if the value of the left operand is greater than the right operator. If yes then it returns true else false.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | let x=10 console.log(x > 20) //false console.log(x > 15) //false console.log(x > 10) //false console.log(x > 5) //true //String Examples let y="Hello" console.log(y > "I") //false console.log(y > "Hello") //false console.log(y > "H") //true console.log(y > "J") //false |
Less than or equal (<=)
The less than or equal (<=) operator returns true if the left operand is less than or equal to its right operand. else it evaluates to false.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | let x=10 console.log(x <= 20) //true console.log(x <= 15) //true console.log(x <= 10) //true console.log(x <= 5) //false //String Examples let y="Hello" console.log(y <= "I") //true console.log(y <= "Hello") //true console.log(y <= "H") //false console.log(y <= "J") //true |
Greater than or equal (>=)
The Greater than or equal (>=) relational operator returns true if its left operand is greater than or equal to its right operand else it returns false.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | let x=10 console.log(x >= 20) //false console.log(x >= 15) //false console.log(x >= 10) //true console.log(x >= 5) //true //String Examples let y="Hello" console.log(y >= "I") //false console.log(y >= "Hello") //true console.log(y >= "H") //true console.log(y >= "J") //false |
How Comparison works
The comparison is done only using the number comparison or string comparison. If the operands are of different types, then they are either converted to numbers or strings before they are compared
For Example
If both operands are numbers, then use the number comparison.
1 2 3 4 | //number comparison console.log(10 > 5) //true |
if both operands are string, then uses the string comparison
1 2 3 4 | //string comparison console.log("10" > "5") //false |
If one of the operands is a number, the other operand is converted to a number and then uses the number comparison. If the other operand does not convert to a number then the result is always false
1 2 3 4 5 6 7 8 9 10 11 12 13 | // number comparison. The non number operand is converted to number console.log(10 > "5") //true console.log(2 > true) //true // true is 1 console.log(1 > false) //true // false is 0 console.log(1 > "") //true // "" is 0 console.log(1 > " ") //true // " " is 0 console.log(1 > null) //true // null 0 //Compiler warns here because of the type change. |
1 2 3 4 5 6 7 8 | // number comparison. The non number does not convert to Number. Result is always false console.log(10 > "a") //false console.log(10 > NaN) //false console.log(10 > undefined) //false |
If the operands are neither string nor number, and if they do convert to number or string, then the comparison operator converts them and compares them. The Example is a Date that converts to a number.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var date1 = new Date() var date2 = new Date() console.log(date1 > date2) //false console.log(date1 < date2) //false console.log(date1 >= date2) //true console.log(date1 <= date2) //true //Only Equality does not work. Becuase they are objects console.log(date1 == date2) //false console.log(date1 === date2) //false |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var date1 = new Date('2020-11-01'); var date2 = new Date('2020-11-20'); console.log(date1 > date2) //false console.log(date1 < date2) //true console.log(date1 >= date2) //false console.log(date1 <= date2) //true //Only Equality does not work. Because they are objects console.log(date1 == date2) //false console.log(date1 === date2) //false |
Note that using Equality Operators == & === does not work on dates. Because the Date is an object and to be considered equal, they must point to the same object.
Comparison involving any other types will always result in false.
Comparison Operators and Strings
The strings comparison uses the dictionary or lexicographical order. And the comparison is done character-by-character basis, using the Unicode values of the characters.
A character-by-character comparison starts with comparing the first character of both operands. If these are greater or less, then the comparison ends and the result is returned.
If the characters are equal, then the comparison moves to the next character. And the process continues until it reaches the end.
In the end, if both operands are finished, then the strings are Equal. else the operand with a longer length is considered greater.
The string comparison is case-sensitive. All capital letters are “less than” all lowercase letters. For a case insensitive comparison, you need to convert the string either to upper case or lower case.
Comparison Operators and Date
As you can see, the comparison operators on date work correctly. But Equality operators fail. An interesting thing to note here is that the >= & <= operators also check for Equality.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var date1 = new Date('2020-11-01'); var date2 = new Date('2020-11-01'); //Correct console.log(date1 > date2) //false console.log(date1 >= date2) //true console.log(date1 <= date2) //true console.log(date1 < date2) //false //Wrong console.log(date1 == date2) //false console.log(date1 === date2) //false |
The difference is due to the fact how javascript handles these comparisons. The Equality Operators in JavaScript check if the objects are of the same instance
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | //date1 & date2 has same value, but are different objects var date1 = new Date('2020-11-01'); var date2 = new Date('2020-11-01'); console.log(date1 == date2) //false console.log(date1 === date2) //false //date3 & date1 are now same objects var date3 = date1 console.log(date1 == date3) //true console.log(date1 === date3) //true |
The comparison operators do not check for equality, when we use >= & <= operators.
The greater than or equal (date1 >= date2) internally uses the not greater than , (!(date1 < date2)) Hence avoiding the use of Equality Operators.
1 2 3 4 5 6 7 8 9 | var date1 = new Date('2020-11-01'); var date2 = new Date('2020-11-01'); console.log(date1 >= date2) //true //The above is converted to the following internally console.log(!(date1 < date2)) //true |
Similarly, the less than or equal uses the not less than internally as shown below.
1 2 3 4 5 6 7 8 9 | var date1 = new Date('2020-11-01'); var date2 = new Date('2020-11-01'); console.log(date1 <= date2) //true //The above is converted to the following internally console.log(!(date1 > date2)) //true |
Reference
Read More
- JavaScript Tutorial
- JavaScript Operators
- Arithmetic Operators
- Unary plus (+) & Unary minus (-)
- Increment & Decrement Operators
- Comparison or Relational Operators
- Strict Equality & Loose Equality Checker
- Ternary Conditional Operator
- Logical Operators
- Bitwise Operators
- Assignment Operators
- Nullish Coalescing Operator
- Comma Operator
- Operator Precedence
