Control Flow in JavaScript: If, Else, and Switch

🎙️ Introduction

Hey readers — welcome back 👋

I hope you’re doing great. After learning about variables and operators, you now know how to store data and perform operations on it. Good. Solid foundation.

By the way, this blog is part of the JavaScript series.

If you haven’t checked them out yet:

• Blog 1 — JavaScript Variables
• Blog 2 — JavaScript Operator

Now we move to something more interesting.

In this blog, we’ll learn about the flow of a program.

And by flow, I mean control flow — which is just a fancy way of saying decision-making in code.

With flow of program I mean, control flow. Control flow is just a fancy term of decision making.

In real life, we constantly make decisions:

• If it’s raining → take an umbrella.
• If marks are low → prepare for a lecture at home.
• If salary hits → order food.

Programs work the same way.

We give them conditions.
If the condition is satisfied, they respond with a specific action.

Today, we’ll learn how to teach JavaScript to make decisions.

Let’s go 🚀

---

🚦 What is Control Flow?

Control Flow is the traffic director of programming — it determines which statements are executed in a program.

Default nature of JavaScript is to execute from top to bottom.

Control flow statements let us change the order, based on conditions, loops or keywords.

Developers tend to manage control flow statements based on their output conditions.

Whenever the conditions are matched, the program just branches out of the control flow and gets executed with result.

Simple Analogy:

There are various kinds of control flow statements for creating branches, we’ll discuss few upcoming topics.

---

🔍 The if and if-else Statement

⁜Basic if Syntax

Personally, it’s my favorite one. It feels like someone who overthinks everything.

“What if this?”
“What if that?”

The if(...) statement evaluates a condition in parenthesis and, if the result is true, executes a block of code.

Basic Syntax:

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

Example:

let marks = 35;
if(marks >= 40) {
    console.log("Congrats, your ass got saved from dad") // my parents are stict 🥲
}

In this example:

• The condition is marks >= 40
• We check → is 35 greater than or equal to 40?
• The answer is false.
• So the code inside the block does not run.

That’s it.

The condition can get complex too — but let’s not scare ourselves yet.

---

⁜The if - else Statement

We can this as a modified version of the if statement.

The else clause gives the operation to do other things if the condition is falsy.

Basic Syntax

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

Example

let marks = 35;
if (marks >= 40) {
    console.log("Congrats, you passed!");
} else {
    console.log("Better luck next time... maybe bribe the professor with snacks?"); // I'd to pass 
}

Now we have two clear paths:

→ Condition true → first block runs

→ Condition false → else block runs

Only one of them executes.

Let me give you another example…

// You playing FIFA with your friend
let personWon = "friend"; // Ouch!!

if (personWon === "friend") {
  console.log("Blame the loss on lag, the controller, and the ref 🎮😤");
} else {
  console.log("Boo him. Tease him. Screenshot the score. Eternal reminder activated 📸🔥");
}

Guess the output of this one…

---

🪜The else if Ladder

Besides if and else, sometimes two conditions are just not enough.

if-else only gives us two paths.

When we need multiple checks, we use the else if ladder.

Instead of writing many separate if statements, we chain them together.

The conditions are checked from top to bottom.

As soon as JavaScript finds the first true condition, it runs that block — and stops checking further.

Basic Syntax

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

Example:

let favSuperHero = "Spiderman";

if (favSuperHero === "Batman") {
  console.log("Personality Traits: Rich | Daring | Mysterious 🦇");
} else if (favSuperHero === "Tony Stark") {
  console.log("Personality Traits: Cool | Tech Genius | Confident 🤖");
} else if (favSuperHero === "Spiderman") {
  console.log("Personality Traits: Funny | Responsible | Relatable 🕷️");
} else {
  console.log("You didn’t choose a valid superhero.");
}

The code checks each condition one by one.

Since the value is "Spiderman", it skips the first two and runs the third block.

Order matters here.

Exercise:

let walletHasMoney = 42;
let feeling = "broke";

if (feeling === "generous" && walletHasMoney > 1000) {
  console.log("Tonight we feast like kings 👑");
} else if (feeling === "happy" && walletHasMoney > 200) {
  console.log("Fine. One snack each. Share properly.");
} else if (feeling === "sarcastic") {
  console.log("I support you emotionally, not financially.");
} else if (walletHasMoney <= 50) {
  console.log("Bro I’m one transaction away from homelessness.");
} else {
  console.log("Let’s pretend we already ate.");
}

Try to figure out which condition becomes true.

---

🔄 The switch Statement

When dealing with multiple conditions, we have another tool — the switch statement.

switch is often cleaner than writing many else if statements, especially when checking one variable against many specific values.

Basic Syntax:

switch (expression) {
    case value1:
        // code
        break;

    case value2:
        // code
        break;

    case value3:
        // code
        break;

    default:
        // default code
}

• case → Represents a possible value.
• break → Stops execution so the program doesn’t continue to the next case.
• default → Runs if no case matches (like else).

Example

let day = "Monday";

switch (day) {
  case "Monday":
    console.log("Start of the week 😴");
    break;

  case "Friday":
    console.log("Weekend mood activated 🎉");
    break;

  case "Sunday":
    console.log("Rest day 😌");
    break;

  default:
    console.log("Just another regular day.");
}

JavaScript compares the value using strict equality (===).

Since day is "Monday", the first case runs.

If we forget break, execution continues to the next cases.

This is called fall-through.

If we forget break, execution continues to the next case — and we will see output:

Start of the week 😴
Weekend mood activated 🎉
Rest day 😌

---

🙃 Ending Thought

Control flow is where JavaScript actually starts to feel alive.

As real-life scenarios, we can now create decisions in our program. Until now, we were just creating variables and operating on them using operators.

But with if, else, else if, and switch, we’re teaching our program how to think — how to choose, react, and respond based on situations.

Thing of it as telling the computer:

“If this happens, do this.

If not, try something else.

And if nothing matches… handle it anyway.”

➡️ What to do next?

I would say, practice is the key.

The more you practice control flow, the better your problem-solving mindset becomes. You’ll start seeing real-life situations in conditions and branches — and that’s when you know you’re growing as a developer.

So keep experimenting.

Break the code. Fix it. Reorder conditions. Remove a break and see what happens.

Till then,

Keep Learning | Keep Breaking | Be Curious

PEACE OUT ✌️

---