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

Programming is not just about writing instructions for a computer. It’s about making decisions. Real-world problems rarely follow a straight line; they require choices based on conditions.

This is where control flow comes into play.

In JavaScript, control flow allows your program to decide which code should run and which code should not, depending on certain conditions.

In this article, we’ll explore the most fundamental control flow tools in JavaScript:

• if

• if...else

• else if

• switch

---

What Control Flow Means in Programming

Control flow refers to the order in which statements are executed in a program.

By default, JavaScript runs code from top to bottom.

Example:

console.log("Step 1");
console.log("Step 2");
console.log("Step 3");

Output:

Step 1
Step 2
Step 3

But in real applications, we often want the program to make decisions.

Example:

• If a user is 18 or older, allow them to register.

• If a student scores above 90, assign grade A.

• If a button is clicked, perform an action.

This is where conditional statements control the program’s execution path.

---

The if Statement

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

Syntax

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

Example

let age = 20;

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

Step-by-step execution:

1. JavaScript checks the condition age >= 18

2. Since 20 >= 18 is true

3. The code inside the block runs

Output:

You are eligible to vote.

If the condition is false, the code inside the block will not execute.

---

The if...else Statement

Sometimes we want one action if the condition is true and another if it is false.

That’s where if...else comes in.

Syntax

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

Example

let age = 16;

if (age >= 18) {
  console.log("You can vote.");
} else {
  console.log("You are too young to vote.");
}

Execution:

1. Check condition age >= 18

2. 16 >= 18 is false

3. The else block runs

Output:

You are too young to vote.

---

The else if Ladder

Real-world problems often involve multiple conditions, not just two outcomes.

For this, JavaScript provides the else if ladder.

Syntax

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

Example: Student Grades

let marks = 85;

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

Execution flow:

1. Check marks >= 90 → false

2. Check marks >= 75 → true

3. Stop checking further conditions

4. Execute the corresponding block

Output:

Grade B

Important rule:

JavaScript stops checking conditions once it finds the first true condition.

---

The switch Statement

The switch statement is used when we need to compare one value against multiple possible cases.

It can sometimes be cleaner than a long if-else ladder.

Syntax

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

  case value2:
    // code
    break;

  default:
    // fallback code
}

Example

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

Output:

Wednesday

JavaScript compares the value of day with each case until it finds a match.

---

Why break Is Important in switch

The break statement stops execution of the switch block once a case matches.

Without break, JavaScript will continue executing the next cases, even if they don't match.

Example without break:

let day = 2;

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

  case 2:
    console.log("Tuesday");

  case 3:
    console.log("Wednesday");
}

Output:

Tuesday
Wednesday

This happens because execution falls through to the next cases.

To avoid this, always use break.

---

When to Use switch vs if...else

Use if-else when:

• Conditions involve ranges or complex logic

• You need to evaluate different expressions

Example:

if (marks > 90)

Use switch when:

• You are comparing one variable against fixed values

• You want cleaner structure instead of many else-if conditions

Example:

switch(role)

A good rule of thumb:

Situation	Use
Checking ranges (>, <, >=)	if-else
Matching exact values	switch

THANK YOU :)