The Operators

Is it bigger, smaller, or the same?

The Relational Operators

Operator	Function
<	Less Than test
>	Greater Than test
<=	Less Than or Equal To test
>=	Greater Than or Equal To test

Using the Relational Operators

These operators are also used in "if" and "while" statements.

// Relational Operators
if (count < 5) {
  // do something
}

while (count >= 10) {
  // do something
}

---

Relational Boolean Expressions

Relational operators also make boolean expressions that are either true or false.

Testing Relationships

// Is 10 bigger than 5?
document.write(10 > 5);

Is 10 less than 10?

// Is 10 less than 10?
document.write(10 < 10);

This means "Is 10 less than OR equal to 10", which is true.

// Is 10 less than or equal to 10?
document.write(10 <= 10);

What about strings?

Can we use this for strings and how would it make any sense?

// Is A less than B?
document.write("A" < "B"); // Does this work and make sense?

Yes, it makes sense to compare the relationships of strings.

Everything in the computer is a number, even characters like "A". Here's a chart showing the numbers in the computer for characters:

What Are Characters? - ASCII Chart

// Is "F" bigger than "f"?
document.write("Fred" > "fred");

Comparing strings

This is why "Fred" with an upper case "F" is smaller than "fred". All upper case letters are smaller than all lower case letters.

// Is "F" smaller than "f"?
document.write("Fred" < "fred");

---

Less Than <

Is the first value smaller than the second?

Relationship testing is done very often in our code, especially in repetition.

Numbers

Most of the time we compare numbers with "less than".

// Is 1 less than 10?
document.write(1 < 10);

This one catches people sometimes

// Is 10 less than 10?
document.write(10 < 10);

We can also use < with strings.

This will compare the numeric values of the strings. This can be very useful in some circumstances.

// Is "b" less than "c"?
document.write("b" < "c");

Comparing larger strings

It works with larger strings, too. It will compare each character from left to right until it finds a difference or it reaches the end. Since the upper case "R" has a lower numeric value than the "r" this returns "true".

// "R" is less than "r"
document.write("smalleR" < "smaller");

Comparing string and numbers?

Yes! It does type conversion for us.
Isn't that a problem? (Yes, it is.)

// numbers and strings?
document.write(10 < "100");
document.write("<br />");
document.write("10" < 100);

---

Greater Than >

Is the first value bigger than the second value?

Numbers

We frequently want to compare if some value is bigger than another. For example, is the new salary bigger than the maximum salary for that position?

// Greater than
let newSalary = 37500.00;
let maximumSalary = 40000.00;
document.write(newSalary > maximumSalary);

Another example showing floating point numbers.

// Greater than with floating point number
document.write(12.555555557 > 12.55555556);

This also works with strings

// Greater than with strings
document.write("ABC" > "abc"); // Why is this false?

---

Less Than or Equal To <=

Is the first value smaller than or equal to the first value?

Adding an equal sign changes the meaning subtly. This can cause some subtle bugs, too. We now have two questions to ask when we read a statement. First: "Is the first value smaller than the second value?". Second: "Is the first value the same as the second value?". If either of the questions is true then the result will be true.

Less Than or Equal To Example

Here's the same one from the less than section with the added equal sign. It's true now because 10 is equal to 10. A way to read this would be, "Is 10 the same or smaller than 10?". Yes, it is.

// Less than or equal to
document.write(10 <= 10);

This one has the same result as above.

// Less than or equal to
document.write(1 <= 10);

It works with strings, just like we thought it would.

// Less than or equal to with strings
document.write("b" <= "b");

Using variables

One situation that can be tricky is when using variables. What if we really meant that when "count" was 10 the result should be false? It is not immediately obvious that we've made a mistake. This becomes an issue when we get to repetition and looping.

// Less than or equal to with variables
let count;

count = 10;

document.write(count <= 10);

---

Greater Than or Equal To >=

Is the first value bigger than or equal to the second value?

Greater Than or Equal To Example

Just like the opposite operator this ones work like > with another question added to the test. With this example, the first question is false but the second question is true. First: "Is 10 greater than 10?". Second: "Is 10 equal to 10?". If either of the questions if true then the results is true.

// Greater than or equal to
document.write(10 >= 10); // This passes the second question

Do either of these need the second question?

// Greater than or equal to with numbers
document.write(12 >= 14);
document.write("<br />");
document.write(12 >= 11);

Strings too.

// Greater than or equal to with strings
document.write("fred" >= "Fred");

---

What about comparing different data types?

TL;DR From W3Schools - When comparing a string with a number, JavaScript will convert the string to a number when doing the comparison. An empty string converts to 0. A non-numeric string converts to NaN which is always false . When comparing two strings, "2" will be greater than "12", because (alphabetically) 1 is less than 2.

What happens here

// Greater than with strings and numbers
document.write("A" > 0);

This can be a bit confusing for many when they first look at it. Based upon the ASCII chart, you would think this is true. It’s not, it’s false. If that is false than what about this?

// Less than with strings and numbers
document.write("A" < 0);

You might think that is somehow miraculously true, since the other was false. It too is false.

Whoa!!!

Well that’s odd right? Here’s what is going on. The relationship operators (<, >, <=, >=) will attempt to do type conversion if both side of the comparison are not the same type. If one side is numeric and the other isn’t, it will do automatic (aka implicit) conversion. So… “A” will be converted to a number. “A” cannot be converted to a number, and therefore the value resulting is NaN, not a number. And NaN is neither less than nor greater than nor equal to 0.

Also, you might see something like this

// Greater than with numbers with a data type of string
document.write("100" > "99");

In this case, since both side are of the same data type, NO conversion will take place. And ordinary string comparison will take place, left to right. "1" is not greater than "9", therefore that expression is false. Note that it is doing string comparison here.

And then there is this

// Greater than with strings and numbers
document.write("100" > 99);

Given what I stated about the automatic conversion, the interpreter will convert the string “100” to a number. And then the comparison will be a numeric comparison and NOT a string comparison. This statement is then true.

The rules for relationship operators, is that JavaScript will automatically convert if needed, ie in the case of different data types being compared. If the variable can not be converted successfully, a string to a number, then you will get something like NaN. If the data types are the same, then no conversion will take place and the comparison will occur based upon that data types comparison rules. For strings it’s left to right. For strings, it’s alphanumeric, A-Z, a-z, 0-9. For numbers, it is numerical ordering, 0-9. Also note that strings will be left justified and compared left to right. Even if the string contains only numeric character, ie "100" < "99" is true.

Don't let the ACSII chart confuse you

Also, don’t let that ASCII chart confuse you, javascript does not convert A to 65 and then compare. Every semester I say I’m going to take that out of the curriculum because it causes a lot of confusion. An A is an A. The only time it is viewed as anything else, is by the computer itself. Since it MUST boil EVERYTHING down to 1's and 0's . In other words, binary. That is they only thing that a computer can understand. It’s either on or off. So in computer language, binary, an A has an ASCII value of 65. ASCII is the numerical representation of all characters. But 65 is not binary. So that gets converted to 001000001 .

How do we avoid auto-conversion?

Um, well, you see, there's no relational operators that don't do type auto-conversion.

Warning

We have to use discipline and always convert entered data from the prompt dialog to numbers.

Labs

1. Lab07: Relationship Operators
   • unit02/labs/lab-07-Relationship.html

Exercises

1. Exercise for Lab 07
   • unit02/exercises/exercise-07.html