Choose a path with conditions

One idea at a time

Programs often need to choose what to do: show a reminder for empty input, congratulate a learner, or display a different status. An if statement evaluates a condition and runs its block when that condition is truthy. A comparison such as score >= 80 produces a boolean that makes this decision easy to read.

Add else if to test another condition when the first fails. Add else for the remaining cases. Once a branch matches, the rest of that chain is skipped. Separate if statements behave differently: each is tested independently and several can run. Write down the cases you expect before deciding which form fits.

What to remember first

Walk through an example

const score = 85;
if (score >= 80) {
  console.log("Ready for the next lesson");
} else if (score >= 50) {
  console.log("Review one example");
} else {
  console.log("Start with the introduction");
}

85 is at least 80, so only the first message appears. Even though it is also at least 50, the second branch is skipped. Try 50 and 49 to inspect the boundary between review and introduction. Testing values exactly on either side of a boundary is more useful than trying only one comfortable middle value.

See it happen: try a small change

const score = 49;
if (score >= 80) {
  console.log("Ready");
} else if (score >= 50) {
  console.log("Review");
} else {
  console.log("Start here");
}

Look a little closer

Use switch when one value selects among named choices, such as light and dark themes. Use an if chain when your conditions describe ranges or combine several facts. A switch does not automatically understand ranges like a high score; each case is a value to compare. Keep a default for unexpected choices when the interface needs a predictable response.

A condition does not validate a whole program. If score might be text, convert or reject it before comparing. Keep the decision close to the message it controls, and name boolean variables clearly, such as hasFinished. You can combine conditions with &&, but long chains are easier to understand when split into named intermediate values.

Try a fixed choice with switch

const topic = "css";
switch (topic) {
  case "html":
    console.log("Build content");
    break;
  case "css":
    console.log("Style content");
    break;
  default:
    console.log("Choose a topic");
}

Try it in your own project

Replace the script with one if chain. Test 49, 50, 79, and 80 in separate runs and record one message per run. Then replace it with the switch example and test a known topic and an unknown one.

The interactive preview runs in its own isolated document. Its Output panel mirrors console.log messages; it is not a full DevTools console. Choosing another version or resetting starts a fresh example and does not edit your local files. Read any simulation label: storage and request demonstrations explain their offline substitutes, while the written local examples use the real browser APIs.

A common wrong turn

Putting score >= 50 first would catch 85 before the higher-score branch could run. A semicolon immediately after if ends that statement early; keep the block directly after the parentheses. Always use braces while learning, even when a branch contains only one instruction.

Go to the source

• MDN: Choose a path with conditions ↗

Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.