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

When we code, running the same instructions repeatedly isn't what we're after. Instead, we want our programs to actually think, make decisions, and take different routes depending on specific situations. That's where control flow really comes into play.

What’s Control Flow in Programming?

Control flow is all about:

The sequence in which the statements of a program get executed.

In JavaScript, for instance, the code runs from the top down, line by line by default. But real-world applications often require making choices, such as:

• If the user’s an adult, let them sign up.

• If the scores are high, they pass the exam.

• If today’s Sunday, show a holiday message.

That’s where control flow statements come into play.

Imagine this scenario:

If it’s raining → grab an umbrella.

Otherwise → head out without one.

You evaluate a condition, then choose an action. It’s pretty much how control flow in programming operates.

The if Statement

The if statement runs a block of code only when a condition is true.

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

For Example:-

let age = 20;

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

Output:- You are eligible to vote

Step-by-Step Execution

1. JavaScript checks if age is 18 or older.

2. So, it evaluates 20 >= 18, which is true.

3. This means the code inside the {} gets executed.

4. Finally, it prints the output.

If the condition isn’t met, JavaScript will just skip that block entirely.

The if-else Statement

Sometimes we need to take one action if something is true and a different one if it's false.

if (condition) {
  // runs if true
} else {
  // runs if false
}

For Example:-

let marks = 35;

if (marks >= 40) {
  console.log("Pass");
} else {
  console.log("Fail");
}

Output:- Fail

How It Works

1. The condition is evaluated a single time.

2. Only one block will execute.

3. The two blocks can never run at the same time.

The else if Ladder

Go with else if when you're dealing with more than one condition.

if (condition1) {
  // block 1
} else if (condition2) {
  // block 2
} else {
  // default block
}

For Example:-

let score = 82;

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

Output:- Grade A

• Conditions are evaluated from top to bottom

• The first condition that evaluates to true takes precedence

• Any conditions that follow are not considered

• Using else is optional, but it's a good idea to have it as a safety net.

Order is crucial

If you don’t get the order right, you might run into logic issues.

Avoiding Too Much Nesting

Harder Way:-

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

Better Way:-

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

The switch Statement

switch comes in handy when you want to compare a single value against several set options.

switch (expression) {
  case value1:
    // code
    break;
  case value2:
    // code
    break;
  default:
    // fallback code
}

For Example - Lets compare days of week

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

Output :- Wednesday

Importance of break

If you don't use break, JavaScript will continue running the next cases.

Without break code behave like this:-

let num = 1;

switch (num) {
  case 1:
    console.log("One");
  case 2:
    console.log("Two");
}

Output:-

One
Two

-> This is known as fall-through behavior. Use break to stop the execution once a match is found.

When to Use switch vs if-else

Go for if-else when:

• You’re dealing with ranges like (>, <, >=)

• The logic gets a bit complicated

• You need to work with boolean expressions

Use switch when:

• You're checking one variable

• Comparing it to specific values

It just makes your code look neater than a bunch of else if statements.

How JavaScript Thinks

• Conditions in programming are either true or false.

• In control flow, just one path is executed at a time.

• JavaScript doesn’t make assumptions; it sticks to the rules.