Javascript · Booleans
Comparison operators
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — What are Comparison Operators?
When coding, you often need to compare values. Is your Codémon's level higher than the opponent's? Does your Codémon have enough energy for a special attack? To answer these questions, you use comparison operators.
Comparison operators compare two values and always return a boolean result: either
true
or
false
.
let myLevel = 15;
// Is my level greater than 10?
console.log(myLevel > 10);
// Is my level less than 10?
console.log(myLevel < 10);
Notice how the comparisons return
true
or
false
! The first comparison is true (15 is greater than 10), and the second is false (15 is not less than 10).
Always Boolean Results
No matter what you compare, comparison operators always return a boolean value. Keep this in mind as it will be very useful later!
Exercise 2 — Greater Than and Less Than
The two most basic comparison operators are:
-
>
(greater than)
-
<
(less than)
They work exactly like in math class!
let aquachuAttack = 45;
let pyrochuAttack = 52;
console.log("Is Pyrochu's attack greater than Aquachu's?");
console.log(pyrochuAttack > aquachuAttack);
let aquachuAttack = 45;
let pyrochuAttack = 52;
console.log("Is Aquachu's attack less than Pyrochu's?");
console.log(aquachuAttack < pyrochuAttack);
console.log("Is 50 greater than 50?");
console.log(50 > 50);
Notice the last example:
50 > 50
returns
false
because 50 is NOT greater than 50 - they're equal! If you want to check "greater than OR equal to", you need a different operator (we'll see that next).
Exercise 3 — What's the Result?
What will the following code display?
let florachuSpeed = 38;
let aquachuSpeed = 43;
console.log(florachuSpeed > aquachuSpeed);
Options
• true
• false
• 38
• 43
Hint : Compare the two numbers: is 38 greater than 43? Remember that comparison operators always return a boolean value.
Exercise 4 — Greater/Less Than or Equal To
Sometimes you need to check if a value is greater than or equal to another value. For that, JavaScript has:
-
>=
(greater than or equal to)
-
<=
(less than or equal to)
The key difference is that these operators return
true
when the values are equal, unlike
>
and
<
.
let requiredLevel = 20;
let myLevel = 20;
// Using > (greater than)
console.log("Using >:");
console.log(myLevel > requiredLevel);
// Using >= (greater than or equal to)
console.log("Using >=:");
console.log(myLevel >= requiredLevel);
See the difference? With
>
, the comparison is
false
because 20 is not greater than 20. But with
>=
, it's
true
because 20 is equal to 20!
Exercise 5 — Choose the Right Operator
Complete the code with the correct comparison operators to make the comparisons accurate. (in order: greater, less, greater or equal)
let pyrochuHP = 100;
let aquachuHP = 85;
let florachuHP = 100;
// Pyrochu has more HP than Aquachu
console.log(pyrochuHP ____ aquachuHP);
// Aquachu has less HP than Pyrochu
console.log(aquachuHP ____ pyrochuHP);
// Pyrochu has at least as much HP as Florachu
console.log(pyrochuHP ____ florachuHP);
Options: > < >= <= > <
Hint : Read each comment carefully. "More than" uses ```>```, "less than" uses ```<```, and "at least as much" (meaning equal or more) uses ```>=```.
Exercise 6 — Checking Equality and Inequality
To check if two values are exactly the same, or if they're different, JavaScript uses:
-
===
(strict equality - are they the same?)
-
!==
(strict inequality - are they different?)
Notice the three equal signs in
===
! This is very different from
=
(which assigns values) or
==
(which we'll learn about later).
Testing equality with strings:
let myCodemon = "Aquachu";
let opponentCodemon = "Pyrochu";
let friendCodemon = "Aquachu";
console.log("My Codémon === Opponent's?");
console.log(myCodemon === opponentCodemon);
console.log("My Codémon === Friend's?");
console.log(myCodemon === friendCodemon);
Testing inequality (are they different?):
let myCodemon = "Aquachu";
let opponentCodemon = "Pyrochu";
console.log("My Codémon !== Opponent's?");
console.log(myCodemon !== opponentCodemon);
It works with numbers too:
let level1 = 15;
let level2 = 15;
console.log("Same level?");
console.log(level1 === level2);
So,
===
return
true
if the values are exactly the same,
false
otherwise. And
!==
returns
true
if the values are different,
false
if they're the same.
Don't Confuse = with ===
This is a super common mistake! Remember:
-
=
assigns a value (like
let x = 5;
)
-
===
compares two values (like
x === 5
)
They look similar but do completely different things!
Exercise 7 — Understanding === and !==
What will this code display?
let codemonType = "water";
let effectiveness = "water";
console.log(codemonType !== effectiveness);
Options
• true
• false
• "water"
• undefined
Hint : The operator ```!==``` checks if two values are different. Both variables contain the exact same string. Are they different from each other?
Exercise 8 — Match Operators to Their Meanings
Match each comparison operator with what it checks for.
Items to match
• >
• <
• >=
• <=
• ===
• !==
Definitions
• Greater than
• Less than
• Greater than or equal to
• Less than or equal to
• Strict equality (exactly the same)
• Strict inequality (different)
Exercise 9 — Assignment vs Comparison
Complete the code correctly. Pay close attention to when you're assigning a value versus comparing values!
// Assign
let codemonLevel ____ 25;
// Compare if equal
console.log(codemonLevel ____ 25);
// Assign
codemonLevel ____ 30;
// Compare NOT equal (different)
console.log(codemonLevel ____ 25);
Options: = === = !== = === !== =
Hint : Use ```=``` when you want to store a value in a variable. Use ```===``` or ```!==``` when you want to compare two values.
Exercise 10 — Codémon Battle Stats Challenge
Time to practice what you've learned! You have two Codémon ready for battle.
Create comparisons that answer these questions:
1. Is Aquachu's attack greater than Pyrochu's attack?
2. Does Aquachu have the same level as Pyrochu?
3. Are the two Codémon different types?
Log each comparison result to the console with a descriptive message!
Starter code
let aquachuAttack = 48;
let aquachuType = "water";
let aquachuLevel = 22;
let pyrochuAttack = 52;
let pyrochuType = "fire";
let pyrochuLevel = 20;
// Write your comparisons below