Control Flow

Making decisions and repeating things — if/else, switch, for, while, for...of, and the for...in trap.

What it is, in plain English: Control flow is the order in which JavaScript executes statements. By default, it runs top to bottom — one line after another. Control flow statements let you change that: if/else makes decisions (run this code only if a condition is true), and loops repeat code (keep doing this until something changes). These two ideas — decisions and repetition — are the foundation of every program.

Making decisions and repeating things

By default, JavaScript runs your code from top to bottom, one line at a time. Control flow statements let you change that — make decisions about which code to run, and repeat code without writing it multiple times.

if / else — making a decision

let temperature = 28;

if (temperature > 30) {
  console.log("It's hot! Stay hydrated.");
} else if (temperature > 20) {
  console.log("Nice weather.");
} else {
  console.log("It's cold. Bring a jacket.");
}
// Prints: "Nice weather."

How it works: JavaScript checks the condition (the part in parentheses). If it's true, it runs the code in the first { } block and skips the rest. If it's false, it tries the next else if, and so on. The final else runs if nothing else matched.

The ternary operator — if/else in one line

For simple yes/no decisions, the ternary is often cleaner:

// condition ? value-if-true : value-if-false
const age = 20;
const label = age >= 18 ? "adult" : "minor";
console.log(label);   // "adult"

// Same as:
let label2;
if (age >= 18) {
  label2 = "adult";
} else {
  label2 = "minor";
}

switch — multiple fixed options

Use switch when you're comparing one value against several fixed options:

const day = "Monday";

switch (day) {
  case "Monday":
  case "Tuesday":
  case "Wednesday":
  case "Thursday":
  case "Friday":
    console.log("Weekday");
    break;   // ← important! without break, it "falls through" to the next case
  case "Saturday":
  case "Sunday":
    console.log("Weekend");
    break;
  default:
    console.log("Unknown day");
}

Always add break. Without break, JavaScript falls through to the next case and runs that code too — a common bug. The only time to omit break intentionally is to share code between cases (like the weekday example above).

for loop — repeat a set number of times

// Structure: for (start; condition; step)
for (let i = 0; i < 5; i++) {
  console.log(`Step ${i}`);  // Step 0, Step 1, Step 2, Step 3, Step 4
}

// Countdown:
for (let i = 10; i > 0; i--) {
  console.log(i);    // 10, 9, 8 ... 1
}
console.log("Blast off!");

for...of — loop over arrays (the right way)

for...of gives you each VALUE in an array, one at a time. Use this for arrays.

const cities = ["Mumbai", "Delhi", "Bangalore"];

for (const city of cities) {
  console.log(`City: ${city}`);
}
// City: Mumbai
// City: Delhi
// City: Bangalore

// Works on strings too:
for (const char of "hello") {
  console.log(char);  // h, e, l, l, o
}

while — repeat while a condition is true

let lives = 3;

while (lives > 0) {
  console.log(`Lives remaining: ${lives}`);
  lives--;  // decrease by 1 each time
}
console.log("Game over!");
// Lives remaining: 3
// Lives remaining: 2
// Lives remaining: 1
// Game over!

Infinite loop warning: Make sure the condition eventually becomes false — otherwise the loop runs forever and crashes your program. Always check that something inside the loop changes the condition.

break and continue

// break — exit the loop immediately
for (let i = 0; i < 10; i++) {
  if (i === 5) break;    // stop when i hits 5
  console.log(i);        // 0, 1, 2, 3, 4
}

// continue — skip this iteration, move to the next
for (let i = 0; i < 6; i++) {
  if (i % 2 === 0) continue;  // skip even numbers
  console.log(i);              // 1, 3, 5
}

Try It Yourself

for...in, do...while, labeled statements, and for...of vs for...in

for...of vs for...in — the important distinction

	for...of	for...in
Iterates over	Values of an iterable (array, string, Map, Set...)	Enumerable property KEYS of an object
Use for	Arrays, strings, Sets, Maps	Plain objects (with caution)
Main trap	None — correct choice for arrays	Loops over inherited properties too; array indices come as strings

// for...of on an array — correct:
const arr = [10, 20, 30];
for (const value of arr) {
  console.log(value);   // 10, 20, 30  ← actual values
}

// for...in on an array — usually wrong:
for (const key in arr) {
  console.log(key);    // "0", "1", "2"  ← string keys, not values
}

// for...in on an object — appropriate use:
const user = { name: "Alice", age: 30 };
for (const key in user) {
  console.log(`${key}: ${user[key]}`);  // name: Alice, age: 30
}

// Safer object iteration:
Object.entries(user).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

do...while — check condition AFTER the first run

// The body runs at least once, then checks the condition:
let input;
do {
  input = prompt("Enter a number greater than 0:");
  input = Number(input);
} while (input <= 0 || isNaN(input));

console.log(`You entered: ${input}`);

Labeled statements

// Labels let break/continue target an outer loop:
outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (j === 1) continue outer;   // skip to next i, not just next j
    console.log(`i=${i}, j=${j}`);
  }
}
// i=0, j=0
// i=1, j=0
// i=2, j=0

switch with expressions (ES2024 pattern)

// Pattern matching-style switch using expression values:
function classify(n) {
  switch (true) {
    case n < 0:    return "negative";
    case n === 0:  return "zero";
    case n < 10:   return "small";
    case n < 100:  return "medium";
    default:       return "large";
  }
}

Iteration protocols, the for...of desugaring, and completion records

The iteration protocol

for...of works with any iterable — an object with a [Symbol.iterator]() method that returns an iterator (an object with a next() method returning { value, done }). Arrays, strings, Maps, Sets, and generators are all iterables. You can make any object iterable:

class Range {
  constructor(start, end) { this.start = start; this.end = end; }

  [Symbol.iterator]() {
    let current = this.start;
    const end = this.end;
    return {
      next() {
        return current <= end
          ? { value: current++, done: false }
          : { value: undefined, done: true };
      }
    };
  }
}

for (const n of new Range(1, 5)) {
  console.log(n);  // 1, 2, 3, 4, 5
}

// Spread and destructuring also use the iteration protocol:
const nums = [...new Range(1, 3)];  // [1, 2, 3]
const [a, b] = new Range(10, 20);   // a=10, b=11

for...of desugaring

The spec (§14.7.5.6) defines for...of as roughly equivalent to:

// for (const x of iterable) { body }
// desugars to approximately:
const iter = iterable[Symbol.iterator]();
let result;
while (!(result = iter.next()).done) {
  const x = result.value;
  // body
  // if break: call iter.return?.() (cleanup)
}

Completion Records and break/continue

The spec models statement execution results as Completion Records with fields [[Type]] (normal, break, continue, return, throw), [[Value]], and [[Target]]. Labeled break/continue work by setting [[Type]] = break/continue and [[Target]] = the label. The enclosing LabelledStatement catches the completion if its label matches [[Target]]. This is why break/continue work across arbitrary nesting — it's not exception-style stack unwinding, it's completion record propagation through the static statement tree.

Official Sources

The Codex links only to official documentation and the ECMAScript specification. No third-party tutorials.