# 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.

 ```1 2 3 4 5 6 7 8``` ``````// 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¶
 ```1 2``` ``````// Is 10 bigger than 5? document.write(10 > 5); ``````
```
// Is 10 bigger than 5?
document.write(10 > 5);

```
##### Is 10 less than 10?¶
 ```1 2``` ``````// Is 10 less than 10? document.write(10 < 10); ``````
```
// Is 10 less than 10?
document.write(10 < 10);

```
##### This means "Is 10 less than OR equal to 10", which is true.¶
 ```1 2``` ``````// Is 10 less than or equal to 10? document.write(10 <= 10); ``````
```
// Is 10 less than or equal to 10?
document.write(10 <= 10);

```

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

 ```1 2``` ``````// Is A less than B? document.write("A" < "B"); // Does this work and make sense? ``````
```
// Is 10 less than 10?
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¶

 ```1 2``` ``````// Is "F" bigger than "f"? document.write("Fred" > "fred"); ``````
```
// 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.

 ```1 2``` ``````// Is "F" smaller than "f"? document.write("Fred" < "fred"); ``````
```
// 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".

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

```
##### This one catches people sometimes¶
 ```1 2``` ``````// Is 10 less than 10? document.write(10 < 10); ``````
```
// 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.

 ```1 2``` ``````// Is "b" less than "c"? document.write("b" < "c"); ``````
```
// 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".

 ```1 2``` ``````// "R" is less than "r" document.write("smalleR" < "smaller"); ``````
```
// "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.)

 ```1 2 3 4``` ``````// numbers and strings? document.write(10 < "100"); document.write("
"); document.write("10" < 100); ``````
```
// 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?

 ```1 2 3 4``` ``````// Greater than let newSalary = 37500.00; let maximumSalary = 40000.00; document.write(newSalary > maximumSalary); ``````
```
// Greater than
let newSalary = 37500.00;
let maximumSalary = 40000.00;
document.write(newSalary > maximumSalary);

```
##### Another example showing floating point numbers.¶
 ```1 2``` ``````// Greater than with floating point number document.write(12.555555557 > 12.55555556); ``````
```
// Greater than with floating point number
document.write(12.555555557 > 12.555555556);

```
##### This also works with strings¶
 ```1 2``` ``````// Greater than with strings document.write("ABC" > "abc"); // Why is this false? ``````
```
// 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.

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

```
##### This one has the same result as above.¶
 ```1 2``` ``````// Less than or equal to document.write(1 <= 10); ``````
```
// Less than or equal to
document.write(1 <= 10);

```
##### It works with strings, just like we thought it would.¶
 ```1 2``` ``````// Less than or equal to with strings document.write("b" <= "b"); ``````
```
// Less than or equal to with strings
document.write("b" < "c");

```
##### 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.

 ```1 2 3 4 5 6``` ``````// Less than or equal to with variables let count; count = 10; document.write(count <= 10); ``````
```
// 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.

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

```
##### Do either of these need the second question?¶
 ```1 2 3 4``` ``````// Greater than or equal to with numbers document.write(12 >= 14); document.write("
"); document.write(12 >= 11); ``````
```

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

```
##### Strings too.¶
 ```1 2``` ``````// Greater than or equal to with strings document.write("fred" >= "Fred"); ``````
```

// 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¶
 ```1 2``` ``````// Greater than with strings and numbers document.write("A" > 0); ``````
```

// 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?

 ```1 2``` ``````// 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`.

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

```
##### 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¶
 ```1 2``` ``````// 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.

```
document.write("100" > "99");

```
##### And then there is this¶
 ```1 2``` ``````// 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.

```
document.write("100" > 99);

```

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