Control Flow in JavaScript: If, Else, and Switch Explained
Introduction
Imagine you are standing at a crossroad in Delhi. You need to decide which direction to go based on where you want to go. If you want to go to the Taj Mahal, you take one road. If you want to go to the Red Fort, you take another road. If you want to go somewhere else, you take a third road. This decision-making process is called control flow.
In programming, control flow means deciding which code should run based on certain conditions. In this blog, we will learn about the most important control flow tools in JavaScript: if, else, else if, and switch statements.
1. What Control Flow Means in Programming
Control flow is the order in which your code runs. By default, JavaScript reads and executes code from top to bottom, line by line. However, sometimes you want your code to make decisions and run different code based on different situations.
Why Do We Need Control Flow?
Think about a college admission system. The program needs to check:
Is the student's score above 80? If yes, admit them.
Is the student's score between 70 and 80? If yes, put them on the waiting list.
Is the student's score below 70? If yes, reject them.
Without control flow statements, you cannot make these decisions. Your code would just run the same way every time, which is not useful.
Real-Life Example
Let's imagine Rahul is checking the weather before going to college:
If it is raining, he takes an umbrella
If it is sunny, he applies sunscreen
If it is cold, he wears a jacket
This is control flow in real life. In JavaScript, we use statements like if, else, and switch to make these kinds of decisions.
2. The if Statement
The if statement is the simplest control flow tool. It runs a block of code only if a certain condition is true.
Syntax
if (condition) {
// Code runs only if condition is true
}
How It Works
The condition is checked. If it is true, the code inside the curly braces runs. If it is false, the code is skipped.
Simple Examples
Example 1: Checking Age
let age = 18;
if (age >= 18) {
console.log("You are eligible to vote");
}
Output: You are eligible to vote
In this example, the condition age >= 18 is true, so the message is printed.
Example 2: Checking Marks
let marks = 50;
if (marks >= 40) {
console.log("Congratulations! You passed the exam");
}
Output: Congratulations! You passed the exam
Example 3: When Condition Is False
let marks = 35;
if (marks >= 40) {
console.log("Congratulations! You passed the exam");
}
console.log("This line always runs");
Output:
This line always runs
Notice that the congratulations message did not print because the condition was false. However, the code after the if statement still ran.
Step-by-Step Execution
Let's trace through how the code runs:
let studentScore = 75;
if (studentScore > 70) {
console.log("Great performance!");
}
console.log("Thank you for taking the test");
Step 1: Variable studentScore is created with value 75
Step 2: Check the condition: Is 75 > 70? Yes, it is true
Step 3: Run the code inside the if block: Print "Great performance!"
Step 4: Move to the next line after the if block Step 5: Print "Thank you for taking the test"
Final Output:
Great performance!
Thank you for taking the test
3. The if-else Statement
The if-else statement lets you run one block of code if a condition is true, and a different block if the condition is false. It is like saying "Do this if true, otherwise do that".
Syntax
if (condition) {
// Code runs if condition is true
} else {
// Code runs if condition is false
}
How It Works
The program checks the condition. If true, it runs the first block. If false, it runs the second block. Only one of the two blocks will run, never both.
Simple Examples
Example 1: Checking if You Can Vote
let age = 16;
if (age >= 18) {
console.log("You can vote");
} else {
console.log("You are too young to vote");
}
Output: You are too young to vote
Since 16 is not greater than or equal to 18, the condition is false, and the else block runs.
Example 2: Checking if a Number Is Even or Odd
let number = 7;
if (number % 2 === 0) {
console.log("The number is even");
} else {
console.log("The number is odd");
}
Output: The number is odd
The remainder of 7 divided by 2 is 1 (not 0), so the condition is false, and we go to the else block.
Step-by-Step Execution
Let's trace through another example:
let temperature = 15;
if (temperature > 20) {
console.log("It is warm outside");
} else {
console.log("It is cold outside");
}
Step 1: Variable temperature is created with value 15
Step 2: Check the condition: Is 15 > 20? No, it is false
Step 3: Since the condition is false, skip the if block
Step 4: Run the else block: Print "It is cold outside"
Final Output:
It is cold outside
4. The else if Ladder
Sometimes you have more than two options. You want to check multiple conditions in order. The else if statement lets you do this. It is like saying "If this, do this. Else if that, do that. Else if something else, do something else. Otherwise, do this final thing".
Syntax
if (condition1) {
// Code runs if condition1 is true
} else if (condition2) {
// Code runs if condition1 is false and condition2 is true
} else if (condition3) {
// Code runs if condition1 and condition2 are false and condition3 is true
} else {
// Code runs if all conditions are false
}
How It Works
JavaScript checks conditions from top to bottom. As soon as it finds a condition that is true, it runs that block and stops checking the remaining conditions. If no conditions are true, the final else block runs.
Simple Examples
Example 1: Checking College Grades
let score = 75;
if (score >= 90) {
console.log("Grade: A");
} else if (score >= 80) {
console.log("Grade: B");
} else if (score >= 70) {
console.log("Grade: C");
} else if (score >= 60) {
console.log("Grade: D");
} else {
console.log("Grade: F (Fail)");
}
Output: Grade: C
The score 75 is:
Not >= 90, so skip the first block
Not >= 80, so skip the second block
Yes >= 70, so run this block and print "Grade: C"
Stop checking remaining conditions
Example 2: Checking Time of Day
let hour = 14; // 2 PM
if (hour < 12) {
console.log("Good morning!");
} else if (hour < 17) {
console.log("Good afternoon!");
} else if (hour < 21) {
console.log("Good evening!");
} else {
console.log("Good night!");
}
Output: Good afternoon!
The hour 14:
Is not < 12, skip first block
Is < 17, so run this block and print "Good afternoon!"
Step-by-Step Execution
Let's trace through the grade example again:
let marks = 65;
if (marks >= 80) {
console.log("First Division");
} else if (marks >= 60) {
console.log("Second Division");
} else if (marks >= 40) {
console.log("Third Division");
} else {
console.log("Fail");
}
Step 1: Variable marks is created with value 65
Step 2: Check condition 1: Is 65 >= 80? No, it is false
Step 3: Check condition 2: Is 65 >= 60? Yes, it is true
Step 4: Run the block for condition 2: Print "Second Division"
Step 5: Stop checking remaining conditions
Final Output:
Second Division
Important: Order Matters
The order of conditions matters in an else if ladder. Let's see what happens if we change the order:
let score = 85;
// Wrong order
if (score >= 60) {
console.log("You passed");
} else if (score >= 80) {
console.log("You got a great score");
}
Output: You passed
Even though the score is 85 (which is >= 80), we get "You passed" because the first condition (score >= 60) is already true, and JavaScript stops checking after that.
The correct order is from most specific to least specific:
let score = 85;
// Correct order
if (score >= 90) {
console.log("You got an excellent score");
} else if (score >= 80) {
console.log("You got a great score");
} else if (score >= 60) {
console.log("You passed");
} else {
console.log("You failed");
}
Output: You got a great score
Now it works correctly because we check the most specific condition first.
5. The switch Statement
A switch statement is useful when you have many different options and you want to check if a value matches one of several fixed values. It is cleaner than writing many else if statements.
Syntax
switch (expression) {
case value1:
// Code runs if expression equals value1
break;
case value2:
// Code runs if expression equals value2
break;
case value3:
// Code runs if expression equals value3
break;
default:
// Code runs if expression doesn't match any case
}
How It Works
JavaScript evaluates the expression once. Then it compares the value with each case. When it finds a matching case, it runs the code for that case. The break keyword stops the switch statement. If no cases match, the default block runs (if provided).
Important: The break Statement
The break statement is very important. It stops the switch from continuing to check other cases. If you forget break, JavaScript will run the code for the matching case AND all the cases after it until it finds a break. This is called "fall-through" and is usually not what you want.
Simple Examples
Example 1: Checking Days of the Week
let dayNumber = 3;
switch (dayNumber) {
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");
}
Output: Wednesday
The dayNumber is 3, so case 3 matches. We print "Wednesday" and then break stops the switch.
Example 2: Student Grade to Message
let grade = "B";
switch (grade) {
case "A":
console.log("Excellent performance!");
break;
case "B":
console.log("Good job!");
break;
case "C":
console.log("Average performance");
break;
case "D":
console.log("Poor performance");
break;
case "F":
console.log("You failed the exam");
break;
default:
console.log("Invalid grade");
}
Output: Good job!
Example 3: Checking Traffic Light Color
let lightColor = "yellow";
switch (lightColor) {
case "red":
console.log("Stop!");
break;
case "yellow":
console.log("Get ready!");
break;
case "green":
console.log("Go!");
break;
default:
console.log("Invalid color");
}
Output: Get ready!
What Happens Without break
Let's see what happens if we forget the break statement:
let dayNumber = 2;
switch (dayNumber) {
case 1:
console.log("Monday");
case 2:
console.log("Tuesday");
case 3:
console.log("Wednesday");
case 4:
console.log("Thursday");
default:
console.log("Invalid day");
}
Output:
Tuesday
Wednesday
Thursday
Invalid day
Without break, after finding case 2 and printing "Tuesday", the code continues to run case 3, case 4, and the default block. This is usually not what we want. Always remember to add break after each case.
Step-by-Step Execution
Let's trace through a switch example:
let fruit = "mango";
switch (fruit) {
case "apple":
console.log("Red fruit");
break;
case "mango":
console.log("King of fruits");
break;
case "banana":
console.log("Yellow fruit");
break;
default:
console.log("Unknown fruit");
}
Step 1: Variable fruit is created with value "mango"
Step 2: Enter the switch statement with expression "mango"
Step 3: Check case "apple": Does "mango" === "apple"? No
Step 4: Check case "mango": Does "mango" === "mango"? Yes
Step 5: Run the code for case "mango": Print "King of fruits"
Step 6: Encounter break: Exit the switch
Step 7: Continue with the rest of the program
Final Output:
King of fruits
6. When to Use switch vs if-else
Both switch and else if can solve many of the same problems. How do you decide which one to use?
Use if-else When
You have conditions that involve ranges or comparisons
Your conditions are complex
You have only a few conditions to check
Use switch When
You are checking if a value matches one of several fixed values
You have many different cases
Your values are simple (strings, numbers)
Your code looks cleaner with switch
Practical Examples with Explanation
Example 1: Number Classification (Using if-else)
Let's write a program that checks if a number is positive, negative, or zero:
let number = 15;
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");
}
Output: The number is positive
Why if-else? We are checking ranges and comparisons (greater than, less than), not fixed values.
Let's try with different numbers:
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");
}
Output: The number is negative
let number = 0;
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");
}
Output: The number is zero
Example 2: Day of the Week (Using switch)
Let's write a program that prints the day of the week based on a number:
let dayNumber = 1;
switch (dayNumber) {
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");
}
Output: Monday
Why switch? We are checking if the number matches one of several fixed values (1, 2, 3, 4, 5, 6, or 7).
Visual Flowchart: if-else Decision Making
Code
Start
|
v
Check Condition 1
/ \
True False
/ \
v v
Run Block 1 Check Condition 2
| / \
| True False
| / \
| v v
| Run Block 2 Run Block 3
| | |
| | |
+-------+----------->+
|
v
End
Visual Flowchart: switch-case Branching
Code
Start
|
v
Evaluate Expression
|
______________|______________
| | | | |
v v v v v
Case Case Case Case Default
1 2 3 4
| | | | |
v v v v v
Block Block Block Block Block
1 2 3 4 D
| | | | |
break break break break
| | | | |
+-------+-------+-------+------+
|
v
End
Summary
Control flow means making your code run different blocks based on conditions
if statement runs code only if a condition is true
if-else statement runs one block if true, another block if false
else if ladder checks multiple conditions in order until one is true
switch statement checks if a value matches one of several fixed values
break is essential in switch statements to stop after a matching case
Use if-else for ranges and complex conditions
Use switch for checking fixed values
