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.
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.
!= 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
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:
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
e 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.
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
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.
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
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.
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
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
TFor Example
If both operands are numbers, then use the number comparison.
//number comparison
console.log(10 > 5) //true
if both operands are string, then uses the string comparison
//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
// 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.
// 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.
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
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.
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.
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.
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
//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.
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.
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
Read More
