Control Flow in JavaScript

JavaScript control statements manage the flow of code execution, allowing decisions, repetitions, and jumps based on conditions. They alter the default top-to-bottom sequential order for more dynamic programs.

Types

Control statements fall into three main categories: conditional (decision-making), iterative (loops for repetition), and jumping (altering flow within blocks).

Conditional Statements

• if: Executes code if a condition is true. Example: if (num > 0) { console.log("Positive"); }​

• if-else: Runs one block if true, another if false. Handles two outcomes cleanly.​

• switch: Matches an expression to cases for multiple conditions; uses break to exit and default for no matches.

Loop Statements

• for: Repeats a known number of times with initialization, condition, and increment. Ideal for arrays.​

• while/do-while: Loops while a condition is true; do-while runs at least once.

Jump Statements

Use break to exit loops/switches early and continue to skip the current iteration.​

---

The 'if' statement :

The if statement in JavaScript executes a code block only if a specified condition evaluates to true. It enables conditional logic, making your code respond dynamically to data or user input.

The condition must be a boolean expression (true/false); curly braces {} enclose the block, even for one line.

This flowchart shows the if flow: check condition, execute if true, skip if false -

Example

let age = 18;
if (age >= 18) {
  console.log("You can vote!");
}

Here, it prints the message only if age is 18 or more else it will end.

---

The 'if-else' statement :

The if-else statement in JavaScript extends the if by adding an else block that runs if the condition is false. It handles two possible paths, making code more complete.

Both blocks use braces; only one executes based on the condition's truthy/falsy value.

This flowchart illustrates if-else flow: evaluate condition, branch to if (true) or else (false).

Example

let score = 75;
if (score >= 60) {
  console.log("Pass");
} else {
  console.log("Fail");
}

Outputs "Pass" here; swaps to "Fail" for scores under 60.

---

The 'else-if' ladder :

The else-if ladder in JavaScript checks multiple conditions sequentially, executing the first true block and skipping the rest. It builds on if-else for handling several mutually exclusive cases efficiently.

Execution stops at the first true condition; order matters for priority.

This flowchart visualizes the ladder: conditions checked top-down with true branches executing statements.

Example

let score = 85;
if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else if (score >= 70) {
  console.log("C");
} else {
  console.log("F");
}

Prints "B" since 85 meets the second condition first.

---

The 'switch' statement :

The switch statement in JavaScript evaluates an expression once and matches it against multiple cases for efficient multi-way branching. It's cleaner than long else-if ladders for exact value comparisons.

Example

let day = 3;
switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  default:
    console.log("Weekend");
}

Outputs "Wednesday" for day 3.

---

When to use switch vs if -else?

Use switch for exact value matches on a single expression, like days or status codes, where it offers cleaner code and potential speed gains over long if-else chains. Opt for if-else when handling ranges, complex logic, or multiple variables, as it's more flexible.

Key Differences

Aspect	Switch	If-Else
Best for	Exact equality (===) checks on one variable	Ranges (> <), OR/AND combos, any conditions
Readability	Cleaner for 5+ cases on same value	Better for 2-4 varied conditions
Performance	Often faster for many cases (jump table)	Sequential checks, slower for long ladders
Flexibility	Strict equality only; needs break	Full boolean logic support

When to Choose

• Switch: Menu options, enums, string literals (e.g., switch(userRole)).​

• If-else: Grades (score > 90), validations (age >=18 && approved).​
  Avoid switch for non-equality; refactor deep ladders into objects or maps for scalability.