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

Programming is not just about writing code.

It is about **making decisions**.

Just like in real life, a program also needs to decide:

*   Should I run this code?
    
*   Or should I run something else?
    
*   Or maybe do nothing?
    

This **decision-making ability** is called **Control Flow**.

In JavaScript, the most common tools for controlling the flow of execution are:

*   `if`
    
*   `if...else`
    
*   `else if`
    
*   `switch`
    

Think of control flow like **traffic signals for your code** 🚦  
They decide **which path the program should take**.

Let's understand this step by step.

## What Control Flow Means in Programming

By default, JavaScript executes code **from top to bottom**.

Example:

```javascript
console.log("Step 1");
console.log("Step 2");
console.log("Step 3");
```

Output:

```plaintext
Step 1
Step 2
Step 3
```

But what if we want something like:

> If the user is logged in → show dashboard  
>   
> If not logged in → show login page

This is where **control flow** comes in.

Control flow allows programs to **make decisions based on conditions**.

Real-life examples:

| Situation | Decision |
| --- | --- |
| If it rains | Take umbrella |
| If marks > 90 | Give reward |
| If traffic light is red | Stop |

Programming works the **same way**.

## The `if` Statement

The `if` statement executes code **only if a condition is true**.

### Syntax

```javascript
if (condition) {
   // code runs if condition is true
}
```

### Example: Age Check

```javascript
let age = 20;

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

Output

```plaintext
You are eligible to vote
```

### How the code runs step by step

1.  JavaScript checks the condition `age >= 18`
    
2.  If it is **true**, the code inside `{}` runs
    
3.  If it is **false**, JavaScript **skips it**
    

If we change:

```javascript
let age = 15;
```

Now the output will be **nothing** because the condition is false.

## The `if...else` Statement

Sometimes we want **two possible outcomes**.

Example:

*   If student passed → show congratulations
    
*   Otherwise → show try again
    

### Syntax

```javascript
if (condition) {
   // if true
} else {
   // if false
}
```

### Example: Pass or Fail

```javascript
let marks = 35;

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

Output

```plaintext
You failed the exam
```

### Step-by-step execution

1.  JavaScript checks `marks >= 40`
    
2.  If **true** → run first block
    
3.  If **false** → run `else` block
    

## The `else if` Ladder

Sometimes there are **multiple conditions**.

Example:

Student grades.

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

### Syntax

```javascript
if (condition1) {

} else if (condition2) {

} else if (condition3) {

} else {

}
```

### Example: Grade System

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

Output

```plaintext
Grade B
```

### Important Rule

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

As soon as it finds **one true condition**, it **stops checking the rest**.

## The `switch` Statement

When we have **many fixed options**, `switch` can be cleaner than `if...else`.

Example situations:

*   Days of the week
    
*   Menu options
    
*   Role types
    
*   Status codes
    

### Syntax

```javascript
switch (value) {

  case option1:
    // code
    break;

  case option2:
    // code
    break;

  default:
    // fallback
}
```

* * *

### Example: Day of Week

```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
```

## Why `break` is Important

If we **do not use break**, JavaScript will continue executing the next cases.

Example:

```javascript
let day = 2;

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

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

  case 3:
    console.log("Wednesday");
}
```

Output:

```plaintext
Tuesday
Wednesday
```

This is called **fall-through behaviour**.

So always remember:

**Use** `break` **unless you intentionally want fall-through.**

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

| Use Case | Recommended |
| --- | --- |
| Checking ranges (age > 18) | if-else |
| Multiple conditions | if-else |
| Fixed values | switch |
| Cleaner menu logic | switch |

Example comparison:

### if-else

```javascript
if(role === "admin") {
}
else if(role === "editor") {
}
else if(role === "user") {
}
```

### switch

```javascript
switch(role){
  case "admin":
  case "editor":
  case "user":
}
```

`switch` is often **cleaner and easier to read**.

## Assignments

### Check if Number is Positive, Negative, or Zero

```javascript
let number = -5;

if (number > 0) {
  console.log("Positive number");
} else if (number < 0) {
  console.log("Negative number");
} else {
  console.log("Number is zero");
}
```

**Why we used** `if-else`

Because we are checking **range conditions**:

*   greater than
    
*   less than
    
*   equal
    

`switch` cannot handle these comparisons easily.

### Print Day of Week using Switch

```javascript
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;

  case 6:
    console.log("Saturday");
    break;

  case 7:
    console.log("Sunday");
    break;

  default:
    console.log("Invalid day");
}
```

**Why we used** `switch`

Because the input has **fixed values (1–7)**.

* * *

When developers start learning programming, they often think:

> “Why do we need control flow?”

But imagine building **real applications without decisions**.

Examples from real apps:

Netflix

```plaintext
If user subscribed → play movie
Else → show payment page
```

Amazon

```plaintext
If product in stock → show buy button
Else → show out of stock
```

Instagram

```plaintext
If user logged in → show feed
Else → show login page
```

Everything in software is basically:

**If this → do that**

Control flow is literally the **brain of your program**.

Without it, your code is just a **list of instructions with no intelligence**.

## Final Thoughts

Understanding control flow is one of the **first real steps toward thinking like a programmer**.

Master these concepts well:

*   `if`
    
*   `if...else`
    
*   `else if`
    
*   `switch`
    

Once you understand them deeply, you will start writing **smart, dynamic, decision-based programs**.

And remember:

> Great developers don’t just write code.  
> They design **how the program thinks.**

**JavaScript becomes easier when you try things yourself.**

Thank you for reading this article.

If you found this helpful, feel free to connect with me on [**LinkedIn**](https://www.linkedin.com/in/devsantoshkumar/) and follow my journey as I continue sharing JavaScript and frontend concepts ([**more blogs**](https://devwithsantosh.hashnode.dev/)).