Skip to main content

Command Palette

Search for a command to run...

Control Flow in JavaScript: How Your Code Makes Decisions

Updated
3 min readView as Markdown

Every day, you make countless decisions. If it’s raining, you take an umbrella. Else if it’s sunny, you wear sunglasses. Else, you just walk out as you are.

In programming, this is known as Control Flow. By default, JavaScript runs code line-by-line from top to bottom. Control flow structures allow your program to "break" that straight line, skipping sections of code or choosing different paths based on specific conditions.


1. The if Statement: The Basic Check

The if statement is the most fundamental way to control code. It tells JavaScript: "Only run this block of code if the condition inside the parentheses is true."

let age = 20;

if (age >= 18) {
  console.log("You are eligible to vote!");
}

If the condition is false, JavaScript simply skips over everything inside the curly braces {} and moves to the next line of code.


2. The if-else Statement: Handling Alternatives

Sometimes you want to do one thing if a condition is true, and a different thing if it's false. This is where the else block comes in.

let marks = 45;

if (marks >= 50) {
  console.log("Result: Pass");
} else {
  console.log("Result: Fail");
}

Think of this as a fork in the road. You must take exactly one path—either the if path or the else path.


3. The else if Ladder: Multiple Options

What if you have more than two possibilities? For example, grading a student (A, B, C, or F). An else if ladder allows you to check multiple conditions in order.

let score = 85;

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

JavaScript checks these from top to bottom. As soon as it finds a true condition, it runs that block and ignores the rest of the ladder.


4. The switch Statement: The Multi-Way Branch

When you are checking a single variable against many specific "fixed" values (like days of the week or menu items), an else if ladder can get messy. The switch statement provides a cleaner, more organized syntax.

let dayNumber = 3;

switch (dayNumber) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  default:
    console.log("Invalid day");
}

The Role of break

The break keyword is essential. It tells JavaScript to "break out" of the switch once a match is found. Without it, the code will "fall through" and execute every case below the match, regardless of whether they are true!


5. When to use switch vs. if-else

Both tools do similar things, but they excel in different areas:

Use if-else when...

Use switch when...

You are checking ranges (e.g., score > 90).

You are checking discrete values (e.g., day === 1).

You have complex logic with && (AND) or `

Your conditions involve different variables.

You want a cleaner, more readable "menu-style" structure.


Summary

Control flow is the "brain" of your script. By mastering if, else, and switch, you transform your code from a static list of instructions into a dynamic program capable of handling real-world logic.

3 views