if / else if / else

Warm-up from memory

Write a message containing a name and a number. Explain why "5" + 1 is not 6. Use yesterday’s lesson only after you have tried.

A boolean is either true or false. Comparisons produce booleans: minutes >= 30 asks whether minutes is at least 30. Use === for strict equality and !== for strict inequality. They do not convert a string into a number to make it match. = assigns a value; === compares values.

An if statement runs its block when its condition is true. An else block runs otherwise. Braces group the instructions belonging to each branch. Indent their contents so a reader can see the structure. else if lets you test a second condition only if the first failed.

Test the boundary, not just the obvious examples. If the goal is 30 minutes, try 29, 30, and 31. A common bug is writing > when the requirement says “at least” and needs >=.

Read comparison symbols as questions:

For example, 30 >= 30 is true but 30 > 30 is false. A boundary is where a rule changes, such as 30 for an “at least 30” goal.

Predict before running

Which message appears at exactly 30? Change the minutes to 29 after checking.

const minutes = 30;

if (minutes >= 30) {
  console.log("Goal reached");
} else {
  console.log("Keep going");
}

console.log("30" === 30);

Goal reached
false

Order matters in a decision chain

The first true branch wins in an if/else-if chain. If you check a broad category first, a more specific category later may never be reached. Think of the branches as a sequence of questions rather than independent labels.

Here the requirements are exclusive: at least 60 minutes is excellent; otherwise at least 30 is a good start. What would happen if you swapped the conditions without changing the labels?

const minutes = 75;

if (minutes >= 60) {
  console.log("Excellent");
} else if (minutes >= 30) {
  console.log("Good start");
} else {
  console.log("A small beginning");
}

Excellent

Independent questions versus one choice

Two separate if statements can both run. An if/else chain selects one branch. Use separate statements for independent actions—for example, congratulate a learner for reaching a goal and separately remind them to take a break. Use a chain for exactly one category.

Write a boundary table before coding:

Bug hunt: change minutes >= 60 to minutes > 60. Which row catches the mistake? Testing only 75 would miss it. Fix the operator, then explain why a semicolon directly after if (condition) would end the statement before the intended block.

Separate overlapping questions from exclusive outcomes

An else-if chain chooses one outcome. Separate if statements ask independent questions, even when the first one is true. Neither shape is automatically better; choose the one matching the problem. A shipping price usually needs one band, while a number can satisfy several properties.

Put overlapping bands in an order that does not hide a more specific case. Testing a small threshold first can make a later large threshold unreachable for exactly the values it was intended to handle. Boundary inputs expose this faster than trying many unrelated values.

const amount = 65;

if (amount >= 50) {
  console.log("free");
} else if (amount >= 20) {
  console.log("reduced");
} else {
  console.log("standard");
}

free

65 satisfies both thresholds, but the first true branch wins. Reversing the two comparisons would print reduced. Trace 19, 20, 49 and 50 to determine exactly where each outcome begins.

const n = 15;

if (n % 3 === 0) {
  console.log("divides by 3");
}

if (n % 5 === 0) {
  console.log("divides by 5");
}

console.log("checked");

divides by 3
divides by 5
checked

The second if is not attached to the first. Both questions can succeed. The final statement is outside both blocks and runs regardless. Braces, rather than indentation, determine that grouping in JavaScript.

Try the rule on new inputs

Change the second if to else if and predict the missing line. Then repair a shipping chain whose >=20 branch comes before >=50. Explain the bug using amount=50, not just the original 65.

Your turn

const minutes = 15;
// Choose one of the three messages.

const minutes = 15;

if (minutes < 15) {
  console.log("Short session");
} else if (minutes < 45) {
  console.log("Steady session");
} else {
  console.log("Long session");
}

Steady session

What you should be able to explain

• When should two if statements replace an if/else chain?
• Why must the excellent category be checked first in this example?
• Which inputs distinguish greater-than from greater-than-or-equal?