if, else if, else

Deciding what runs

Before adding conditions, recall the rule from lesson 2-3: "7" === 7 evaluates to false, because a string is never strictly equal to a number. Strict equality checks type first, so it answers without even comparing the contents.

That predictability is what makes === safe to build decisions on, and decisions are the subject of this lesson. A program that always does the same thing is a calculator. A program that charges shipping only over a threshold, or shows an error only when the data is missing, needs to branch.

Braces instead of indentation

Branching is how a program makes decisions: charge shipping or not, show the data or an error. You already think in if/elif/else from Python, so this lesson is purely about the new spelling.

Python used a colon and indentation. JavaScript wraps the condition in parentheses and the body in curly braces { }. Indentation is just for humans here, the braces are what count.

const temp = 28;

if (temp >= 30) {
  console.log("Hot");
} else if (temp >= 20) {
  console.log("Warm");
} else {
  console.log("Cold");
}

The translation table from Python:

Conditions are checked top to bottom and only the first true branch runs, exactly like Python.

A temperature band plus a combined condition

Two independent decisions in one program. The first is an if/else if/else chain over a temperature, and the second combines two separate facts with &&.

const temp = 28;
const sunny = true;

if (temp >= 30) {
  console.log("Hot");
} else if (temp >= 20) {
  console.log("Warm");
} else {
  console.log("Cold");
}

if (temp >= 20 && sunny) {
  console.log("Beach day");
}

Output

Warm
Beach day

With temp at 28 the first condition fails, so control moves to the else if, which succeeds and prints Warm. The else never runs, because a chain stops at its first true branch. The second if stands on its own and both of its halves hold, since 28 is at least 20 and sunny is true, so && yields true and Beach day prints as well.

A grade classifier with four bands

Letter grades are the textbook case for an if/else if chain: several ranges, exactly one of which should win. Here a score of 87 lands in the B band.

const score = 87;

if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else if (score >= 70) {
  console.log("C");
} else {
  console.log("F");
}

Output

B

Why the order of the bands matters

The chain starts at the highest band and works down. That ordering is what lets each condition be a simple >= with no upper bound: by the time score >= 80 is tested, score >= 90 has already failed, so the value is known to be below 90. Written in the opposite order, every score of 87 or above would match score >= 70 first and print C.

Two spelling notes carry over from Python. What you wrote as elif is two separate words here, else if, and the final branch is a bare else with no condition attached to it.

Selling a ticket on either of two grounds

A movie ticket sells when the buyer is at least 17 or is accompanied by an adult. Either fact alone is enough, which is exactly what || expresses.

const age = 15;
const withAdult = true;

if (age >= 17 || withAdult) {
  console.log("Ticket sold");
} else {
  console.log("Come back with an adult");
}

Output

Ticket sold

The buyer is 15, so the left half is false, but withAdult is true and || only needs one true side, so the ticket sells. Note that withAdult is used directly rather than written as withAdult === true. It already holds a boolean, so comparing it to true would add a word without adding meaning.

The conditional operator: an if/else that is a value

JavaScript also has a compact operator for choosing between two values: condition ? a : b yields a when the condition is true and b otherwise. It is called the ternary operator, because it takes three parts, and it exists to fill a real gap. An if/else is a statement rather than a value, so it cannot be dropped into the middle of a template literal or a return. A ternary can go anywhere a value goes:

const age = 20;
const label = age >= 18 ? "adult" : "minor";
console.log(`Status: ${label}`);   // Status: adult

Python spells the same idea "adult" if age >= 18 else "minor". Reach for the ternary when there is one small choice between two values. The moment you want several statements, or choices nested inside choices, a real if/else reads better and nests without becoming a puzzle.

Translating a Python and condition

Python's if a > 0 and b > 0: becomes if (a > 0 && b > 0) { in JavaScript. Two changes happen at once: and becomes &&, and the whole condition gains a pair of parentheses.

Both changes are mandatory. Keeping Python's trailing colon is a syntax error, and the parentheses are part of the if form rather than optional decoration. It is also worth knowing that a single & does exist in JavaScript, but it is a bit-level operator that works on the binary digits of numbers, not a logical and. The same applies to | against ||. When you mean and or or in a condition, double the symbol.