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

When you write JavaScript, you're not just telling the computer *what exists* — you're telling it *what to do next*. That “what to do next” is called **control flow**.

If you don’t understand control flow deeply, your code will feel random. If you master it, your code starts to feel like a **well-structured decision system**.

This guide is designed to take you from intuition → execution → real-world thinking.

* * *

# What is Control Flow in Programming?

Control flow defines **the order in which code runs**.

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

But real-world problems are not linear:

*   If a user is logged in → show dashboard
    
*   Else → show login page
    
*   If marks > 90 → grade A
    
*   Else if marks > 70 → grade B
    

So we need **decision-making structures**.

* * *

## Real-Life Analogy

Imagine:

*   If it's raining → take an umbrella
    
*   Else → go normally
    

That’s exactly how JavaScript thinks.

* * *

# The `if` Statement

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

## Syntax

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

## Example

```js
let age = 20;

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

### How it runs step-by-step:

1.  Check condition → `age >= 18`
    
2.  If true → execute block
    
3.  If false → skip block
    

* * *

## Visual Flow

![Image](https://images.openai.com/static-rsc-4/WNw4GUl0IB8FnIxN7UBaGIITXnUTEckZZV40sw0ug_6hWyC0RizPb9fzvBcZJVl4JnkzpF_OoUJ3sDotpzl-43XIbIQtSfXbxdZJzJAsqPUwH_C6frV55BcXnSEPRSgyhfWUuqmVUiNzJcw1OdXQtgycWq3yWINN9dOxqtICgIKJg1eZryETjWXPJkWAK6Mt?purpose=fullsize align="center")

![Image](https://images.openai.com/static-rsc-4/lQdg254rMDo5BEIPhJQIlgTw4UOwA4oXpY2gfa-JZdDiaFh8_gMGfTd9hPCquIJAOGzoeUAD6CwjGNdyIk9-fQwLBIt_juzogHRFH1t0vp0UlF5hy37ofzcrOZNejVxUsMwIP-EAMyAyLQXY6ubo-2Bl2MpektbMjil1FLPYwz162TYNS90DC5ineRdPwWmg?purpose=fullsize align="center")

![Image](https://images.openai.com/static-rsc-4/tHdx53DoFETUGIV538cUuwoP5PjprCtMUAaHmkOsr5ySo3HHPhOcoP-a1Fu9Y5et6XEEfT4ENpOSaydY6yfU4GPCGQLmMaEcr7CfTMQhYxllDwh3xfP--N74AAPtYLYVBYf0TMlqI_khyCq-cVC_0x0_TzFKahPwbL6yJSscZOh5Hu58DsNXBxdrnReL1O1B?purpose=fullsize align="center")

![Image](https://images.openai.com/static-rsc-4/MbPMyxhl9fMNTEYPSn6XrLyCCCab1flxOq7NQQzBBvylK-LVCVks7vb7d1s4g2hrXgI-fBWOtAr6uwGUCpo0JhuciBGiJR00L362YVcD_M9O9WQobt0FuMkjvSn3eN3AgQ-nr2YVJEeatCYQKpWgmV4tnIayHrj17P5zz49m7BQ8EYVJLndntpN1DvkwSia_?purpose=fullsize align="center")

![Image](https://images.openai.com/static-rsc-4/3JPFI33EtuS408Tz0lUHc5tJOPehiisihylO6WQtEWag1MnJ-ukLgvgXOBX4-wElCpBtmceTjPFIpvoBPe-xu12ALJ6Y2yJWBBNAS9JFQDWddLOPP2O3_SKduTqR5hKrWlMWgkIbdDggoQ4zKXzbMOmZCoDuZOvqBaMx9Uunh_JBrcUYC18MQRzAORi0wIxQ?purpose=fullsize align="center")

![Image](https://images.openai.com/static-rsc-4/Z6k60_XAiUVS6W3qAxFHXuBn6qmaH6IE1Ye3sYztOlOoy-YGJrAqj2mdZd-ZUWT1UV1IGl3qmxu6QWx0iXg9PosC9zzbANQ65pxLoJtXd7TlwCI9PaA80NwgVorfLISWmekB8X5XK8_XfW2D2gzJW62Sl4j0MlhQuICFXb3lZ5UJF8lyvzHfiwrVB9cFX-CK?purpose=fullsize align="center")

* * *

# The `if-else` Statement

Now we add an **alternative path**.

## Syntax

```js
if (condition) {
  // true block
} else {
  // false block
}
```

## Example

```js
let age = 16;

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

### Execution Thinking

*   Condition true → first block
    
*   Condition false → else block
    

This ensures **one path always runs**

* * *

# The `else if` Ladder

Real problems have **multiple conditions**.

## Syntax

```js
if (condition1) {
} else if (condition2) {
} else if (condition3) {
} else {
}
```

## Example (Marks System)

```js
let marks = 78;

if (marks >= 90) {
  console.log("Grade A");
} else if (marks >= 70) {
  console.log("Grade B");
} else if (marks >= 50) {
  console.log("Grade C");
} else {
  console.log("Fail");
}
```

* * *

## Step-by-step Execution

*   Check condition1 → false
    
*   Check condition2 → true
    
*   Stop here (no further checks)
    

Important:

**Only the first true condition runs**

* * *

## Visual Ladder

![Image](https://images.openai.com/static-rsc-4/I92RYwv-nw6HxJMUs_0jJG_nh0Z1yiIUsdmttLfcTXLEKksYG1yx6ETxbxTakDJpThkyRIyn8CPjY85FjMYgaRKxwq0tBVaT92yA-FChmHf65Wt47vsgdaoIG55kappNKkOsPBnrkDd9S5cJBiupn9bHnT_msmMekNaYnc0VThKI5TkSOeCnajZH_eUXAWlC?purpose=fullsize align="center")

![Image](https://images.openai.com/static-rsc-4/3JPFI33EtuS408Tz0lUHc5tJOPehiisihylO6WQtEWag1MnJ-ukLgvgXOBX4-wElCpBtmceTjPFIpvoBPe-xu12ALJ6Y2yJWBBNAS9JFQDWddLOPP2O3_SKduTqR5hKrWlMWgkIbdDggoQ4zKXzbMOmZCoDuZOvqBaMx9Uunh_JBrcUYC18MQRzAORi0wIxQ?purpose=fullsize align="center")

![Image](https://images.openai.com/static-rsc-4/YItL3qOxHCNGevIGpQNdmeAPWHVn0B-XVwq5BW4gldHL4L21XfmmUl-S6AT_JIDnSO8zsNlsOkMKetXeIED-x9oasb2zsMN1cwBx4T4dQmNF0wGaK1zSBwI8OCkCS7aQqQcBCMboxWrlJJUEziRix9dEGIjuG5Jy3cm8HGmzCZD6BahWgF9dLLfsiQ7L8YCs?purpose=fullsize align="center")

![Image](https://images.openai.com/static-rsc-4/_I_zdlXctFSDEVj138-84UQlr_0o5TOfcAJlE-kLrH9CxZOFOj2BMfeVbtyOsT2bCoUy3CXq9m5uqdrGMuNHpNXGCyQoY3eZHNq_8h0PqZzivvxCAkXDXN190Nm1r39Ial79TsEKNHNL3fjaOnNc5wmaphCoo3naHZvKJMlfpGib0cswrO7YXc_Na6M-C3-j?purpose=fullsize align="center")

![Image](https://images.openai.com/static-rsc-4/CJj2bmUGuCT9vkEFNqhVNYGpieBR0ceLa7jsHrZjS-O56Sn3H7VqqibVQ4l8SfA9Jlpk9mTb75oAsgZCcc2GLvJoK9qvQdtvXMtS0bnEXR7oBRWRpKHe1DozRbUS7tbDhjPKqzkMxbFB4tBGdvIrwb4fqstq0zyOQVfjfcIcwIeJ6-5Xkzzz7qW9VFucVbtZ?purpose=fullsize align="center")

![Image](https://images.openai.com/static-rsc-4/J8dtxx_afzXGAw5fT6JCBO_Jz7stoQY7gIp9SQKvz0Aest3qm0_6_OV560YeS-9fhTD8sZ1O9Fs9ppX7F6qjqRIQaR9LtPFwaQDDpHc5b_kwwiw03WljyucOj4cArNwhBK1Wp4BXNt8XTjYtR7SZTatWEk4189LhMP7za3eOBG7kavOWGXUp8jsk1OgndxIu?purpose=fullsize align="center")

![Image](https://images.openai.com/static-rsc-4/0GpZ9-qZwyaaFliZcxiXqXq9KAtCI8ZjptCnjHyYY42kbSOKgVgrKqi0SzajMKnAiwcR0SSGBESI02IeKzMCjHiWClPkAl6HNTABzsAqIu3z3jXlD27nhbzD74dtJThorp0erUopME6wZP9N0dfFdqydzwI4yc45PXwnou427_M94UrNygJ7-9oVxE69ZqFP?purpose=fullsize align="center")

![Image](https://images.openai.com/static-rsc-4/d9cVxDDd4LsteKOXSKZTTCPl7_E4szI8nK4OUQYCznzNl7E6wNL2TKcrOUffGxDfVcUnjIoWAmtppY2iIx993Lzi8r4jHstwwRlho4khTefNG-sfBh_FwwxCk8G_f6IHFpruYdN5uJh58s94Uz1hTQz07kRIJDBxpofY7M6g9XOpeONnegriCBVVIGFmMyzg?purpose=fullsize align="center")

* * *

# The `switch` Statement

When you have **multiple fixed values**, `switch` is cleaner than `if-else`.

* * *

## Syntax

```js
switch (expression) {
  case value1:
    // code
    break;

  case value2:
    // code
    break;

  default:
    // fallback
}
```

* * *

## Example (Day of Week)

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

* * *

## Important Concept: `break`

Without `break`, JavaScript will continue executing next cases.

### Example without break

```js
let day = 1;

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

### Output

```plaintext
Monday
Tuesday
```

Why?

Because **execution falls through**

* * *

## Switch Flow Diagram

![Image](https://images.openai.com/static-rsc-4/lyGy0sFTV2oWlvR7Howee3oFa36lw0z93EU9NPe-mGAV64KDH3bK9nU1stVxIACdwwVHsazVVGr2ZtW_uE8otYApKguuVkF1qJ5aWQ1hUZJCWm5jkxDul7aurevtagvF35zwFZofDnvoihweswR_-_zobSZ-RCKW5yIs0JjbC-7OPLCxbGhrk3x3svxReBSq?purpose=fullsize align="center")

![Image](https://images.openai.com/static-rsc-4/IAHxHTAOV9Zxaa2KDt7ziA5va-hQRbpeTHQ3-nnET3N37sRXpAqnraBcV3tG0A24KlgjB8R01JzsoxEkmzoolbShCECFpQDbc_vgHbODPS6e-FOR7ETaMiobyok8q55HJZkGpnKcLQz-3BnYl0IGzCu4ABnQXMeJntJKDyYkqNIeTuEDDXiiPiJ4WICr551c?purpose=fullsize align="center")

![Image](https://images.openai.com/static-rsc-4/8-Xi8nJl5SwR6bfZm4dn20A0hH9bYFCAi2xiZEtZjUq9nc4lOE90hQ9wPOS7TG2SerdLSrnIl5L3AQ-xLXVpzuo4NhLWj0tjrqKJBsFmg4zMgbIrvSXNjR5hbCR6pdcD6InkymryIKvvqzgqP2fT3Gv7b3lrvRGG-QZc7F-vcmZeN9Yw1OEc-hz7uWEN4GCb?purpose=fullsize align="center")

![Image](https://images.openai.com/static-rsc-4/BS5S7ISL2ctQE4FExn4EofpnSQpb6-LTbInnuw5HrvKkqSkbkvtsSWvVdpKCEReRcoSMBdzafxX6i2SSyKemO9JHS8T38oda7IhY3pcM3-33v5ugoGDEwWGT_kpTVaRez-Ug0JvwNd-cuVoW9b962xLZKUZBz1_XVh0FBByaixMZkqQn-1cI2mNI6iW2dSMI?purpose=fullsize align="center")

![Image](https://images.openai.com/static-rsc-4/cm-osdOfp3nQpckBfYIxdUJQYy6OWvuomfDZVZHrYfnxtUBltLbkb5L-u-IJUvZmtu0yntizdqlWG7jqbAu8qUStOgYMLpVrrFGY1qDzNCkfPYvX0ZYapfsYM841FXDcccueyRrNssPVsqz2o6onep9dI6GNRhucU76LZkhgGnmfd-81sVP1nf5UaeS1UD8y?purpose=fullsize align="center")

![Image](https://images.openai.com/static-rsc-4/q8fkJUD_374M7rKGTOSGqrod5UQkkk461PdApWu7cQS0D6qdX3pWrn2kAH4kPGT8o3rCbY6EUCBb7nHiL_2Iwd4bWo6Kq0AHl2EB1FEriXUVMAFFqHf8FXRUtSF9-0tJCVcXYI1CR-P34aOTOmWuTAPz5kqPPeXS7VzaVHdn4Sr1wIMpLmS8wg6N0Twvgb1Z?purpose=fullsize align="center")

* * *

# If-Else vs Switch (Real Decision Thinking)

## Use `if-else` when:

*   Conditions are **ranges**
    
*   Conditions involve **logic**
    
*   Example:
    

```js
if (marks > 90)
```

* * *

## Use `switch` when:

*   Comparing **fixed values**
    
*   Cleaner for many options
    
*   Example:
    

```js
switch(day)
```

* * *

## Quick Comparison

| Feature | if-else | switch |
| --- | --- | --- |
| Best for | Conditions & logic | Fixed values |
| Flexibility | High | Limited |
| Readability | Medium | High (for many cases) |

* * *

# Common Mistakes Beginners Make

### 1\. Forgetting `break` in switch

Leads to unexpected outputs

### 2\. Writing too many nested ifs

Avoid this early — keep it simple

### 3\. Using switch for ranges

Bad idea:

```js
case marks > 90:
```

Switch does **strict comparison**, not logic evaluation

* * *

# Assignment (Must Practice)

## 1\. Number Type Checker

```js
let num = -5;

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

### Why `if-else`?

Because we are checking **conditions (>, <)** — not fixed values.

* * *

## 2\. Day of Week using Switch

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

### Why `switch`?

Because values are **fixed numbers (1–7)**.

* * *

# Real Insight (Important)

Control flow is not just syntax.

It’s about:

*   Writing **predictable code**
    
*   Avoiding **bugs in logic**
    
*   Thinking like a **system designer**
    

A strong developer doesn’t just write:

```js
if (x)
```

They think:

*   What are all possible paths?
    
*   What happens in each case?
    
*   Is any case missing?
    

* * *

# Final Mental Model

Think of control flow as:

> A decision tree that your program follows step by step

If your decisions are clean → your code is clean If your decisions are messy → your bugs increase

* * *