The Power of JavaScript: Operators - Comparison Operators
(Page 3 of 4 )
Comparison operators perform relational operations on their operands and produce a Boolean value (true or false). What I mean by relational operations is what the values of the operands are in relation to each other: if the operands are equal to each other or not equal, if the first operand is greater than the second operand or if the first operand is less than the second operand. The comparison operators are binary operators too. They work on numerical or string values, and they are explained in the following table.
Operator | Operation Explanation |
| < | The less than operator produces the value true if the first operand is less than the second operand, and produces the value false if not. Comparison operators works on numerical or string operands. With numerical operands, if x is assigned the value 3 and y assigned the value 4, x < y produces the value true; both operands are numerical values. But if both operands are strings, the comparison will be based on several rules: - The values are evaluated based on the number of characters they contain, so "hi" < "hello" produces the value true.
- The values are evaluated based on the alphabetical order, so "a" < "b" produces the value true.
- The values are evaluated based on the capitalization. This needs a little explanation. In the ASCII values the upper-case letters have lower values than the lower-case letters, which means that "a" < "A" produces the value true.
If one of the operands is a string value (and the other is numeric value), the interpreter will try to convert it to a numeric value, so 23 < "345" produces the value true. If the string value can't be converted to a numeric value (something like 23 < "hello"), then the interpreter produces the value NaN, and the expression will evaluate to false. |
| > | The greater than operator produces the value true if the first operand is greater than the second operand, and produces false if not. |
| <= | The less than or equal operator produces true if the first operand is less than or equal to the second operand, and produces false if not. |
| >= | The greater than or equal operator produces true if the first operand is greater than or equal to the second operand, and produces false if not. Note that comparison operators can't compare any operand to the special value NaN because we can't write an expression that tests for not a number > not a number. The interpreter produces NaN because it doesn't know any other value to produce in an expression such as (23 % "Javascript"). We can't compare not a number value to another not a number so x > NaN or NaN >= NaN or
"NaN" <= NaN always returns false, and all other NaN comparisons return false. |
| == | The equal to operator returns true if both operands are equal and false if not. It performs data type conversion too, so 12 == "12" returns true as much as 12 == 12 returns true. Also, if you compared 1 == true (as we said that true means 1 and false means 0) it will return true, too, because it converts true to 1, so it's much the same as 1 == 1 |
| != | The not equal to operator returns true if both operands are not equal and returns false if they are equal. It also performs data type conversion, so the expression false != 1 returns true. |
| === | The strict equal to operator returns true if both operands are equal (and of the same type). It doesn't perform any data type conversion, so an expression like 1 === true returns false and 1 === "1" also returns false, because this operator checks for the type of the operands. 1 is a numerical value and "1" is a string value; their types are different. |
| !== | The strict not equal to operator returns true if both operands are not equal. It will not perform any data type conversion, so 10 !== 1 returns true as much as 10 !== "1" returns true. |
Comparison Operators Example
Write the following code to a file, save it with the extension .html, then load it into your browser.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hello World</title>
<script language="JavaScript" type="text/javascript">
var x = 10;
var y = 6;
result = x >= y;
document.write(result + "<br>");
result = x !== y;
document.write(result + "<br>");
result = x > "3";
document.write(result + "<br>");
result = x == "hi";
document.write(result + "<br>");
x = "Hello";
y = "hello";
result = x < y;
document.write(result + "<br>");
result = "a" < "b";
document.write(result + "<br>");
</script>
</head>
<body>
</body>
</html>
You will get the following Boolean values written to the Web page:
Let's walk through it step-by-step. We have declared x and assigned it the value 10, and also y with the value 6. The statement result = x >= y; needs some explanation because you may think that the interpreter assigns the value of x to result, then does the comparison operation with y, but this is far from the truth. We will discuss this issue in details in the section Operators Precedence and Associativity, but for now let's just say that the interpreter understands that you need to assign the boolean produced value of the expression x >= y to the variable result. The value is true because x (10) is greater than y (6).
The statement result = x !== y returns true because 10 is not equal to 6. In the statement result = x > "3"; the interpreter tries to convert the string value "3" to a numerical value, so x > 3 returns true. The interpreter returns false from the statement result = x == "hi"; because "hi" can't be converted to a numerical value, so the interpreter produces the value NaN. Now the expression looks like x == NaN. NaN can't be compared to any other value, even itself, so the expression always evaluate to false.
We assign new values (string values) to x and y in the next 2 statements. The statement result = x < y; produces the value true because "Hello" is the same as "hello" except that the capital letter H has a lower ASCII value than the small letter h; that's why we got the boolean value true. The next statement result = "a" < "b"; produces the value true because the value letter a comes before the letter b, so a is less than b.
Next: Increment and Decrement Operators >>
More JavaScript Articles
More By Michael Youssef
/ 13 
