What is if-else-if Statement in JavaScript

What is an if-else if Statement in JavaScript?

An if-else if statement in JavaScript allows you to evaluate multiple conditions in sequence. It enables the program to execute different blocks of code depending on which condition is true.

• If the first condition is true, its block executes, and the rest are ignored.
• If the first condition is false, the next condition is checked.
• If none of the conditions are true, the else block (if provided) will run.

Syntax of if-else if Statement

if (condition1) {
    // Code runs if condition1 is true
} else if (condition2) {
    // Code runs if condition2 is true
} else if (condition3) {
    // Code runs if condition3 is true
} else {
    // Code runs if none of the above conditions are true
}

How to Use an if-else if Statement

1. Start with if – The first condition is checked.
2. Add else if – Additional conditions are checked if the previous ones are false.
3. Optional else – A final block runs if no conditions are met.

Example:

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 {
    console.log("Grade: D");
}

Output:

Grade: C

• If score is 85, the output is "Grade: B".
• If score is 95, the output is "Grade: A".

Why Use if-else if Statements?

• Multiple Condition Checks – When more than two possible outcomes exist.
• Hierarchical Decisions – To prioritize conditions in a specific order.
• Validation and Control – Apply different actions depending on the user's input or data.
• Grading Systems, Pricing, or Permissions – Ideal for systems that require different outputs for different ranges.

When to Use if-else if Statements?

• Complex Logic – When handling more than two possible scenarios.
• Range Checks – Grading systems, pricing tiers, or age verifications.
• Form Validation – Check if fields meet multiple conditions (e.g., length, format).
• Role-Based Access – Provide different access levels for different users.

Real-World Example: Age-Based Ticket Pricing

let age = 14;

if (age < 5) {
    console.log("Free entry.");
} else if (age >= 5 && age < 13) {
    console.log("Child ticket.");
} else if (age >= 13 && age < 60) {
    console.log("Adult ticket.");
} else {
    console.log("Senior ticket.");
}

Output:

Child ticket.

Example: Light Control Based on Time

let hour = 18;

if (hour < 12) {
    console.log("Good morning!");
} else if (hour < 18) {
    console.log("Good afternoon!");
} else {
    console.log("Good evening!");
}

Output:

Good evening!

Benefits of if-else if Statements

• Readable – Clear structure that improves code readability.
• Efficient – Once a condition is met, no further conditions are checked.
• Flexible – Allows for an unlimited number of conditions.
• Organized Logic – Helps break down complex decision-making into simpler steps.

Common Mistakes to Avoid

1. Skipping else if – Without else if, multiple if statements could lead to unnecessary checks.

let temperature = 30;

if (temperature > 35) {
    console.log("It's very hot.");
}
if (temperature > 20) {
    console.log("It's warm.");
}

Fix: Use else if to avoid running multiple blocks.

if (temperature > 35) {
    console.log("It's very hot.");
} else if (temperature > 20) {
    console.log("It's warm.");
}

2. Condition Overlap – Make sure conditions don't overlap, or the first true condition will execute.

let number = 50;

if (number > 40) {
    console.log("Above 40");
} else if (number > 30) {
    console.log("Above 30");
}

Even though number is 50, the output will be "Above 40" because the second condition won’t run.

Nested if-else if Statements

You can nest if-else if statements inside each other to handle more specific cases.

let loggedIn = true;
let isAdmin = false;

if (loggedIn) {
    if (isAdmin) {
        console.log("Welcome, Admin!");
    } else {
        console.log("Welcome, Beginners!");
    }
} else {
    console.log("Please log in.");
}

Output:

Welcome, Beginners!

Ternary Alternative (Simple if-else if)

For simpler cases, a ternary operator can replace if-else if statements.

let marks = 68;
let grade = (marks >= 90) ? "A" : (marks >= 75) ? "B" : (marks >= 60) ? "C" : "D";
console.log(grade);  // C

Best Practices for if-else if

1. Avoid Deep Nesting – Use switch statements or separate functions if the logic becomes too complex.
2. Order Matters – Place the most specific conditions first and general ones later.
3. Simplify with Functions – Extract repeated logic into functions to improve readability.

Key Takeaways

• if-else if allows multiple condition checks in sequence.
• It ensures only one block of code executes based on the first true condition.
• Ideal for handling graded, tiered, or hierarchical conditions.
• Use it when more than two outcomes are possible.