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

Introduction

When writing programs, we often need the program to make decisions based on certain conditions. For example, a website might show different content depending on whether a user is logged in, or a program might perform different actions depending on user input.

This decision-making ability in programming is known as control flow.

In JavaScript, control flow statements allow us to control how the program executes code based on conditions. Some of the most commonly used control flow statements include:

• if

• if...else

• else if

• switch

In this article, we will explore how these statements work and when to use them.

---

1. What Control Flow Means in Programming

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

Normally, JavaScript executes code from top to bottom.

Example:

let a = 5;
let b = 10;

console.log(a + b);

Output:

15

The program runs line by line.

However, sometimes we want the program to execute code only if certain conditions are true. That is where control flow statements are used.

---

2. The if Statement

The if statement is used to execute a block of code only when a condition is true.

Syntax

if (condition) {
  // code to execute if condition is true
}

Example

let age = 18;

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

Output:

You are eligible to vote.

Explanation:

• The condition age >= 18 is checked.

• Since the condition is true, the code inside the block executes.

If the condition is false, the code inside the if block is skipped.

---

3. The if...else Statement

Sometimes we want the program to execute one block of code if the condition is true and another block if it is false.

For this, we use the if...else statement.

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 not eligible to vote.");
}

Output:

You are not eligible to vote.

Explanation:

• The condition age >= 18 is false.

• Therefore, the else block runs.

---

4. The else if Statement

When there are multiple conditions, we can use the else if statement.

This allows us to check several conditions one by one.

Syntax

if (condition1) {
  // code
}
else if (condition2) {
  // code
}
else if (condition3) {
  // code
} 
else {
  // default code
}

Example

let marks = 85;

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

Output:

Grade B

Explanation:

• JavaScript checks each condition from top to bottom.

• Once a condition becomes true, the corresponding block executes.

• The remaining conditions are skipped.

---

5. The switch Statement

The switch statement is used when we want to compare a value against multiple possible cases.

It is often cleaner than using many else if statements.

Syntax

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

  case value2:
    // code
    break;

  default:
    // 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

Explanation:

• The value of day is compared with each case.

• When a match is found, the corresponding code runs.

• break prevents execution from continuing to the next case.

---

6. When to Use switch vs if...else

Both switch and if...else are used for decision-making, but they are useful in different situations.

Use Case	Recommended
Checking ranges (>, <)	if...else
Multiple exact values	switch
Complex logical conditions	if...else
Simple value comparisons	switch

Example Where if is Better

let score = 75;

if (score > 90) {
  console.log("Excellent");
}

Because we are checking ranges.

Example Where switch is Better

let role = "admin";

switch(role) {
  case "admin":
    console.log("Full access");
    break;

  case "editor":
    console.log("Edit access");
    break;

  case "viewer":
    console.log("Read-only access");
    break;
}

Here we compare specific values, so switch is cleaner.

---

Conclusion

Control flow statements allow JavaScript programs to make decisions and execute different blocks of code based on conditions. Instead of executing code sequentially, control flow gives programs the ability to respond dynamically to different inputs and situations.

In this article, we explored the basic control flow structures in JavaScript, including the if statement, if...else, the else if statement, and the switch statement. Each of these tools helps developers handle different decision-making scenarios in their programs.

Understanding control flow is essential for writing logical and efficient JavaScript code. As you continue building applications, you will frequently use these statements to control how your programs behave under different conditions.

Feedback Request:

“I’m a beginner learning computer science. If you’re experienced, I’d really appreciate feedback on clarity, accuracy, and structure. Be honest, it’ll help me improve.”