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

Hello readers 👋, welcome to the 3rd blog of this JavaScript series!

In this blog, we will deep dive into Control Flow in JavaScript - how JavaScript makes decisions while running a program.

Just like humans make decisions every day:

If it rains, I will take an umbrella.
Otherwise, I will go outside without one.

Programming languages work in a very similar way.
JavaScript uses Conditional statements to decide which code should run and which code should be skipped.

Let’s look at a simple example.

let rains = true;

if (rains) {
  console.log("I will take the umbrella");
} else {
  console.log("Wow, the sunshine is great!");
}

/*
OUTPUT
I will take the umbrella
*/

Here’s what happens step by step:

1. JavaScript checks the condition inside if (rains)
2. Since rains is true, the code inside the if block runs
3. The else block is skipped

So the output becomes:

I will take the umbrella

This ability of JavaScript to choose different paths of execution based on conditions is called Control Flow.

The if and else statement that you saw is called a Conditional statement.

Conditional Statement

These statements execute different blocks of code based on whether a specified condition evaluates to true or false.

Types of Conditional statements in JavaScript are:

• if statement
• if...else statement
• else if ladder
• switch statement
• Ternary operator (?:)

1. if statement

It is the simplest way to make decisions in JavaScript. It executes a block of code only if the condition is true.

Syntax:

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

Example:

let age = 20;

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

Step-by-Step flow of how the code is executed:

• Within the if() - The JavaScript checks if the condition is true of not.
• If the condition is true, then the code block within the curly braces {} gets executed
• If the condition is false, then it is not executed.

2. if...else Statement

Sometimes we want two possible outcomes. If the condition is true then something happens if it is false then something also happens.

Real-life Example:
If your Mark is above the passing grade then you pass the exam else you fail the exam.

But you can't be Pass and Fail at the same time.

Syntax:

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

Example:

let marks = 35;

if (marks >= 40) {
  console.log("You passed the exam");  
} else {
  console.log("You failed the exam");  // This execute
}

Step-by-Step flow of how the code is executed:

• The if() checks if the condition is true or not.
• If the condition is true - execute the code in the if block.
• If the condition is false - execute the code in the else block.

3. else if Statement

Sometimes we need to check multiple conditions. For that we use else if statement.

Real-life Example:

• A Grading system in your college.
• Marks ≥ 90 → Grade A
• Marks ≥ 75 → Grade B
• Marks ≥ 50 → Grade C
• Otherwise → Fail

Syntax:

if (condition1) {

} else if (condition2) {

} else if (condition3) {

} else {

}

Example:

let marks = 82;

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

Step-by-step execution flow

• Check marks >= 90 → false
• Check marks >= 75 → true
• That block runs
• Remaining conditions are skipped

4. switch Statement

A switch statement is a control flow mechanism in programming that selects and executes one code block from multiple alternatives based on the value of a single expression.

Real-life example:
On Monday you will go to the park, on Tuesday you will go to the temple, on Wednesday you will go to the restaurant for a meal, on Thursday you will go to the gym, on Friday you will go for running and finally on Weekends you will go shopping.

Syntax:

switch(expression) {

  case value1:
    // code
    break;

  case value2:
    // code
    break;

  default:
    // code if no case matches

}

Example:

let day = "Monday";

switch(day) {

  case "Monday":
    console.log("Visit Park");
    break;

  case "Tuesday":
    console.log("Visit Temple");
    break;

  case "Wednesday":
    console.log("Meal at restaurant ");
    break;

  case "Thursday":
    console.log("Hit the Gym");
    break;

  case "Friday":
    console.log("Go for a running");
    break;

  default:
    console.log("Shopping!!!")  
}

// OUTPUT
// Visit Park

The break statement stops execution of the switch block. Without break, JavaScript continues executing the next cases.

Conclusion

Control flow is one of the most important concepts in programming.
By using if, else, else if, and switch, JavaScript programs can make decisions and follow different execution paths.

Once you understand these concepts, you can start building programs that respond dynamically to user input and real-world conditions.

---

Hope you liked this blog. If there’s any mistake or something I can improve, do tell me. You can find me on LinkedIn and X, I post more stuff there.