Mastering Control Flow in JavaScript: If, Else, Switch & Ternary Made Simple

Question

Introduction: Every Decision Has a Path

Imagine you’re walking to your college.

• If it’s raining → you take an umbrella for walk.
• Else → you walk normally.
• If it’s exam tomorrow → time to study before the exam day.
• Else → you scroll reels in Instagram.

So we can see, every action depends on a condition.

Programming works exactly the same way.

A program without decision-making is just a sequence of instructions. But real-world applications must respond, adapt, and branch based on data.

That branching mechanism is called control flow.

---

What is Control Flow in Programming?

Control flow determines the order in which statements execute, including conditional branching, loops, and function execution.

By default, JavaScript executes code top to bottom. But using control flow statements, we can:

• Skip parts of code
• Execute specific blocks based on conditions
• Choose between multiple paths

In simple terms:

Control flow is how your program decides what to run and when.

---

if - else if - else

The if Statement

The if statement runs a block of code only if the passed condition is true.

Syntax:

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

Example: Checking Age

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

Step-by-Step Execution

• age >= 18 → evaluates to true
• Since condition is true → block executes
• Message is printed
• If the condition is false, nothing happens.

The if-else Statement

What if we want an alternative path? Means we want that if the condition passed gets false then another action should work.
That’s where else comes in.

Syntax:

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

Example: Pass or Fail

let marks = 40;
if (marks >= 50) {
  console.log("You passed.");
} else {
  console.log("You failed.");
}

Execution Flow

• If marks ≥ 50 → first block runs
• Otherwise → else block runs

Only one block executes.

The else if Ladder

When we need to give multiple conditions, we use else if.
But you might think that Instead of else if, why can't we use multiple if and an else at the end?!! Why do we need it?!

Let's assume that there are 3 if blocks and lastly an else block in a program. If the 2nd if block satisfies the condition, then it shouldn't go to the next if and else block, right?! But in reality it's gonna check the 3rd if block also, as it sees the 3rd if block as a separate condition block.
That's why else if comes in the picture!

Each if statement is evaluated independently.
That means even if one if condition becomes true, JavaScript will still check the remaining if blocks.
But with else if, once a condition becomes true, JavaScript immediately stops checking further conditions and skips the rest of the ladder.

Syntax:

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

Example: Grade Classification

let marks = 75;
if (marks >= 90) {
  console.log("Grade A");
} else if (marks >= 75) {
  console.log("Grade B");
} else if (marks >= 50) {
  console.log("Grade C");
} else {
  console.log("Fail");
}

‼️Important Rule:
JavaScript checks conditions top to bottom.
So order matters.

---

The switch Statement

When you’re comparing one variable against multiple fixed values, switch is much cleaner than the previous technique. switch uses strict equality (===) internally to check which case matches the required logic.

Syntax:

switch (expression) {
  case value1:
    // code
    break;
  case value2:
    // code
    break;
  default:
    // fallback if any of the cases don't match
}

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;
  default:
    console.log("Invalid day");
}

‼️Why is break Important?

Switch compares once. After a case matches, execution continues sequentially until a break is found or end of switch. This is called fall-through behaviour.

Example without break:

let day = 1;

switch (day) {
  case 1:
    console.log("Monday");
  case 2:
    console.log("Tuesday");
}

Output:

Monday
Tuesday

• Because execution didn’t stop.

  break prevents unintended execution.

---

When to Use switch vs if-else

Use if-else when:

• Conditions involve ranges (marks >= 50)
• Logical operators (&&, ||) are needed
• Complex comparisons

Use switch when:

• Comparing one variable to many exact values
• Cleaner readability is required
• Handling menu options, days, roles, etc.

Example comparison:

// Range → use if-else
if (marks >= 90) { ... }

// Fixed value → use switch
switch(role) { ... }

---

The Ternary Operator (Concise Decision Making)

The ternary operator is a shorthand for if-else using ? and :. It returns a values based on the condition ,i.e, if the condition be true then the first expression witll be returned else the second one!

Syntax:

condition ? expressionIfTrue : expressionIfFalse;

Example

let age = 18;
let result = age >= 18 ? "Adult" : "Minor";
console.log(result); // Adult

• It’s concise and clean.
• But avoid nesting ternaries at the beginner level — readability drops quickly.
• Use ternary for simple conditions only.

---

Conclusion: Writing Code That Thinks

Control flow transforms JavaScript from a passive script into an intelligent decision-maker.

• if → single condition
• if-else → two paths
• else if → multiple conditions
• switch → multiple fixed values
• Ternary → concise decisions

Mastering control flow is foundational.

Because once your code can decide, it can react.

And once it reacts — it becomes powerful.

---