Booleans & Comparison

By the end of this lesson you will be able to:

1. Compare values with > < >= <= === !==.
2. Explain the difference between =, == and ===.
3. Combine questions with &&, || and !.
4. Print a true or false answer to a real question in the console.

Last lesson you did arithmetic. These three lines look almost identical, but only one is a question.

let age = 14;

age = 15;
console.log(age === 15);
console.log(age === 14);

Predict together

• What does line 3 do, compared with line 4?
• What will the two console.log lines print?

true
false

A light switch has exactly two positions. A boolean is the same: it is either true or false, never anything in between.

Comparison operators

Each of these asks a question and hands back a boolean.

const stock = 8;

console.log(stock > 5);    // more than
console.log(stock < 5);    // less than
console.log(stock >= 8);   // at least
console.log(stock <= 7);   // at most
console.log(stock === 8);  // exactly the same
console.log(stock !== 8);  // not the same

true
false
true
false
true
false

The three equals signs

== compares after quietly converting types. === compares the value and the type, with no conversion. That difference bites:

console.log(5 == '5');    // converts the text, then compares
console.log(5 === '5');   // different types, so no

true
false

Remember Lesson 2: form input arrives as text. With ==, the string '5' and the number 5 look equal, which hides the very bug you need to see.

Use === and !== always. Professional codebases ban == outright.

Combining questions

Three small words let you ask bigger questions.

const age = 14;
const hasTicket = true;

console.log(age >= 13 && hasTicket);  // AND — both must be true
console.log(age >= 18 || hasTicket);  // OR — at least one true
console.log(!hasTicket);              // NOT — flips it

true
true
false

Comparing text

Strings compare too, but they are case-sensitive. Fix that by lowering both sides first — a good use for .toLowerCase() from Lesson 3.

const typed = 'Nasi Lemak';

console.log(typed === 'nasi lemak');
console.log(typed.toLowerCase() === 'nasi lemak');

false
true

Why it matters

Next lesson these questions start controlling what your code does. In React they decide which parts of the page appear at all — a logged-in visitor sees one thing, a guest another. It all rests on true and false.

A theme park in Genting has a rollercoaster with rules. Build this in ride.js.

Step 1 — The rider

// ride.js — can this rider board?
const name = 'Aiman';
const heightCm = 142;
const age = 11;
const hasAdult = true;

Step 2 — One rule at a time

The ride needs riders at least 140 cm tall. Ask that question on its own first:

const tallEnough = heightCm >= 140;
console.log(`Tall enough? ${tallEnough}`);

Tall enough? true

Notice we stored the answer in a variable. A well-named boolean makes the next line readable.

Step 3 — The age rule

Riders under 12 must be with an adult. That is two facts joined by OR: either they are 12 or over, or they have an adult.

const oldEnough = age >= 12;
const supervised = oldEnough || hasAdult;

console.log(`Old enough alone? ${oldEnough}`);
console.log(`Properly supervised? ${supervised}`);

Old enough alone? false
Properly supervised? true

Step 4 — Both rules together

const canRide = tallEnough && supervised;
console.log(`${name} can ride: ${canRide}`);

Aiman can ride: true

Step 5 — Change one fact

Set hasAdult to false and run it again:

Tall enough? true
Old enough alone? false
Properly supervised? false
Aiman can ride: false

What changed? One fact flipped, and the final answer followed. Because each rule has its own named variable, you can see which rule failed. Writing it as one long line would have told you only that the answer was false:

// harder to debug — avoid
const canRide = heightCm >= 140 && (age >= 12 || hasAdult);

Work in ride.js or start rules.js.

1. Task 1 — A second rider

   Add Mei Ling: 155 cm, 13 years old, no adult with her. Work out and print whether she can ride, reusing the same three rule variables with new names.

2. Task 2 — A cinema rule

   A film is rated 13. A visitor may watch if they are 13 or over, or they are with a parent. Write it with variables for age and withParent, and print a single boolean.

   Then test it with three different visitors by changing the values.

3. Task 3 — Stall opening hours

   A warung opens from 8 to 22 (24-hour clock). Given an hour variable, print whether the stall is open. You will need two comparisons joined with &&.

   Then add a isPublicHoliday boolean — the stall closes all day on public holidays, whatever the hour.

Rajesh built an entry check for a members-only pool. It says true for everybody. Find two mistakes.

// rajesh-entry.js — buggy
const memberId = '0';        // typed into a form; '0' means no membership
const age = 9;
const withGuardian = false;

const isMember = memberId = '0';
const allowed = isMember || age >= 12 || withGuardian;

console.log('Allowed in: ' + allowed);

It works if: this visitor is refused (false), but a real member, or a 14-year-old, or a child with a guardian is allowed.

// rajesh-entry.js — fixed
const memberId = '0';
const age = 9;
const withGuardian = false;

const isMember = memberId !== '0';        // === family, not =
const oldEnoughAlone = age >= 12;
const allowed = isMember && (oldEnoughAlone || withGuardian);

console.log(`Allowed in: ${allowed}`);

Allowed in: false

• A boolean is only ever true or false.
• = assigns · == compares loosely · === compares value and type.
• Always use === and !==.
• && needs every part true; || needs at least one; ! flips.
• Bracket your logic when mixing && and ||.
• String comparison is case-sensitive — lower both sides first.
• Name your booleans (tallEnough) so a failing rule is easy to spot.

New words

• Boolean — a true/false value.
• Comparison operator — a symbol that asks a question and returns a boolean.
• Strict equality — ===, which does not convert types.
• Logical operator — &&, ||, !.