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

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

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

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

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

Feature	if...else	switch case
Logic	Can handle ranges (age > 18) and complex logic (A && B).	Only handles specific values (case 5).
Readability	Best for 1-4 conditions.	Best for 5+ specific options.
Speed	Checks every condition until one is true.	Can be slightly faster for many cases in some engines.

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."

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.

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

• Follow my Blog: blogs.satpal.cloud

Keep coding and keep building.