Control Flow in JavaScript: If, Else, and Switch Explained

Every day, you make hundreds of decisions without thinking about them. If it's raining, carry an umbrella. If the traffic light is red, stop — otherwise, go. Programs work exactly the same way. Control flow is how JavaScript decides which lines of code to run, and which to skip.

In this article, you'll learn the three main tools for control flow: if, else if, else, and switch.

What Is Control Flow?

By default, JavaScript runs code line by line, top to bottom. Control flow lets you break out of that pattern — you can skip blocks of code, choose between paths, or repeat actions.

Start → Check a condition → take path A or path B → Continue

Think of it like a road with forks. The condition is the signpost that tells your program which way to turn.

---

The if Statement

The simplest form: "If this condition is true, run this block."

const age = 20;

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

If age were 15, the condition 15 >= 18 would be false, so the block is skipped entirely — nothing is printed.

Syntax:

if (condition) {
  // runs only when condition is true
}

---

The if...else Statement

Add an else block to handle the false case:

const marks = 45;

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

One path or the other always runs — never both, never neither.

---

The else if Ladder

When you have more than two possible outcomes, chain else if blocks:

const marks = 72;

if (marks >= 90) {
  console.log("Grade: A");
} else if (marks >= 80) {
  console.log("Grade: B");
} else if (marks >= 70) {
  console.log("Grade: C");
} else if (marks >= 60) {
  console.log("Grade: D");
} else {
  console.log("Grade: F");
}
// Output: Grade: C

JavaScript checks each condition in order. The moment one is true, it runs that block and skips the rest. The else at the end is the safety net — it runs only if every condition above was false.

---

Truthy and Falsy

JavaScript conditions don't need to be strict true/false. Any value can be used:

Falsy (treated as false): false, 0, "", null, undefined, NaN

Everything else is truthy (treated as true):

if ("hello")    { console.log("runs"); }  // ✅ non-empty string
if (42)         { console.log("runs"); }  // ✅ non-zero number
if (0)          { console.log("runs"); }  // ❌ skipped — 0 is falsy
if ("")         { console.log("runs"); }  // ❌ skipped — empty string is falsy

---

The Ternary Operator — a One-Line Shortcut

For simple if/else assignments, the ternary is more concise:

// Long form
let status;
if (marks >= 50) {
  status = "Pass";
} else {
  status = "Fail";
}

// Ternary
const status = marks >= 50 ? "Pass" : "Fail";

condition ? value_if_true : value_if_false

Use ternary for simple value choices. For logic with side effects or multiple lines, stick with if/else.

---

The switch Statement

When you're comparing one value against many specific options, switch is cleaner than a long else if chain.

const day = 3;

switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  case 4:
    console.log("Thursday");
    break;
  case 5:
    console.log("Friday");
    break;
  case 6:
    console.log("Saturday");
    break;
  case 7:
    console.log("Sunday");
    break;
  default:
    console.log("Invalid day");
}
// Output: Wednesday

Key parts of switch

Part	Purpose
switch(value)	The value being tested
case "X":	A possible match (uses === internally)
break;	Stop executing — exit the switch
default:	Runs if no case matches (like else)

---

The break Keyword — Don't Skip It!

Without break, JavaScript falls through into the next case and keeps running:

const num = 1;

switch (num) {
  case 1:
    console.log("One");
    // no break!
  case 2:
    console.log("Two");
    break;
  case 3:
    console.log("Three");
}
// Output:
// One
// Two  ← also ran because of fall-through!

Always add break unless you intentionally want fall-through.

Intentional fall-through — grouping cases

Sometimes fall-through is useful: run the same code for multiple values.

const month = 4; // April

switch (month) {
  case 12:
  case 1:
  case 2:
    console.log("Winter");
    break;
  case 3:
  case 4:
  case 5:
    console.log("Spring");
    break;
  case 6:
  case 7:
  case 8:
    console.log("Summer");
    break;
  default:
    console.log("Autumn");
}
// Output: Spring