Platform under construction

Control Flow

Intermediate

if, else & else if

if, else and else if let JavaScript choose a path. They are the foundation for validation, permissions, messages and user interface state.

const status = "review";

if (status === "draft") {
  console.log("Keep editing.");
} else if (status === "review") {
  console.log("Check the content.");
} else {
  console.log("Publish the result.");
}

Control Flow

Conditions should read like decisions, not puzzles.

An if statement runs a block only when its condition is truthy. An else block runs when the first condition is not met. An else if block checks another condition before falling through to the final else.

This is the most common control-flow pattern in JavaScript. You use it when a program must choose between different messages, states, validation paths, rendering branches or calculations.

The professional skill is not only writing the keyword. The skill is naming conditions clearly, keeping branches small and ordering checks from specific to general.

if

Runs a block when the condition is truthy.

else if

Adds another condition when the previous one did not match.

else

Handles the fallback path when no earlier condition matched.

Guard clause

Returns early when a required condition is missing, keeping the main path clean.

Examples

Control flow should make the program path easy to follow.

Named conditions and clear branches

const score = 82;
const hasMinimumScore = score >= 70;

if (hasMinimumScore) {
  console.log("Passed");
} else {
  console.log("Needs more practice");
}

A condition that hides its meaning

if (x > 69 && x !== null && !blocked) {
  run();
}

// What is x? What does 69 mean? Why is blocked involved?

Rules that matter

Make branches, loops and exits deliberate.

Control flow decides which path code takes. Keep that path visible: name conditions, protect loop boundaries, avoid accidental fallthrough and use early exits only when they make the main path clearer.

Name important conditions

const isValidScore = score >= 70 is easier to read than repeating raw comparisons.

Keep branches small

Large branches usually need functions, not deeper indentation.

Order checks deliberately

Check invalid or specific cases before broad fallback cases.

Use else for real fallback behavior

Do not add else when a guard clause already ended the path.

Avoid assignment in conditions

Use comparison in conditions and keep assignment visible on its own line.

Test boundary values

Conditions often fail at exactly 0, 1, maximum, minimum and empty values.

Production thinking

Reliable branching is reliable behavior.

Why does this matter?

Control flow is where requirements become behavior. A tiny condition can change what users see, what data gets saved and which action happens next.

Accessibility

Conditions often choose validation messages, focus behavior and disabled states. The wrong branch can leave users without clear feedback.

Production note

Production conditions should be easy to log, test and review. Named conditions and early returns prevent deeply nested logic.

SEO note

If JavaScript conditions decide whether headings, links or important content appear, those branches must be reliable and not depend on fragile state.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Add a branch for scores below 20.
Move score >= 70 into a variable called hasPassingScore.
Change the order of the branches and explain what breaks.

Practice assignment

Do this before moving to the next topic.

Write one if statement with a single condition.
Add an else if branch for a second state.
Add a final else fallback that always gives useful feedback.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand if, else & else if.