🚦 Control Structures: Conditionals & Loops

Control Flow, Explained

Imagine reading a recipe. Most of the time you follow the steps top to bottom — that's sequential flow. But some steps say "if the dough is too sticky, add flour" (a decision) and others say "knead for ten minutes" (a repetition). Those two ideas — selection and iteration — are the entirety of control flow, and every program you'll ever write is built from them.

The diamonds are decisions; the loop-back arrow is repetition. Master these two shapes and you can express any logic a computer can run. Let's take them one at a time.

Conditional Statements

A conditional runs a block of code only when a condition is truthy. The workhorse is if, optionally paired with else if and else to build a chain of mutually exclusive choices.

if / else if / else

// A single if: run the block only when the test is true
const age = 18;
if (age >= 18) {
    console.log("You are an adult");
}

// if + else: exactly one of the two branches runs
if (age >= 18) {
    console.log("You are an adult");
} else {
    console.log("You are a minor");
}

// A chain: JavaScript checks top-to-bottom and stops at the FIRST match
const score = 85;
if (score >= 90) {
    console.log("Grade: A");
} else if (score >= 80) {
    console.log("Grade: B");   // ← matches here, so the rest are skipped
} else if (score >= 70) {
    console.log("Grade: C");
} else {
    console.log("Grade: F");
}

Why the order matters: the chain evaluates conditions in sequence and executes the first one that is true. That's why the wide net (>= 60) goes last — put it first and every passing score would be graded "D."

Flatten nesting with logical operators

Deeply nested if statements are hard to read. When several conditions must all hold, combine them with && instead of stacking braces.

const age = 25, hasLicense = true, hasInsurance = true;

// 👎 Nested — the "arrow of doom" grows to the right
if (age >= 18) {
    if (hasLicense) {
        if (hasInsurance) {
            console.log("You can drive!");
        }
    }
}

// 👍 Flat — combine conditions, and give each failure its own message
if (age >= 18 && hasLicense && hasInsurance) {
    console.log("You can drive!");
} else if (age < 18) {
    console.log("You must be 18 or older to drive.");
} else if (!hasLicense) {
    console.log("You need a license to drive.");
} else if (!hasInsurance) {
    console.log("You need insurance to drive.");
}

The switch Statement

When you're comparing one value against many fixed options, a long if/else if chain gets noisy. switch reads more cleanly for that shape. It compares the subject to each case using strict equality (===).

const day = "Monday";

switch (day) {
    case "Monday":
        console.log("Start of the work week");
        break;                         // ← stop here; without it, execution "falls through"
    case "Tuesday":
    case "Wednesday":
    case "Thursday":
        console.log("Middle of the work week");   // shared body for 3 cases
        break;
    case "Friday":
        console.log("End of the work week");
        break;
    case "Saturday":
    case "Sunday":
        console.log("Weekend!");
        break;
    default:
        console.log("Not a valid day");   // runs when nothing else matches
}

The switch(true) trick for ranges

switch tests equality, not ranges — but you can flip it: switch on true and put the comparison in each case.

const score = 85;
switch (true) {
    case score >= 90: console.log("Grade: A"); break;
    case score >= 80: console.log("Grade: B"); break;   // first true case wins
    case score >= 70: console.log("Grade: C"); break;
    default:          console.log("Grade: F");
}

Ternary & Short-Circuiting

The ternary operator — a decision that returns a value

Where if runs statements, the ternary operator produces a value, so it fits neatly on the right side of an assignment. Its shape is condition ? valueIfTrue : valueIfFalse.

const age = 20;
const status = age >= 18 ? "adult" : "minor";   // "adult"

// Chaining works but gets hard to read — use sparingly:
const grade = score >= 90 ? "A"
            : score >= 80 ? "B"
            : score >= 70 ? "C"
            : "F";

💡 Rule of thumb: Use a ternary when you're choosing a value. Use an if when you're performing an action. Cramming side effects into a ternary hurts readability fast.

Short-circuiting & safe access

The logical operators don't just return true/false — they return one of their operands, and they stop early once the result is decided. That behavior powers three everyday patterns.

// && stops at the first falsy value — a guard against calling on null:
const user = null;
user && user.getName();   // short-circuits; getName() never runs

// || returns the first truthy value — classic "default" fallback:
const name = user?.name || "Guest";

// ?? (nullish coalescing) only defaults on null/undefined, NOT on 0 or "":
const count = 0;
const shown = count ?? 10;   // 0  ← keeps a legitimate zero (|| would give 10)

// ?. (optional chaining) reads deep paths without throwing:
const profile = { address: { street: "123 Main St" } };
console.log(profile.address?.street);   // "123 Main St"
console.log(profile.phone?.number);     // undefined — no "cannot read" error

// Combine them for a bullet-proof read with a default:
const street = profile.address?.street ?? "No address provided";

Loops

Loops repeat a block of code. Which loop you choose depends on what you know up front about how many times to repeat.

for — when you know the count

// The three parts: initializer; condition; step
for (let i = 0; i < 5; i++) {
    console.log(i);   // 0, 1, 2, 3, 4
}

// Walk an array by index (classic, but for...of below is cleaner)
const fruits = ["apple", "banana", "orange"];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

// Count backwards
for (let i = fruits.length - 1; i >= 0; i--) {
    console.log(fruits[i]);   // orange, banana, apple
}

// Nested loops build grids — here, a times table
for (let i = 1; i <= 3; i++) {
    for (let j = 1; j <= 3; j++) {
        console.log(`${i} x ${j} = ${i * j}`);
    }
}

while — repeat while a condition holds

// Test first, then run the body — so it can run zero times
let count = 0;
while (count < 5) {
    console.log(count);
    count++;              // ← ALWAYS move toward the exit, or you loop forever
}

// Great when the number of iterations isn't known in advance
let password = "";
while (password !== "secret123") {
    password = prompt("Enter the password:");
}
console.log("Access granted!");

do...while — run once, then check

// The body runs BEFORE the first test, so it executes at least once
let n = 0;
do {
    console.log(n);
    n++;
} while (n < 5);

// Perfect for input you must ask for at least once and re-validate
let userAge;
do {
    userAge = parseInt(prompt("Enter your age (a positive number):"), 10);
} while (Number.isNaN(userAge) || userAge <= 0);
console.log("Your age is:", userAge);

Iterating Collections

Modern JavaScript gives you two purpose-built loops for stepping through data. Choosing the right one is mostly about arrays versus objects.

for...of — values of an iterable (use for arrays)

const fruits = ["apple", "banana", "orange"];
for (const fruit of fruits) {
    console.log(fruit);   // the VALUES: apple, banana, orange
}

// Works on strings, Sets, Maps — anything iterable
for (const char of "Hi") console.log(char);   // H, i

// Pair it with destructuring for tidy code
const users = [["John", 30], ["Jane", 25]];
for (const [name, age] of users) {
    console.log(`${name} is ${age} years old`);
}

const scores = new Map([["math", 90], ["art", 85]]);
for (const [subject, mark] of scores) {
    console.log(`${subject}: ${mark}`);
}

for...in — keys of an object

const person = { name: "John", age: 30, city: "New York" };
for (const key in person) {
    console.log(`${key}: ${person[key]}`);   // name: John, age: 30, city: New York
}

break & continue

Two keywords let you override a loop's normal rhythm: break exits the loop entirely, and continue skips to the next iteration.

// break: stop the loop the moment we've found what we need
for (let i = 0; i < 10; i++) {
    if (i === 5) break;   // leaves the loop completely
    console.log(i);       // 0, 1, 2, 3, 4
}

// continue: skip just this pass, keep looping
for (let i = 0; i < 5; i++) {
    if (i === 2) continue;   // skip 2
    console.log(i);          // 0, 1, 3, 4
}

// Labels let break/continue target an OUTER loop
outer: for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
        if (i === 1 && j === 1) break outer;   // exits BOTH loops
        console.log(i, j);
    }
}

Labels are rare in day-to-day code — most nested-loop exits are cleaner when the logic is pulled into a function that can simply return. But when you need them, they're the tidy way to escape more than one level.

Common Loop Patterns

A handful of loop shapes come up again and again. Recognizing them by name makes you faster — and later, you'll swap many of them for array methods like find, filter, and reduce.

Search, filter, accumulate

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// SEARCH — find an element, then stop early
let foundIndex = -1;
for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] === 7) { foundIndex = i; break; }
}
console.log(foundIndex);   // 6

// FILTER — collect the items that pass a test
const evens = [];
for (const num of numbers) {
    if (num % 2 === 0) evens.push(num);
}
console.log(evens);        // [2, 4, 6, 8, 10]

// ACCUMULATE — fold the array into a single value
let sum = 0;
for (const num of numbers) sum += num;
console.log(sum);          // 55

A real validator

Here loops and conditionals team up. Note the pattern of returning early on the first failure — a "guard clause" that keeps the happy path unindented.

function validatePassword(password) {
    if (password.length < 8) {
        return "Password must be at least 8 characters long";
    }

    let hasUpper = false, hasLower = false, hasNumber = false, hasSpecial = false;
    for (const char of password) {
        if (char >= "A" && char <= "Z") hasUpper = true;
        else if (char >= "a" && char <= "z") hasLower = true;
        else if (char >= "0" && char <= "9") hasNumber = true;
        else if ("!@#$%^&*".includes(char)) hasSpecial = true;
    }

    if (!hasUpper)   return "Password must contain an uppercase letter";
    if (!hasLower)   return "Password must contain a lowercase letter";
    if (!hasNumber)  return "Password must contain a number";
    if (!hasSpecial) return "Password must contain a special character";
    return "Password is valid";
}

console.log(validatePassword("weak"));         // too short
console.log(validatePassword("Str0ng!Pass"));  // "Password is valid"

validatePassword("weak")        → "Password must be at least 8 characters long"
validatePassword("Str0ng!Pass") → "Password is valid"

Practice & Quiz

function letterGrade(score) {
    // TODO: guard invalid input, then map the score to a letter + modifier
}
console.log(letterGrade(97));  // "A+"
console.log(letterGrade(83));  // "B"
console.log(letterGrade(150)); // "Invalid"

function letterGrade(score) {
    if (Number.isNaN(score) || score < 0 || score > 100) return "Invalid";

    let letter;
    if (score >= 90) letter = "A";
    else if (score >= 80) letter = "B";
    else if (score >= 70) letter = "C";
    else if (score >= 60) letter = "D";
    else return "F";               // F never gets a +/-

    const ones = score % 10;
    const mod = ones >= 7 ? "+" : ones <= 2 ? "-" : "";
    // Cap at A+ (no A++) and don't emit A- above 90 boundaries awkwardly
    if (letter === "A" && mod === "-") return "A";
    return letter + mod;
}
console.log(letterGrade(97));  // "A+"
console.log(letterGrade(83));  // "B"
console.log(letterGrade(150)); // "Invalid"

function guessesToFind(secret, start) {
    let guess = start;
    let attempts = 0;
    while (guess !== secret) {
        guess++;
        attempts++;
        if (guess > 1000) break;   // safety valve against a runaway loop
    }
    return attempts;
}
console.log(guessesToFind(42, 40));  // 2
console.log(guessesToFind(7, 7));    // 0 (already there)

Best Practices & Pitfalls

✅ Do

• Use guard clauses (early return) to flatten deep nesting
• Reach for for...of on arrays and for...in on object keys
• Extract complex conditions into a well-named function, e.g. canDrive(user)
• Always ensure a loop can reach its exit condition
• Prefer switch when matching one value against many fixed options

❌ Don't

• Nest if statements three or four levels deep — refactor instead
• Forget break in a switch (unless you truly want fall-through)
• Cram side effects and multiple actions into a ternary
• Loop over arrays with for...in — the indices are strings and order isn't guaranteed

// 👎 Pyramid of doom
function canDrive(user) {
    if (user.age >= 18) {
        if (user.hasLicense) {
            if (!user.suspended) return true;
        }
    }
    return false;
}

// 👍 Flat and readable
function canDrive(user) {
    if (user.age < 18) return false;
    if (!user.hasLicense) return false;
    if (user.suspended) return false;
    return true;
}

Summary

📚 Additional Resources

• MDN — Control flow and error handling
• MDN — Loops and iteration
• MDN — The switch statement

🚀 What's Next?

You can now make decisions and repeat work — but as your logic grows, you'll want to package it into reusable, named blocks. The next lesson introduces the single most important building block in the language: Functions and Scope.