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

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

Imagine you are going outside.

Before leaving, you check one thing.

If it is raining, you take umbrella.

Otherwise, you don't.

Everyday we make decisions like this.

Programming also work in same way.

Sometimes program need to take decision based on some condition.

This is called Control Flow.

In this article we will understand:

• What control flow is

• if statement

• if else statement

• else if ladder

• switch statement

• When to use switch and if else

• Small practice assignment

---

What is Control Flow?

Control Flow simply means deciding which code should run.

Program does not always run every line.

Sometimes it skip few lines.

Sometimes it run different block of code.

This all depend on conditions.

Think like traffic signal.

If light is green, you go.

If light is red, you stop.

Program also make decisions like this.

---

The if Statement

The if statement run code only when condition is true.

Example:

let age = 20;

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

Output:

You can vote

If condition become false, nothing happen.

Example:

let age = 15;

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

Output:

Nothing print in console.

---

The if else Statement

Sometimes we want another code to run if condition is false.

For that we use else.

Example:

let age = 16;

if(age >= 18){
    console.log("Eligible");
}else{
    console.log("Not Eligible");
}

Output:

Not Eligible

Only one block will execute.

Either if or else.

Never both.

---

The else if Ladder

Sometimes one condition is not enough.

Suppose we want check marks.

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

JavaScript check conditions from top to bottom.

When one condition become true, remaining conditions are skipped.

This is why order is very important.

---

The switch Statement

switch is another way of making decisions.

It is useful when we compare one value with many options.

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

Switch make code look more clean when there are many choices.

---

What is break?

Many peoples forget to write break.

But it is very important.

break stop the switch after matching case.

Example:

let day = 1;

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

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

Output:

Monday

If you remove break, JavaScript continue checking next cases also.

Sometimes this is needed, but mostly we use break.

So don't forget it.

---

When to Use if else and switch

Use if else when:

• Comparing different conditions

• Using greater than or less than

• Checking multiple expressions

Example:

if(age >= 18)

Use switch when:

• Comparing one value

• Many fixed options

Example:

switch(day)

Simple rule to remeber:

If checking ranges, use if else.

If checking fixed values, use switch.

---

Step by Step Flow

Let's understand how code run.

Example:

let age = 20;

if(age >= 18){
    console.log("Adult");
}
else{
    console.log("Child");
}

JavaScript do these steps:

1. Read variable.

2. Check condition.

3. Condition is true.

4. Execute if block.

5. Skip else block.

This is how control flow work.

---

Small Practice Assignment

Check Positive Negative or Zero

let number = -5;

if(number > 0){
    console.log("Positive");
}
else if(number < 0){
    console.log("Negative");
}
else{
    console.log("Zero");
}

---

Print Day Using switch

let day = 5;

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;

    default:
        console.log("Invalid Day");
}

Try changing values and see what happen.

Doing small experiments help you understad concepts much faster.

---

One Important Thing

Don't try to memorize every syntax.

Instead write small programs.

Use different conditions.

Change values.

Observe the output.

After writing few examples, these concepts become much easier.

Practice is always better than only reading.

---

Conclusion

Control Flow is used to make decisions in JavaScript.

In this article we learned:

• What Control Flow means

• if statement

• if else statement

• else if ladder

• switch statement

• break keyword

• When to use switch and if else

These concepts are used in almost every JavaScript program.

Once you become comfortable with them, writing real programs become much more easier becuase now your code can take decisions just like humans do.