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

When we write programs, the computer must **make decisions**.

Just like humans make decisions every day.

Example in real life:

*   If it is **raining → take an umbrella**
    
*   If you are **hungry → eat food**
    
*   If the **traffic light is red → stop**
    

Programming works the same way.  
The computer checks a **condition**, then decides **what code should run**.

This idea is called **Control Flow**.

Control flow simply means:

> **Controlling which part of the program runs depending on conditions.**

In JavaScript, the main control flow tools are:

*   `if`
    
*   `if-else`
    
*   `else if`
    
*   `switch`
    

Let’s understand them step by step.

* * *

# 1\. The `if` Statement

The **if statement** runs code **only if a condition is true**.

### Example

Suppose we check if someone is **18 or older**.

```javascript
let age = 20;

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

### How the code runs

Step 1  
Check condition:

```javascript
age >= 18
```

Step 2  
If the condition is **true**, the code inside `{}` runs.

Output:

```plaintext
You can vote
```

If the condition is **false**, nothing happens.

* * *

# 2\. The `if-else` Statement

Sometimes we want **two possibilities**.

Example:

*   If you pass → celebrate
    
*   Else → study more
    

### Example

```javascript
let marks = 40;

if (marks >= 35) {
  console.log("You passed");
} else {
  console.log("You failed");
}
```

### Step-by-step

1️⃣ Check condition

```plaintext
marks >= 35
```

2️⃣ If true → run **if block**

3️⃣ If false → run **else block**

Output:

```plaintext
You passed
```

* * *

# 3\. The `else if` Ladder

Sometimes there are **many possibilities**.

Example:

Student grades.

*   90+ → A grade
    
*   75+ → B grade
    
*   50+ → C grade
    
*   below 50 → Fail
    

### Example

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

### How it runs

JavaScript checks conditions **one by one from top to bottom**.

First true condition will run.

Output:

```plaintext
Grade B
```

Because **82 >= 75**.

* * *

# Simple Visualization of if-else

```plaintext
Check condition
      |
   true?
   /   \
 yes    no
  |      |
run if  run else
```

* * *

# 4\. The `switch` Statement

When we compare **one value with many options**, `switch` can be cleaner.

Example: **Days of the week**

### Example

```javascript
let day = 3;

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

Output:

```plaintext
Wednesday
```

Because `day = 3`.

* * *

# Why `break` is Important

Inside `switch`, **break stops the execution**.

Without `break`, JavaScript keeps running the next cases.

Example without break:

```plaintext
Wednesday
Thursday
Friday
```

That is why **break is very important**.

* * *

# Simple Visualization of Switch

```plaintext
        value
          |
      switch(value)
       /   |   \
   case1 case2 case3
     |      |      |
    run    run    run
```

The case that matches the value will execute.

* * *

# When to Use `switch` vs `if-else`

Use **if-else** when:

*   Checking **ranges**
    
*   Complex conditions
    

Example:

```plaintext
marks > 75
age >= 18
temperature > 30
```

Use **switch** when:

*   Checking **one variable**
    
*   Comparing **fixed values**
    

Example:

```plaintext
day of week
menu selection
user role
```

Example comparison:

### Using if-else

```javascript
if(day === 1){
 console.log("Monday");
}
```

### Using switch

```javascript
switch(day){
 case 1:
 console.log("Monday");
}
```

`switch` becomes cleaner when there are **many values**.

* * *

# Assignment Practice

Try these programs in your browser console.

* * *

# 1\. Check Positive, Negative, or Zero

```javascript
let num = -5;

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

Example outputs:

```plaintext
Positive number
```

or

```plaintext
Negative number
```

or

```plaintext
Zero
```

### Why we used `if-else`

Because we are checking **conditions and ranges**.

* * *

# 2\. Print Day of the Week using Switch

```javascript
let day = 2;

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

Output:

```plaintext
Tuesday
```

### Why we used `switch`

Because we are comparing **one variable (**`day`**) with many fixed values**.

* * *

# Final Thoughts

Control flow is one of the **most important concepts in programming**.

It allows programs to **make decisions just like humans do**.

The most important tools are:

*   `if`
    
*   `if-else`
    
*   `else if`
    
*   `switch`
    

Once you understand these, you can build **real-world applications** like:

*   login systems
    
*   form validation
    
*   role-based dashboards
    
*   games and apps
    

Best way to learn?

Open your **browser console** and try the examples yourself.

Happy coding 🚀