Conditional Statements: if, else if, else0%
Switch Statements

Conditional Statements: if, else if, else

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Conditional Statements: if, else if, else

Programs must make decisions based on real-world inputs: whether a user is logged in, whether an item is in stock, or whether a payment succeeded. Conditional statements (if, else if, else) control the execution flow of your code based on boolean conditions.

1. Syntax of Conditional Blocks

JavaScript
if (condition1) {
// Executes if condition1 is truthy
} else if (condition2) {
// Executes if condition1 was falsy AND condition2 is truthy
} else {
// Executes if ALL preceding conditions were falsy
}

Real-World Example: Grading System

JavaScript
function evaluateStudentMarks(marks) {
if (marks >= 90) {
return "Grade A+ (Distinction)";
} else if (marks >= 75) {
return "Grade A (First Class)";
} else if (marks >= 50) {
return "Grade B (Second Class)";
} else if (marks >= 35) {
return "Grade C (Pass)";
} else {
return "Fail (Needs Improvement)";
}
}
 
console.log(evaluateStudentMarks(82)); // "Grade A (First Class)"

2. Execution Mechanics: Order Matters!

JavaScript evaluates else if conditions sequentially from top to bottom:

  • As soon as one condition evaluates to true, JavaScript executes that block and skips all remaining else if and else blocks completely!

❌ Common Trap: Incorrect Condition Order

JavaScript
// BUGGY: 95 will match >= 50 first and return Grade B!
if (marks >= 50) {
return "Grade B";
} else if (marks >= 90) {
return "Grade A"; // Unreachable for 90+!
}

3. Nested if Statements vs. Logical Operators

You can nest if statements inside one another, but combining conditions with && or || creates cleaner code:

Nested (Cluttered):

JavaScript
if (user.isLoggedIn) {
if (user.role === "admin") {
showAdminDashboard();
}
}

Flattened with && (Clean):

JavaScript
if (user.isLoggedIn && user.role === "admin") {
showAdminDashboard();
}

4. The Guard Clause Pattern (Early Return)

In professional codebases, avoid deeply indented "pyramid of doom" conditionals. Use Guard Clauses to check for invalid conditions and return early:

JavaScript
// Professional Guard Clause Pattern:
function processPayment(cart, user) {
if (!user.isLoggedIn) {
return { success: false, error: "Please log in to continue" };
}
 
if (cart.items.length === 0) {
return { success: false, error: "Cart is empty" };
}
 
if (user.balance < cart.total) {
return { success: false, error: "Insufficient funds" };
}
 
// Happy path code stays un-nested at the bottom!
return completeTransaction(cart, user);
}
Interactive Quiz

Practice Quiz

Question 1
What happens when an if condition evaluates to false and there is an else block?
Question 2
What happens if two different else if conditions are both mathematically true in the same chain?
Question 3
What is the "Guard Clause" pattern in clean coding?
Question 4
Which logical operator should be used if you want a block to execute only when BOTH user.isActive AND user.hasSubscription are true?
Question 5
Can an if statement exist without an else block?
Next Lesson

Switch Statements

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Assignment & Ternary OperatorSwitch Statements

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext