Conditionals: if, else & the Ternary

Conditionals let a program choose what to do. An if statement runs a block of code only when a condition is true; else if and else handle the alternatives; and the ternary operator picks between two values in a single expression.

if

JS if.js

const balance = 120;
const price = 80;

if (balance >= price) {
  console.log("Purchase approved");
}
console.log("Done");

Output

Purchase approved
Done

The condition goes in parentheses; the code to run goes in braces. If the condition is false, the block is skipped and the program carries on after it.

else

JS else.js

const hour = 20;

if (hour < 18) {
  console.log("Good day");
} else {
  console.log("Good evening");
}

Output

Good evening

else if

Chain conditions to handle more than two cases. They're checked from top to bottom, and only the first one that's true runs:

JS else-if.js

function grade(score) {
  if (score >= 90) {
    return "A";
  } else if (score >= 80) {
    return "B";
  } else if (score >= 70) {
    return "C";
  } else {
    return "F";
  }
}

console.log(grade(95), grade(83), grade(71), grade(40));

Output

A B C F

Order matters. If the score >= 70 check came first, a score of 95 would get a "C", because that condition is also true and would be reached first.

Conditions don't have to be booleans

An if accepts any value and treats it as true or false. Empty strings, 0, null, undefined and NaN count as false; almost everything else counts as true:

JS truthy.js

const username = "";

if (username) {
  console.log(`Hi ${username}`);
} else {
  console.log("Please enter a name");
}

Output

Please enter a name

Lesson 19 lists exactly which values are "falsy".

Nested conditions and early returns

Conditions can be nested, but deep nesting quickly gets hard to read:

JS nested.js

function canCheckout(user, cart) {
  if (user) {
    if (cart.length > 0) {
      if (user.verified) {
        return "ok";
      } else {
        return "verify your email";
      }
    } else {
      return "cart is empty";
    }
  } else {
    return "please log in";
  }
}
console.log(canCheckout({ verified: true }, ["book"]));

Output

ok

The same logic with early returns ("guard clauses") is flat and reads top to bottom:

JS guards.js

function canCheckout(user, cart) {
  if (!user) return "please log in";
  if (cart.length === 0) return "cart is empty";
  if (!user.verified) return "verify your email";
  return "ok";
}

console.log(canCheckout(null, []));
console.log(canCheckout({ verified: false }, ["book"]));

Output

please log in
verify your email

Handle the special cases first and return; what's left is the main path. Notice that a single-statement if can omit the braces — fine for short guards, but use braces for anything longer.

The ternary operator

condition ? valueIfTrue : valueIfFalse is an expression that chooses between two values. It's ideal for short choices inside an assignment or template:

JS ternary.js

const items = 1;
const label = items === 1 ? "item" : "items";
console.log(`${items} ${label}`);

const age = 15;
console.log(age >= 18 ? "adult" : "minor");

Output

1 item
minor

Ternaries can be chained, but anything beyond two outcomes is usually clearer as an if/else if chain or a switch (next lesson).

Try it yourself

Change temp and see which branch runs:

PreviousComparison & Logic Nextswitch