Decisions with if and else

Why programs need decisions

Real programs react to data: give a discount if the cart is big, show an error if the password is short, charge late fees if a bill is overdue. A conditional statement runs some code only when a condition holds.

const marks = 72;
if (marks >= 90) {
  console.log('Grade A');
} else if (marks >= 60) {
  console.log('Grade B');
} else if (marks >= 35) {
  console.log('Grade C');
} else {
  console.log('Fail');
}

Order matters

Because only the first true branch runs, put the most specific or highest condition first. If you test marks >= 35 before marks >= 90, a student with 95 gets grade C, because 95 >= 35 is already true.

Truthy and falsy

The condition inside if (...) can be any value. JavaScript converts it to true or false. Exactly eight values are falsy: false, 0, -0, 0n, '' (empty string), null, undefined and NaN. Every other value is truthy, including '0', 'false', [] and {}.

if ('0') console.log('"0" is truthy');      // runs
if ([]) console.log('[] is truthy');         // runs
if ('') console.log('never printed');        // empty string is falsy
const name = '';
if (!name) console.log('Please enter a name'); // runs

Combining conditions

const age = 22;
const hasLicence = true;
if (age >= 18 && hasLicence) console.log('Can drive');
const day = 'Sun';
if (day === 'Sat' || day === 'Sun') console.log('Weekend');

Write each comparison in full. if (day === 'Sat' || 'Sun') is a bug: 'Sun' on its own is a truthy string, so the condition is always true.

Guard clauses: return early

Deeply nested ifs are hard to read. A guard clause checks a bad case at the top of a function and returns straight away. The main logic then sits at the left edge, not five levels deep.

function withdraw(balance, amount) {
  if (amount <= 0) return 'Invalid amount';
  if (amount > balance) return 'Insufficient balance';
  return `New balance: ${balance - amount}`;
}
console.log(withdraw(1000, 300)); // New balance: 700