Control Flow in JavaScript: If, Else, and Switch Explained
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:
ifif...elseelse ifswitch
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
JavaScript evaluates the condition.
If the condition is
true, the block executes.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");
}