Conditions: Making Decisions

15 minBeginnerHTML · CSS · JS

In this lesson

Compare values with ===, !==, <, >, <=, >= — and know why to avoid ==
Write if / else if / else chains in the right order
Combine conditions with &&, || and !
Use truthy/falsy values and the ternary operator ? :

The big idea

A condition is a yes/no question your code asks. Depending on the answer — true or false — it runs one block of code or another.

Asking yes/no questions

JavaScript

const age = 17;
console.log(age >= 18);   // false  (greater than or equal)
console.log(age < 18);    // true
console.log(age === 17);  // true   (strictly equal)
console.log(age !== 17);  // false  (not equal)

=== not ==

A single = puts a value in a box. === asks "are these exactly equal?". There's also ==, which quietly converts types first: "5" == 5 is true, but "5" === 5 is false. That hidden conversion causes bugs, so always use === and !==.

if, else if, else

JavaScript

const temperature = 34;

if (temperature >= 33) {
  console.log("Panas gila! Stay indoors.");
} else if (temperature >= 28) {
  console.log("Normal Malaysian weather.");
} else {
  console.log("Sejuk — bring a jacket.");
}

JavaScript checks each condition from top to bottom and runs only the first block whose condition is true; the rest are skipped. else catches everything that didn't match. So order matters: if >= 28 came first, 34°C would match it and never reach the "Panas gila" branch.

Combining conditions: && || !

&& (AND): true only if both sides are true. hasTicket && age >= 12
|| (OR): true if at least one side is true. isWeekend || isPublicHoliday
! (NOT): Flips true and false. !isRaining is true when it's not raining.

Truthy and falsy

An if doesn't need a real boolean — any value works. Six values count as falsy (treated like false): false, 0, "" (empty string), null, undefined and NaN. Everything else is truthy, including " " (a space), "0" and "false" — they're non-empty strings.

JavaScript

const nickname = "";
if (nickname) {
  console.log("Hello, " + nickname);
} else {
  console.log("No nickname set"); // this runs — "" is falsy
}

The ternary: a one-line if/else

if / else

JavaScript

let label;
if (stock > 0) {
  label = "In stock";
} else {
  label = "Sold out";
}

Ternary

JavaScript

const label = stock > 0 ? "In stock" : "Sold out";

condition ? valueIfTrue : valueIfFalse. Great for choosing between two values; use a normal if/else for anything longer.

getGrade should give "A" for 80 and above, "B" for 60–79, "C" for 40–59 and "Fail" below 40. The console shows that 85 gets a C! Trace through the if chain with 85 to see which branch wins, then fix the function. Make sure the boundaries (80, 60, 40) land in the right grade.

Checks

High marks get an A
Middle marks get B or C, boundaries included
Low marks fail

What you learned

Compare with ===, !==, <, >, <=, >=. Avoid == — it converts types behind your back.
if / else if / else runs the first matching branch only — put the strictest condition first.
&& needs both, || needs either, ! flips. Falsy values: false, 0, "", null, undefined, NaN.
condition ? a : b picks between two values in one line.

Preview

Console output from your code appears here.

In this lesson

The big idea

Asking yes/no questions

if, else if, else

Combining conditions: && || !

Truthy and falsy

The ternary: a one-line if/else

Check understanding

What you learned