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

Understanding the control flow of a program is very important to understand the behaviour of code. This blog will help you understand control flow in JavaScript.

What does control flow mean in programming?

Control flow refers to the order in which statements in a program are executed, usually from top to bottom.

However, in many cases, we need to skip or repeat certain parts of the program based on conditions.

JavaScript provides control flow statements that allow us to control the execution of code and skip specific parts when needed.

The if statement :

The if statement is the most basic control flow statement. It simply checks whether a condition is true. If the condition is true, the code inside the if block runs; otherwise, the block is skipped.

Example :

let age = 18;

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

In the above code, the condition is age >= 18.

The value of age is 18.

So, the condition becomes 18 >= 18, which evaluates to true. Therefore, the code inside the if block will run.

The if-else statement :

First, the if block checks the condition. If the condition evaluates to true, the code inside the if block runs; otherwise, the code inside the else block runs.

Example :

let age = 16;

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

The else if ladder :

The if-else ladder is used when we need to check multiple conditions. It allows us to execute different blocks of code based on different conditions.

In an if-else ladder, conditions are checked one by one from top to bottom. As soon as one condition evaluates to true, its corresponding block runs, and the rest of the conditions are skipped.

If none of the conditions are true, the else block runs.

Example :

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

output: Grade B

The switch statement :

The switch statement works like an if-else ladder, but it is often more readable and clean when dealing with multiple conditions based on a single value.

In a switch statement, we define different case blocks. The value of the expression is compared with each case. If a match is found, the corresponding block of code runs.

If none of the cases match, the default block runs.

Break statement : The break statement is used to stop the execution of the switch block. Without break, the execution continues to the next case, even if a match is found.

Example :

let day = 2;

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

When to use switch vs if-else :

switch:

Use the switch statement when you need to compare a single value with multiple fixed values.

Conditions are based on strict equality (===) checks.

(Refer to the above example.)

if-else:

Use if-else when you need to evaluate conditions that return true or false. Based on the result, the corresponding code block runs.

It is especially useful when working with:

• ranges (e.g., >, <)

• multiple conditions (&&, ||)

• complex logic

Summary :

In this blog, we learned what control flow in a program is. We discussed how we can control the flow of code using control flow statements in JavaScript with practical examples.

We also explored the use of switch and if-else statements.