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

By Saurabh Prajapati — Full-Stack Engineer @ IBM India | GenAI & React Enthusiast

---

Wait — What Even Is "Control Flow"?

Let me be honest. When I first saw the term "control flow" in a programming book, I thought it sounded way more complicated than it actually is.

Here's the simple truth: control flow just means the order in which your code runs.

By default, JavaScript reads your code from top to bottom, line by line. But what if you only want certain code to run in certain situations? That's exactly where control flow comes in.

Think about real life for a second:

🚦 If the traffic light is green → you drive. Otherwise → you stop.

That's control flow. You're making a decision based on a condition.

In JavaScript, we do the same thing. We check a condition, and based on whether it's true or false, we run different pieces of code.

Let's explore exactly how that works.

---

1. The if Statement

The if statement is the most basic building block of decision-making in JavaScript.

Syntax

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

Real Example

let age = 20;

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

Output: You are eligible to vote!

The code inside the curly braces {} only runs if the condition age >= 18 is true.

If age was 15, nothing would happen at all. The block would be completely skipped.

💡 I wish I knew this earlier: The condition inside if() doesn't have to be a comparison. Anything "truthy" works — like a non-empty string, a number that isn't zero, or even an object. JavaScript is flexible like that.

---

2. The if-else Statement

Okay, but what if you want something to happen even when the condition is false? That's where else comes in.

Syntax

if (condition) {
  // runs if condition is true
} else {
  // runs if condition is false
}

Real Example

let marks = 35;

if (marks >= 40) {
  console.log("You passed!");
} else {
  console.log("You failed. Better luck next time.");
}

Output: You failed. Better luck next time.

Think of if-else like a fork in the road. You always take one path or the other — never both, never neither.

[Condition?]
    |
   YES → run if block
    |
   NO  → run else block

This is the most common pattern you'll use as a developer. I use it literally every day at work.

---

3. The else if Ladder

Sometimes two options aren't enough. What if you have three or more conditions to check?

That's where else if steps in.

Syntax

if (condition1) {
  // runs if condition1 is true
} else if (condition2) {
  // runs if condition2 is true
} else {
  // runs if none of the above are true
}

Real Example — Grading System

let marks = 72;

if (marks >= 90) {
  console.log("Grade: A");
} else if (marks >= 75) {
  console.log("Grade: B");
} else if (marks >= 60) {
  console.log("Grade: C");
} else if (marks >= 40) {
  console.log("Grade: D");
} else {
  console.log("Grade: F — Please retry");
}

Output: Grade: C

JavaScript checks each condition from top to bottom. The moment it finds one that's true, it runs that block and stops checking the rest.

This is important! Here's what I mean:

let marks = 95;

if (marks >= 60) {
  console.log("Grade: C"); // ← This runs first... and stops!
} else if (marks >= 90) {
  console.log("Grade: A"); // ← This never runs!
}

See the bug? Order matters. Always put your most specific or highest condition first.

😅 I made this exact mistake when I was learning. Spent 20 minutes debugging a grading script before realizing the conditions were in the wrong order. Lesson learned.

---

🗺️ Flowchart: How if-else Works

        ┌─────────────────┐
        │  Start          │
        └────────┬────────┘
                 │
        ┌────────▼────────┐
        │  Check          │
        │  Condition 1?   │
        └────────┬────────┘
           YES   │    NO
     ┌───────────┘    └───────────┐
     ▼                            ▼
┌─────────┐              ┌────────────────┐
│ Run     │              │ Check          │
│ Block 1 │              │ Condition 2?   │
└─────────┘              └────────┬───────┘
                            YES   │    NO
                      ┌───────────┘    └──────────┐
                      ▼                            ▼
                 ┌─────────┐               ┌─────────────┐
                 │ Run     │               │ Run else    │
                 │ Block 2 │               │ block       │
                 └─────────┘               └─────────────┘

---

4. The switch Statement

Now here's something I found really interesting when I first discovered it.

Imagine you're building a day-of-the-week app. With if-else, it would look like this:

if (day === 1) {
  console.log("Monday");
} else if (day === 2) {
  console.log("Tuesday");
} else if (day === 3) {
  console.log("Wednesday");
// ...and so on

That's a lot of repetition. switch is designed exactly for situations like this — when you're comparing one variable against many fixed values.

Syntax

switch (expression) {
  case value1:
    // code
    break;
  case value2:
    // code
    break;
  default:
    // code if no case matches
}

Real Example — Day of the Week

let 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 number");
}

Output: Wednesday

Wait, What's break Doing Here?

Great question. I was confused about this too at first.

Without break, JavaScript doesn't stop after finding a matching case. It keeps running every case below it — which is almost never what you want.

This behavior is called "fall-through".

let day = 3;

switch (day) {
  case 3:
    console.log("Wednesday"); // ← This runs
  case 4:
    console.log("Thursday");  // ← This ALSO runs (no break!)
  case 5:
    console.log("Friday");    // ← And this too!
}

Output:

Wednesday
Thursday
Friday

See the problem? We matched case 3, but without break, it kept going.

Always add break at the end of each case. (Unless you intentionally want fall-through — which is rare, but possible for grouping cases.)

Grouping Cases (Intentional Fall-Through)

let day = 6;

switch (day) {
  case 6:
  case 7:
    console.log("It's the weekend! 🎉");
    break;
  default:
    console.log("It's a weekday.");
}

Output: It's the weekend! 🎉

Here both case 6 and case 7 fall through to the same code block. This is a clean pattern for grouping similar cases.

What About default?

default is like the else in a switch. It runs when no case matches.

let color = "purple";

switch (color) {
  case "red":
    console.log("Red");
    break;
  case "blue":
    console.log("Blue");
    break;
  default:
    console.log("Unknown color"); // ← This runs
}

---

🗺️ Switch Branching Diagram

         ┌──────────────────┐
         │  switch(value)   │
         └────────┬─────────┘
                  │
       ┌──────────┼──────────┐
       ▼          ▼          ▼
  [case 1]    [case 2]   [default]
       │          │          │
    (code)     (code)     (code)
       │          │          │
    [break]    [break]    (end)

---

5. When to Use switch vs if-else?

This is the question I kept asking myself. Here's what I've figured out after using both in real projects:

Situation	Use This
Checking a range (e.g., marks > 80)	if-else
Comparing one value to many fixed options	switch
Complex conditions with && or `
Menu selection, day/month names, status codes	switch
Two or three simple options	if-else
Five or more fixed values	switch

A Quick Rule of Thumb

Use if-else when you need flexible conditions. Use switch when you're matching one thing to many exact values.

---

Key Discoveries Along the Way

Here's what genuinely surprised me while diving into this topic:

1. switch uses strict equality (===) It doesn't do type conversion. So case "1" won't match if your value is the number 1.

let input = 1; // number

switch (input) {
  case "1":  // ← string "1" — won't match!
    console.log("One");
    break;
  case 1:    // ← number 1 — matches!
    console.log("One (number)");
    break;
}

2. You can use switch with strings too

let language = "JavaScript";

switch (language) {
  case "JavaScript":
    console.log("Runs in the browser!");
    break;
  case "Python":
    console.log("Great for data science!");
    break;
  default:
    console.log("Cool choice!");
}

3. if conditions can be anything truthy

let name = "Saurabh";

if (name) {
  console.log("Name exists: " + name);
}
// Works! Because a non-empty string is truthy.

---

Wrapping Up

Control flow is one of those foundational concepts that everything else in programming is built on. Once you understand how if, else, and switch work, you start seeing them everywhere.

Here's a quick recap of what we covered:

• if — runs code when a condition is true

• if-else — runs one block if true, another if false

• else if — chains multiple conditions together

• switch — cleanly matches one value against many fixed options

• break — essential in switch to prevent fall-through

• default — the fallback when no case matches

About the Author

Saurabh Prajapati (SP) Full-Stack Software Engineer at IBM India Software Lab, working on cloud-native enterprise solutions with Maximo. Passionate about GenAI, React, and modern web technologies.

Skills: JavaScript · TypeScript · React · Next.js · Node.js · LangChain · OpenAI API · AWS · Docker

📧 saurabhprajapati120@gmail.com 🐙 GitHub: prajapatisaurabh 💼 LinkedIn: saurabh-prajapati