Sample Video Frame
14: True and False Tests
A common operation in JavaScript is to test an equality of two variables (or values). You might want to know if a variable x
is less than, equal to, or greater than another variable y
. There are a large number of comparison operations that all fall into the category of "boolean logic", but in programming we'll call this a test. The end result of performing a test is true
or false
. You perform a test in JavaScript by using a "comparison operator" such as x == y
or y != 1
. Your computer's CPU even has a TEST
instruction that does this.
Equal
In JavaScript, you can test the equality of two variables using ==
(double equals) or ===
(triple equals). You can think of ==
as "could be equal" and ===
as "definitely equal". You can play with node
and try these examples out:
> 1 == '1'
true
> 1 === '1'
false
> '' == 0
true
> '' === 0
false
You can see that with ==
JavaScript will let you compare things that are seemingly very different like a numeric 1 and the string '1'. However, with === you'll be held to a stricter requirement that both sides of the === are exactly the same to be true. You should also look at the way I compare 0 to ''
(an empty string). I explain this in the next part, but try to figure out why this happens in this example.
Not Equal
The inverse is to test whether two variables are not equal using !=
and !==
with the same rules. !=
can be used with more variable types than !==
, making !==
more strict. This trend continues with all the equality operators: one = on the end means "could be equal" and two == means "definitely equal". You can also play with this operator too:
> 1 != '1'
false
> 1 !== '1'
true
> '' != 0
false
> '' !== 0
true
Try different kinds of values on either side of the operators to see what you get. You notice how I'm showing you the comparison of ''
(an empty string) with 0? That's because most people think that 0 should not be equal to an empty string, and when they try that in JavaScript they're confused. JavaScript is trying to help you by letting you compare "negative like things" such as an empty string and 0, but usually it's not very helpful. You can see that !==
ends up being more what you'd expect from that kind of comparison.
Greater-Than and Less-Than
You can also test whether two values are greater or less than each other using >
(greater-than) and <
(less-than). Now, you might be asking, is there a strict version of these similar to ===
and !==
. No, there is not, so your comparisons will attempt to compare just about anything you give them. Here is me testing these two out in node:
> 1 < '2'
true
> 1 < 2
true
> 1 > 3
false
> 1 > '3'
false
> 1 > ''
true
> 0 < ''
false
> 0 > ''
false
>
You'll notice that <
and >
both can compare things that are not really alike. 1 is a number but '2' is a string, but JavaScript will go ahead and attempt to compare them, and it makes sense. Same with 1 > '3'
which JavaScript says, "Uh, sure, '3' and 1 are comparable." Where JavaScript gets weird is with things that are not even numbers inside a string, such as ''
. If you look at the end of this you'll see I compare 1 > ''
which is true
, but then if 1 is greater than an empty string, why is 0 not considered less or greater than an empty string? We'll see in the next operator.
Greater, Less than, or Equal
The final comparison operators are <=
(less-than-or-equal) and >=
(greater-than-or-equal), and they do mostly what you think they do. If you remember from the demo above I had 0 < ''
, and that failed. That's because JavaScript considers 0 to be equivalent to an empty string, so it's equal. Computers are very pedantic, so to them equal is not less than, so that's false. To be correct you'd have to use these new operators:
> 0 <= ''
true
> 0 >= ''
true
> 1 <= '2'
true
> 1 <= '1'
true
> 1 <= 0
false
>
You can see now that 0 is shown to be compared to '' correctly (as long as you overlook that an empty string probably shouldn't be compared to 0). I also show other comparisons using numbers and strings, but you should also play with this to understand it.
Logic Operators
Logic operators take the result of two or more tests (as in x != y
) and enable you to compare them logically. You can ask questions such as, "Is x < y and is j < y?" In JavaScript this is done with three operators: and, or, and not.
The &&
operator handles 'and' comparisons as in x == 3 && j == 4
means "is x equal to 3 and j equal to 4?" The result of an and is true if both sides of the operator are also true. The ||
operator handles the 'or' comparisons as in y == 4 or y == 10
, which means "is y equal to 4 or is y equal to 10." Finally, the !
(not) operator inverts the truth of anything.
More Operators
There are many more operators you can do as a test like these. A good compendium of these operators is at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators, so take the time to look through these and study them. You'll get into most of these other operators as you learn boolean logic. For example, you can perform two tests with x != y && a < b
.
The Code
You should have been trying out the tiny samples in the node shell and playing with logic and comparison operators as much as you can. Try to come up with your own complicated logic expressions and guess whether they will be true or false before you hit enter. If you watch the video for this exercise, you'll see me doing many of them using node as my tutor.
For this exercise, simply try these out in node:
5 < 10 && 7 > 9
3 > '5'
21 === '21'
78 <= 1023 && 45 > 23 || 34 < 23
7 >= 3 && 94 == 23 && 45 < 100 || 89 == 89
Also try adding in math to your logic practice:
6 + 34 < 2 * 20 && 78 - 23 > 100 - 30
2 + 3 * 67 <= 789
Also, try setting some of these to variables and see if you can work it out:
let x = 45;
5 + x < x && x * 20 > 34 * 2;
Do as much of this practice as you can as it will help you be more solid later.
Learn JavaScript Today
Register today for the Early Access course and get the all currently available videos and lessons, plus all future modules for no extra charge.
Still Not Sure? Try the next FREE Lesson!