ECMAScript Relational Operators

Relational operators perform comparison operations. Each relational operator returns a Boolean value.

Conventional comparison method

Relational operators such as less than, greater than, less than or equal to, and greater than or equal to perform comparison operations on two numbers, which are the same as arithmetic comparison operations.

Each relational operator returns a Boolean value:

var bResult1 = 2 > 1	//true
var bResult2 = 2 < 1	//false

However, the behavior of applying relational operators to two strings is different. Many people think that less than means "ahead in alphabetical order", and greater than means "behind in alphabetical order", but that is not the case. For strings, each character code of the first string is compared numerically with the character code of the corresponding position in the second string. After completing this comparison operation, a Boolean value is returned. The problem is that the character codes of uppercase letters are all less than those of lowercase letters, which means that the following situations may occur:

var bResult = "Blue" < "alpha";
alert(bResult);	//Output true

In the above example, the string "Blue" is less than "alpha" because the character code of letter B is 66, and the character code of letter a is 97. To obtain the comparison result in true alphabetical order, it is necessary to convert the two numbers to the same case form (either uppercase or lowercase) before comparison:

var bResult = "Blue".toLowerCase() < "alpha".toLowerCase();
alert(bResult);	//Output false

Converting both operands to lowercase ensures that the correct identification is made that "alpha" comes before "Blue" in alphabetical order.

Comparing Numbers and Strings

Another tricky situation occurs when comparing two strings that represent numbers, such as:

var bResult = "25" < "3";
alert(bResult);	//Output "true"

The code above compares the string "25" and "3". Both operands are strings, so they are compared by their character codes (the character code of "2" is 50, and the character code of "3" is 51).

But, if one of the operands is converted to a number, the result is interesting:

var bResult = "25" < 3;
alert(bResult);	//Output "false"

Here, the string "25" will be converted to the number 25 and then compared with the number 3, as expected.

Whenever a number and a string are compared, ECMAScript will convert the string into a number and then compare them in numerical order.

But what if the string cannot be converted into a number? Consider the following example:

var bResult = "a" < 3;
alert(bResult);

Can you predict what this code will output? The letter "a" cannot be converted into a meaningful number. However, if the parseInt() method is called on it, the result is NaN. According to the rules, any relational operator containing NaN must return false, so this code also outputs false:

var bResult = "a" >= 3;
alert(bResult);

Generally, if the two values involved in the less than operator return false, then the greater than or equal to operator must return true. However, if a number is NaN, the situation is not the same.