# Control Flow in JavaScript

Imagine your in the world of Westeros, a single decision can mean the difference between sitting on the Iron Throne or meeting the Executioner’s axe.

In programming, we call these rules **Control Flow**. It is the Hand of the King that directs which path your code takes. Without it, your script is as mindless as a White Walkers.

## What is Control Flow?

By default, JavaScript reads code like a Maester reads a scroll from top to bottom, line by line. **Control Flow** is the magic that allows us to skip lines, jump to different sections, or repeat actions based on conditions. It is the logic of ***If*** *the ravens bring word of war,* ***then*** *call the banners.*

## `if`

The `if` statement is a simple loyalty check. If a condition is **true**, the code inside the gates of the curly braces `{}` and executes. If it is **false**, the Maester simply moves to the next scroll.

**Example: The Wall Defense**

```javascript
let isWhiteWalkerDetected = true;

if (isWhiteWalkerDetected) {
  console.log("Sound the horn three times!");
}
```

## `if...else`

In the Seven Kingdoms, you are often faced with a binary choice you win or you die. The `else` block handles the otherwise scenario.

**Example: Trial by Combat**

```javascript
let championHealth = 0;

if (championHealth > 0) {
  console.log("The Gods have spoken. You are innocent!");
} else {
  console.log("Fetch the headsman. The trial is over.");
}
```

## `else if` Ladder

Sometimes, the choice isn't just Yes or No. There are many houses in Westeros, and each requires a different response. We use an `else if` ladder to check multiple conditions in order.

**Example: Identifying the Great Houses**

```javascript
let houseSigil = "Direwolf";

if (houseSigil === "Lion") {
  console.log("Hear Me Roar! Lannister");
} else if (houseSigil === "Direwolf") {
  console.log("Winter is Coming. Stark");
} else if (houseSigil === "Dragon") {
  console.log("Fire and Blood. Targaryen");
} else {
  console.log("An unknown traveler from the Free Cities.");
}
```

## `switch case`

When you have many specific values to check like the seven different kingdoms an `else if` ladder gets as messy as a Red Wedding. The `switch` statement is a cleaner way to handle multiple cases.

The Anatomy

*   `case`: The specific value you are looking for.
    
*   `break`: The most important command. It prevents falling through to the next case. Without it, you might accidentally execute the code for House Stark *and* House Lannister!
    
*   `default`: The Final Else. If no case matches, this code runs.
    

**Choosing a Kingsguard**

```javascript
let knightName = "Brienne";

switch (knightName) {
  case "Jamie":
    console.log("The Kingslayer joins the guard.");
    break;
  case "Brienne":
    console.log("The Maid of Tarth stands watch.");
    break;
  case "The Hound":
    console.log("A fierce warrior, but no knight.");
    break;
  default:
    console.log("The position remains open.");
}
```

## Comparison: Switch vs. If-Else

<table style="min-width: 75px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1"><p><strong>Feature</strong></p></td><td colspan="1" rowspan="1"><p><strong>if...else</strong></p></td><td colspan="1" rowspan="1"><p><strong>switch case</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Logic</strong></p></td><td colspan="1" rowspan="1"><p>Can handle ranges (<code>age &gt; 18</code>) and complex logic (<code>A &amp;&amp; B</code>).</p></td><td colspan="1" rowspan="1"><p>Only handles specific values (<code>case 5</code>).</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Readability</strong></p></td><td colspan="1" rowspan="1"><p>Best for 1-4 conditions.</p></td><td colspan="1" rowspan="1"><p>Best for 5+ specific options.</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Speed</strong></p></td><td colspan="1" rowspan="1"><p>Checks every condition until one is true.</p></td><td colspan="1" rowspan="1"><p>Can be slightly faster for many cases in some engines.</p></td></tr></tbody></table>

## Learn with Chai and Code

### Problem statement - 1

Write a program that takes a variable `dragonSize`.

*   If `dragonSize` is greater than 50, print: "Balerion!"
    
*   If it is between 10 and 50, print: "formidable"
    
*   If it is less than 10 (but positive), print: "hatchling"
    
*   Otherwise, print: "The dragons are myth."
    

```javascript
let dragonSize = 35;

if (dragonSize > 50) {
  console.log("Balerion!");
} else if (dragonSize >= 10 && dragonSize <= 50) {
  console.log("formidable");
} else if (dragonSize > 0 && dragonSize < 10) {
  console.log("hatchling");
} else {
  console.log("The dragons are myth.");
}
```

### How will it run ?

JS starts at the very first `if` and moves down. It cannot skip a gate to check a later one. It must check them in order: 1 -> 2 -> 3 -> Else.

As soon as JS finds a Truthy value goes inside and run the code. It never looks at the other `else if` or `else` blocks once it finds a match.

### Problem statement - 2

Write a program that takes a variable `kingdomCode` (a number from 1 to 7) and prints the name of the corresponding Kingdom.

```javascript
let kingdomCode = 2;

switch (kingdomCode) {
  case 1:
    console.log("The North");
    break;
  case 2:
    console.log("The Vale"); // JS JUMPS DIRECTLY HERE
    break;
  case 3:
    console.log("The Riverlands");
    break;
  default:
    console.log("Beyond the Wall");
}
```

Unlike the `if-else` ladder, JS doesn't have to walk past every door to see if it's the right one. It looks at the value (the `2`) and teleports directly to the door labeled `case 2`. It skips the logic of checking `case 1` entirely.

In a `switch`, once JS enters a door, it will keep walking into the *next* door's room unless it hits a `break`. The `break` is like an Exit Sign.

It tells JS that You've found what you needed, now leave the building.

> "A ruler who hides behind paid executioners soon forgets what death is. A programmer who hides behind messy logic soon forgets what their code does."
> 
> \-- RSS

### **Let's Connect! 🚀**

I’m currently deep-diving into the **JavaScript**, building projects and exploring the internals of the web. If you're on a similar journey or just love talking about JavaScript, let’s stay in touch!

*   **Connect on LinkedIn:** [**Satpalsinh's Profile**](https://www.linkedin.com/in/satpalsinhrana)
    
*   **Follow my Blog:** [**blogs.satpal.cloud**](http://blogs.satpal.cloud)
    

**Keep coding and keep building.**