Skip to main content

Command Palette

Search for a command to run...

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

Updated
4 min read

Programming is not just about writing instructions — it’s about making decisions.

In real life, we constantly evaluate conditions:

  • If it is raining, take an umbrella.

  • If the traffic is heavy, leave early.

  • If marks are above 90, grade is A.

Programs behave the same way. They must choose different paths depending on conditions.

This concept is called control flow.

What is Control Flow?

Control flow determines the order in which code executes.

Without control flow, a program would simply run line by line with no decision making.

Example:

console.log("Program started");
console.log("Checking condition...");
console.log("Program ended");

This runs sequentially.

But real programs require decisions like:

  • Login success or failure

  • User age verification

  • Payment success or failure

  • Feature access control

JavaScript provides multiple structures to control this flow.

The most common ones are:

  • if

  • if...else

  • else if

  • switch

The if Statement

The if statement executes code only when a condition is true.

Syntax

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

Example

let age = 20;

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

How it works

  1. JavaScript evaluates the condition.

  2. If the condition is true, the block executes.

  3. If it is false, the block is skipped.

Decision Flow Diagram

The program checks a condition and decides whether to execute the block or skip it.

The if...else Statement

Sometimes we want two possible outcomes.

Example:

  • If age ≥ 18 → allow voting

  • Otherwise → deny access

This is where if...else is used.

Syntax

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

Example

let age = 16;

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

Execution

JavaScript will run only one block.

The else if Ladder

What if there are multiple conditions?

Example:

Grading system:

  • 90+ → Grade A

  • 75+ → Grade B

  • 50+ → Grade C

  • Below 50 → Fail

Syntax

if (condition1) {

} else if (condition2) {

} else if (condition3) {

} else {

}

Example

let marks = 82;

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

Important Behavior

JavaScript checks conditions from top to bottom.

Once a condition becomes true, the remaining conditions are skipped.

The switch Statement

When we need to compare one value against many possible values, switch can be cleaner than many if...else statements.

Syntax

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

  case value2:
    // code
    break;

  default:
    // fallback
}

Switch Case Flow Diagram

Instead of checking conditions repeatedly, the program jumps directly to the matching case.

Example: Day of the 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");
}

Why break is important

Without break, JavaScript continues executing the next cases.

Example:

case 1:
  console.log("Monday");

case 2:
  console.log("Tuesday");

If day = 1, output becomes:

Monday
Tuesday

This behavior is called fall-through.

When to Use switch vs if...else

Use if...else when

  • Conditions involve ranges

  • Logical operators are used (&&, ||)

  • Comparisons are complex

Example:

if (age >= 18 && age < 60)

Use switch when

  • Comparing one variable

  • Checking multiple exact values

  • Code readability matters

Example:

switch(day)

Assignment Programs

Program 1: Check Positive, Negative, or Zero

Here we use if...else if because the conditions involve numeric comparison.

let num = -5;

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

Why if...else?

Because the program must check numeric conditions (>, <, ===).

Program 2: Print Day of Week

Here we use switch because the program compares one variable against many values.

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;

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

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

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