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

Everyday you made so many decisions without thinking of them. You going to office, if it is raining, you think of carrying an umbrella, other you leave it at home. When you check your exam results, you think: "If I scored above 90, I passed with distinction. If I scored between 70 and 90, I just passed. Otherwise, I need to study harder."

These are called conditional decisions.

Programming works the same way.

In programming, control flow refers to the order in which your program executes instructions. By default, code runs line by line, top to bottom. But real programs need to make decisions, repeat actions, and skip steps based on conditions. That's where control flow structures come in.

In this blog, we will cover the most fundamental of condition programming using:

• if

• else if

• else

• switch

What is control flow?

Control flow is a mechanism to handle the execution of code lines. It determines which lines of code, in what order and under which conditions.

Without control flow, programming is just a code flow in a single direction. Using control flow gives a different path to the code flow. Usually, all programs/software need control flow as each program has different flows to handle.

Line 1 -> Line 2 -> Line 3 -> Line 4 -> Line 5 -> Line 6

With control flow:

Line 1 -> Line 2 -> Line 3 -> if   -> Line 4
                              else -> Line 5 -> Line 6

Understanding control flow statements

If statement

Imagine you are at a ticket counter. The rule is, "if a person is less than 18, you are not allowed to buy a ticket." You are only allowed if you are 18 or older.

There is no other action, it's either you can buy or not allowed to buy.

Code version:

The if statement works exactly like that. It checks a condition, and only if the condition is true, it executes the block of code inside the curly braces.

const age = 15;

if(age >= 18){
    console.log("You are allowed to buy the ticket");
}

console.log("Program ends!")

When age is 15, the condition age >= 18 is false, so the console inside the if block is skipped entirely. The program jumps straight to the next line after the closing brace.

How It Runs Step by Step

1. The program reaches the if statement.

2. It evaluates the condition inside the parentheses.

3. If the condition is true, it enters the block { ... } and runs the code inside.

4. If the condition is false, it skips the block entirely.

5. Execution continues with whatever comes after the closing }. (Program ends! )

If-else

The Real-Life Version

Now imagine there is an election going on in your city. So, if you age is 18 or above, you can vote. Otherwise, you cannot. Here we can see there are two flows. Either you vote in the election or not.

Code Version

const age = 20;

if(age >= 20) {
    console.log("You are eligible for voting");
}
else {
    console.log("You are not eligible for voting");
}

console.log("Program ends!")

Try to run the above code snippet in your browser console or in any online Javascript compiler.

In the previous example, we have seen the condition inside if (condition) does not fulfill. (false) , "Program ends!" prints out. But here, it will go into the else block.

Else-if

In real life or in programming, there might be more than two outcomes. Consider a grading system:

• 90 and above → Grade A

• 75 to 89 → Grade B

• 60 to 74 → Grade C

• 35 to 59 → Grade D

• Below 35 → Fail

That's five possible outcomes. You need to check multiple conditions in sequence, and execute the block that matches the first true condition. This is called an else if ladder.

const marks = 82;

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

Else

Else is used for the last case, if all the if or else if conditions will not be fulfilled. In the above code example, you can see we are printing "Fail" as it is the last option in the programming flow.

Switch

Imagine you're writing a program: "Enter 1 for Monday, 2 for Tuesday, 3 for Wednesday..." You have one variable (the user's choice), and many exact values to compare it against. Using a long else if ladder for this works, but it's repetitive and harder to read.

The switch statement was used exactly for this scenario. It takes a single expression, compares it against multiple fixed values, and jumps directly to the matching one.

Example:

const day = 3;

switch (day) {
    case 1:
        console.log("Monday");
    case 2:
        console.log("Tuesday");
    case 3:
        console.log("Wednesday");
    case 4:
        console.log("Thursday");
    case 5:
        console.log("Friday");
    case 6:
        console.log("Saturday");
    case 7:
        console.log("Sunday");
    default:
        console.log("Invalid day number.");
}

Try to run this program in the browser console or Javascript compiler.

Have you noticed the problem? What is the output of the above program?

Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday
Invalid day number.

Have you wondered why all the days get printed? Here, what helps is the break keyword.

Break

The break statement tells the program: *"*You're done with this case, exit the switch now." If you forgot to use break, just like the above example, the program will continuously execute all the cases until it gets the break.

Let's see the same example with break statment:

const day = 6;

switch (day) {
    case 1:
        console.log("Monday");
        break;
    case 2:
        console.log("Tuesday");
        break;
    case 3:
        console.log("Wednesday");
        break;
    case 4:
        console.log("Thursday");
        break;
    case 5:
        console.log("Friday");
        break;
    case 6:
        console.log("Saturday");
        break;
    case 7:
        console.log("Sunday");
        break;
    default:
        console.log("Invalid day number.");
}

Now, try to run the program with multiple values of days. You will find that it was printing only the valid day. In this case, value of day is 6, so it will print "Saturday".

Change the value of day to 10 or "10", and observe the change in the result.

Assignment: Practice These Yourself

The best way to understand control flow is to write code. Here are two exercises:

Assignment 1 — Positive, Negative, or Zero

Write a program that checks an integer and prints whether it is positive, negative, or zero.

Hint: Use an if-else ladder

Example output:

const intNum = 10;
Result: The number is positive.

const intNum = -3;
Result: The number is negative.

const intNum = 0;
Result: The number is zero.

---

Assignment 2 — Day of the Week

Write a program for a vending machine using switch. Create a variable item_name and check the cases for the item_name.

Cases:

• When item_name is "coffee", print "Dispensing Coffee"

• When item_name is "tea", print "Dispensing Tea"

• When item_name is "cookie", print "Dispensing Cookie"

• Invalid case, print "Invalid Item Name"

Use switch with break statement

Conclusion

Programming is just teaching computers to make decisions like humans. Control flow is a necessary part of programming, as a program will have different flows that need to be controlled using these statements.

Follow this series to learn more about Javascript!