Skip to main content

Command Palette

Search for a command to run...

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

Because Code Shouldn’t Just Run… It Should Decide.

Updated
8 min read
Control Flow in JavaScript: If, Else, and Switch Explained
N

I build clean and simple web experiences and learn something new every day.

Imagine writing a program that just runs every single line without thinking, no decision, no condition, no alternate paths.

That wouldn't be very useful, right?
Because real life doesn't work in a straight line.

If it's raining, you take an umbrella.
If it's sunny, you wear sunglasses.
If it's cold, you grab a jacket.

Every action depends on a condition, Programming needs that same ability.

You code should be able to say:

If this happen do this, otherwise do something else

That ability to choose what runs & what doesn't is called control flow.

Control flow decides the direction your program takes

Without it your code just executes blindely from top to bottom, but with it your program starts making decisions just like we do every day.


The if Statement

Imagine I tell JavaScript:

Hey JS, if someone is 18 or older allow them to vote

Here's how we write this in code:

let age = 20;

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

Now pause & think how JS reads this.

Step 1: It checks the condition inside parentheses age >= 18
Step 2: That comparison returns either true or false
Step 3: If it's true, the code inside {} runs
Step 4: If it's false, JS simply skips it

That's it...

if basically means:

Run this block only if the condition is true


But Life Has Two Outcomes… So We Add else

Now imagine age is 16. So, should nothing happen?
No, we want to say something else. That’s where else comes in.

let age = 16;

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

Now here JavaScript has two paths:

If condition is true, run first block
If condition is false, run else block

One of them will always run. JS checks the condition and chooses one track.


What If There Are More Than Two Possibilities?

Real life isn’t always black and white.

Let's say we’re checking marks:

let marks = 75;

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

Now this is called else-if ladder.

Let's see how JavaScript thinks here:

  • Is marks >= 90? No.

  • Is marks ≥ 70? Yes.

  • Okay stop. Run this block.

  • Don’t check anything else.

Here one important thing to understand is:

Once one condition becomes true, JavaScript stops checking the rest

It doesn't keep testing. That's why order matters here.


Now Let’s Talk About switch

Sometimes you’re not checking ranges. You’re checking exact values.

Example: day of the week.

You could write it like:

if day is 1, Monday
if day is 2, Tuesday
if day is 3, Wednesday

But that becomes repetitive. So JavaScript gives us switch.

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

Now let's slow down & understand it, JavaScript looks at day
Then it checks:

Does day match case 1? No
Does it match case 2? No
Does it match case 3? Yes

So it runs the block, and then we see break.


Why Is break So Important?

If we remove break, something interesting happens. JavaScript will continue running the next cases even if they don’t match. That’s called fall-through.

So break basically tells JS:

Stop here, Exit the switch

Always remember that.


When Should You Use if-else and When Should You Use switch?

Now this is a very common confusion

You might be thinking both are used for decision maiking so how I know which one to choose?
Let's clear that up calmly.


Use if-else When the Logic Is Flexible

If you’re checking ranges, if-else is your best friend.

For example:

  • Is age greater than or equal to 18?

  • Are marks above 70?

  • Is temperature below 10?

  • Is salary between 30k and 50k?

These are not exact values. These are comparisons.

if (marks >= 70) {
  console.log("Grade B");
}

Here, we’re not checking if marks is exactly 70. We’re checking a condition based on comparison. switch cannot handle this kind of range logic cleanly.

Also, when condition become slightly complex like this:

if (age >= 18 && hasID === true)

Now we're combining logic that's where if-else shines.

So think of it like if your decision depends on comparisions, ranges, or multiple logical checks use if-else It's more flexible, it can handle anything.


Use switch When You’re Matching Exact Values

Now imagine you're building a menu system.

User enters:

1 - Home
2 - About
3 - Contact

Here, you're not checking ranges, you're checking exact matches. That's where switch is cleaner

switch (choice) {
  case 1:
    console.log("Home");
    break;
  case 2:
    console.log("About");
    break;
}

This code looks organized and easy to read. If you tried writing this with multiple if-else statement, it would work but it wouldn't look as structured.

Switch works best when:

  • You are comparing one variable

  • Against multiple fixed values

  • And those values are exact matches

No greater than, no less than, just equality.


So in Simple Words

If your logic is dynamic and comparison-based, go with if-else.
If your logic is clean, fixed, and value-based, go with switch.

if-else is like a flexible thinker, switch is like an organized checklist. Both are powerful.
You just choose based on the situation.


Assignment 1: Check if a Number is Positive, Negative, or Zero

First, ask yourself:

Are we checking exact values?
Or are we checking conditions based on comparison?

We're comparing:

  • If number > 0 => Positive

  • If number < 0 => Negative

  • Otherwise => Zero

This is clearly range-based logic.

So which control structure fits best?
if-else

Because we are using comparison operators (>, <).

let number = -5;

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

Let’s Understand How This Runs

Imagine number = -5.

Step 1: Check: number > 0
Is -5 greater than 0? No. So skip.

Step 2: Check: number < 0
Is -5 less than 0? Yes.

Boom: This block runs. Everything after that is ignored.


Why if-else Here?

Because:

  • We’re checking conditions.

  • We’re comparing values.

  • It’s not about matching one exact value.

  • The logic depends on greater than / less than.

Switch cannot cleanly handle this type of comparison. So if-else is the correct choice.


Assignment 2: Print Day of the Week Using switch

Now think carefully. Here we are not checking ranges.

We are matching:

1 =>Monday
2 => Tuesday
3 => Wednesday.....

This is exact value matching, perfect case for switch.

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;

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

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

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

Let's Understand How This Runs

Let's say day = 3

Switch checks:

  • Is it 1? No.

  • Is it 2? No.

  • Is it 3? YES.

It runs that block. Now very important, the break stops execution. If we remove break, it will continue running the next cases too. That’s called fall-through, and beginners usually get confused here. So always use break unless you intentionally want fall-through.


Why switch Here?

Because:

  • We are matching one variable (day)

  • Against fixed, exact values

  • Structure looks clean and readable

  • No comparisons like > or <

If we wrote this using if-else, it would look longer and less organized.


Final Understanding

Control flow is what makes your program feel alive. Without it, your code just follows instructions blindly top to bottom, no questions asked. But once control flow enters the picture…
Your program starts making decisions. It can choose a path, ignore unnecessary blocks, react differently based on situations, kadapt instead of just execute.

Comparison operators simply give us answers true or false.
But control flow?
Control flow decides what to do with that answer. And that shift from just running code
to making decisions.


More from this blog

C

codeXninjaDev

54 posts

I build clean and simple web experiences and learn something new every day.