JS Sketchbooksee JavaScript think ✏️
← back to phase 2

2.1 — if / else

Until now, every program ran straight down like a shopping list — the same thing, every time. Today your programs learn to choose. The tool is if/else, and the picture is a fork in the road: the program travels down, hits a question, and takes exactly one of two paths.

Every login screen, every discount rule, every “test passed / test failed” verdict is this fork. Master the picture here, and Phase 2 is mostly downhill.

watch it happen
let age = 16;
if (age >= 18) {
  console.log("Welcome in!");
} else {
  console.log("Adults only.");
}
console.log("Program continues…");

Meet the road. The program (our yellow traveler) starts at the top and moves down, line by line — that part you know. But ahead: a fork, guarded by a question.

age >= 18 ?true"Welcome in!"false"Adults only.""Program continues…"
under the hood

The deeper story, with the real names for things — this part is what turns “I saw it” into “I can explain it.”

Anatomy, properly named. if is a keyword. The part in parentheses is the condition — any expression. The condition gets evaluated to a boolean, coercing if it must (tomorrow’s lesson).

Each braced section is a block, and the two blocks are the branches. Programmers say “the code branches” or “take the else branch” — the road picture, in words.

A subtlety worth knowing early: the braces are technically optional for single statements, but professionals write them always.

Why so strict? A famous Apple security bug (“goto fail”, 2014) happened exactly here. An unbraced branch silently swallowed a second line. A missing pair of braces became a real security hole.

💼 On the job — test code is full of forks: “if the element is visible, click it; else fail with a screenshot.” More importantly, every bug report you will ever write is a story about a branch. You expected the true road; the program took the false one. Pointing at the exact fork — and the exact boolean that misfired — separates “it’s broken” from a bug report developers love.

Fun fact: your processor literally gambles on these forks. Modern CPUs contain a branch predictor: dedicated circuitry that guesses which road the code will take, before the condition is even evaluated. It starts working ahead on the guessed path. It guesses right well over 90% of the time. When it is wrong, it throws the work away and starts over. Billions of tiny bets per second, under every if you will ever write.

your turn

⌨️ a message that depends

An exam checker: it looks at the score, decides which of two messages to REMEMBER, and says the chosen one exactly once — the decision picks the value, not the printing.

requirements:

  • The first line is given: let score = 72; — it’s already in the editor.
  • A score of 50 or more means the message is "You passed! 🎉" — anything lower means "Try again." (careful: “50 or more” is not the same as “more than 50”).
  • The chosen text must land in a variable named message, and exactly ONE console.log — placed AFTER the decision — prints it.

when you press RUN, the console must show exactly:

You passed! 🎉

⌨️ odd or even

Tell whether a number is odd or even. (A number is even exactly when dividing it by 2 leaves remainder 0 — and there’s an operator for remainders.)

requirements:

  • The first line is given: const number = 7;
  • Print exactly odd or exactly even — lowercase, no punctuation — depending on the number.
  • Your decision must use the remainder operator %, and the code must still be correct if someone edits the 7 to an 8.

when you press RUN, the console must show exactly:

odd

✏️ Quick check 1

Same shape as the one you watched — but colder. How many lines does THIS print? Type the number.

let temp = 15;
if (temp > 25) { console.log("Hot"); }
console.log("Done");

✏️ Quick check 2

The condition is true, so the if branch runs. On that same pass, how many times does the else branch run? Type the number.

✏️ Quick check 3

Whatever you put inside if (…) is evaluated down to a single ___. Type the type.

teach it back

🗣️ Now teach it back

Explain if/else to a friend using the fork-in-the-road picture: what happens at the fork, what happens to the road not taken, and where do the roads rejoin?

Write it as if your friend is sitting next to you. Saved to your journal — future-you will use these notes to teach others.

a few sentences, minimum — you’ve got this
to remember
if evaluates its condition to ONE boolean, then walks exactly one road. The other branch never runs — by design.
Braces mark the branch territory; after them, the roads rejoin and code runs regardless. else is optional.
Fun fact: CPUs bet on your forks (branch prediction) and win >90% of the time — billions of gambles per second.
next: 2.2 Truthy & falsy →