if / else if / else

Until now, every line of code you have written runs unconditionally. Conditionals change that: they let your program look at a value and choose what to do. Is this tour available? Is the price in budget? What should we display? if / else answers those questions.

Basic if

An if statement runs a block of code only when a condition is true:

const tourAvailable = true;

if (tourAvailable) {
  console.log('Tour available — book now!');
}

The condition inside the parentheses must evaluate to a truthy or falsy value. If truthy, the block runs. If falsy, it is skipped entirely.

The condition can be any expression — a boolean variable, a comparison, a logical combination:

const tourPrice = 149;

if (tourPrice < 200) {
  console.log('Affordable!');
}

else

else provides a block to run when the if condition is false. Together they form a binary choice:

if (tourAvailable) {
  console.log('Tour available — book now!');
} else {
  console.log('Tour sold out.');
}

Exactly one of the two blocks runs — never both, never neither.

else if

Chain multiple conditions with else if. JavaScript evaluates them in order and runs the first matching branch:

const tourPrice = 249;
const tourAvailable = true;

if (tourAvailable && tourPrice <= 200) {
  console.log('Tour available — book now!');
} else if (tourAvailable && tourPrice > 200) {
  console.log('Tour available but pricey.');
} else {
  console.log('Tour sold out.');
}

Once a matching branch runs, the rest are skipped. The final else is optional — it is a catch-all for when no earlier condition matched.

Nested if

You can place an if statement inside another if block:

if (tourAvailable) {
  if (tourPrice <= 200) {
    console.log('Available and in budget.');
  } else {
    console.log('Available but over budget.');
  }
}

Nesting works, but deep nesting quickly becomes hard to read. When you find yourself going three or four levels deep, prefer else if chains to keep the code flat. Flat code is easier to follow than indented pyramids.

Conditions using operators from Module 02

Conditions are built from the operators you already know: ===, >, <, >=, <=, !==, &&, ||, !.

const tourName = 'Cascade Ridge Hike';
const tourPrice = 149;
const tourAvailable = true;

// Strict equality
if (tourName === 'Cascade Ridge Hike') {
  console.log('Found the right tour.');
}

// Range check
if (tourPrice >= 100 && tourPrice <= 200) {
  console.log('Mid-range price.');
}

// Negation
if (!tourAvailable) {
  console.log('This tour is not available.');
}

You already know how to build these expressions. Conditionals just put them to work.

Exercise

Using the three STO variables, write a conditional that covers all three availability cases. Test each branch by changing the variable values and re-running.

const tourAvailable = true;
const tourPrice = 149;

if (tourAvailable === true && tourPrice <= 200) {
  console.log('Tour available — book now!');
} else if (tourAvailable === true && tourPrice > 200) {
  console.log('Tour available but pricey.');
} else {
  console.log('Tour sold out.');
}

Run it with:

1. tourAvailable = true, tourPrice = 149 → first branch
2. tourAvailable = true, tourPrice = 299 → second branch
3. tourAvailable = false → third branch

Recap

• if (condition) runs a block when the condition is truthy.
• else runs when the if condition is falsy — a binary choice between two blocks.
• else if chains multiple conditions; the first matching branch runs; the rest are skipped.
• Nested if statements work but become hard to read. Prefer else if chains to keep code flat.
• Conditions use the comparison and logical operators from Module 02: ===, >, <, &&, ||, !.