What is if, if-else, if-else-if Statements in JavaScript

(1)What is if Statement in JavaScript?

An if statement in JavaScript is a fundamental control structure that allows code to execute only if a specified condition evaluates to true. If the condition evaluates to false, the code inside the if block is not executed.

Syntax of if Statement

if (condition) {
    // Code that runs when the condition is true.
}

How to Use an if Statement

1. Define a Condition – The condition inside the parentheses (()) is evaluated.
2. Execute Code – If the condition is true, the code block within the curly braces ({}) runs.
3. Skip if False – If the condition is false, the code block is bypassed.

Example:

let age = 20;

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

Output:

You are eligible to vote.

If age were less than 18, nothing would appear because the condition would not be satisfied.

Why Use if Statements?

1. Decision Making – if statements allow programs to make decisions based on user input, data, or other variables.
2. Control Flow – They help direct the flow of the program by executing certain parts of the code selectively.
3. Validation – Useful for form validation, error checks, and ensuring specific conditions are met.
4. Dynamic Behavior – if statements enable responsive, interactive websites and applications by reacting to different scenarios.

When to Use if Statements?

• Conditional Execution – When a task should only run under specific circumstances.
• User Input – Check if a form is filled correctly or if a user is authorized.
• Calculations – Perform operations based on variable values.
• Form Validation – Verify data before submission.
• Error Handling – Prevent errors by running checks before executing certain logic.

Real-World Example:

Checking Even or Odd Numbers

let number = 7;

if (number % 2 === 0) {
    console.log(number + " is even.");
}

Since 7 is not divisible by 2, nothing will print.

Example with else for Full Control

let number = 7;

if (number % 2 === 0) {
    console.log(number + " is even.");
} else {
    console.log(number + " is odd.");
}

Output:

7 is odd.

Nested if Statements

if statements can be nested to check multiple conditions.

let isLoggedIn = true;
let isAdmin = false;

if (isLoggedIn) {
    if (isAdmin) {
        console.log("Welcome, Admin.");
    } else {
        console.log("Welcome, User.");
    }
}

Output:

Welcome, User.

Advantages of if Statements

• Simple and Easy to Implement – Basic conditional checks are easy to write.
• Readable – Clear and intuitive to understand for beginners.
• Flexible – Can handle a wide range of conditions and scenarios.

Common Mistakes to Avoid

1. Omitting Braces – Always use {} even for single-line statements to avoid errors.

if (x > 10) 
    console.log("Greater");  // Works but can lead to bugs

2. Assignment Instead of Comparison

if (x = 10)  // Incorrect: assigns 10 to x instead of comparing

Fix:

if (x === 10)  // Correct: compares x to 10

3. Complex Conditions – Simplify with logical operators (&&, ||).

if (age > 18 && country === "US") {
    console.log("Eligible to vote.");
}

Key Takeaways

• The if statement executes code conditionally based on whether a condition is true.
• It’s a core part of creating dynamic, interactive websites and applications.
• Use if statements to validate, filter, and manage data dynamically.

(2)What is if-else Statement in JavaScript?

An if-else statement in JavaScript is a control structure that allows the program to execute one block of code if a condition is true, and a different block if the condition is false. This provides a way to handle two possible outcomes based on a condition.

Syntax of if-else Statement

if (condition) {
    // Code to execute if the condition is true
} else {
    // Code to execute if the condition is false
}

How to Use an if-else Statement

1. Condition Evaluation – The condition inside the if parentheses is checked.
2. True Block –  If the condition evaluates to true, the code inside the if block runs.
3. False Block – If the condition is false, the code within the else block will execute.

Example:

let temperature = 25;

if (temperature > 20) {
    console.log("It's warm outside.");
} else {
    console.log("It's cold outside.");
}

Output:

It's warm outside.

If the temperature were 15, the output would be:

It's cold outside.

Why Use if-else Statements?

• Two-Path Decisions – When you need to execute different code based on a condition.
• User Interaction – Tailor responses according to user input.
• Validation – Handle form input or data validation by providing alternative logic.
• Error Handling – Manage errors or provide fallback options when conditions are not met.

When to Use if-else Statements?

• Binary Decisions – For situations with two possible outcomes (e.g., success or failure).
• Validation Checks – When verifying if a user meets a requirement or not.
• Simple Alternatives – To choose between two options based on variable values.
• Form Submission – Check if a form is filled correctly, and respond accordingly.

Real-World Example:

Checking Age for Voting Eligibility

let age = 17;

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

Output:

You are not old enough to vote.

Example: User Login System

let isLoggedIn = false;

if (isLoggedIn) {
    console.log("Welcome back!");
} else {
    console.log("Please log in.");
}

Output:

Please log in.

Nested if-else Statements

You can place if-else statements inside each other to handle more complex conditions.

let score = 85;

if (score >= 90) {
    console.log("Grade: A");
} else {
    if (score >= 75) {
        console.log("Grade: B");
    } else {
        console.log("Grade: C");
    }
}

Output:

Grade: B

Benefits of if-else Statements

• Simple to Implement – Easy to understand and write.
• Efficient Control Flow – Helps make logical decisions and control program behavior.
• Dynamic Logic – Reacts to changing inputs or data conditions.
• Flexible – Can be nested or combined for complex scenarios.

Common Mistakes to Avoid

1. Forgetting the else Block – If no else block is written, nothing happens when the condition is false.
2. Assignment Instead of Comparison

if (x = 10)  // Incorrect: assigns value instead of comparing

Fix:

if (x === 10)  // Correct: compares values

3. Incorrect Bracket Usage

if (x > 10) 
    console.log("Greater");  // Works, but not recommended
else 
    console.log("Smaller");

Fix:

if (x > 10) {
    console.log("Greater");
} else {
    console.log("Smaller");
}

Ternary Operator (Shorter Alternative to if-else)

For simple if-else logic, a ternary operator can be used to make the code more concise.

let number = 5;
let result = (number % 2 === 0) ? "Even" : "Odd";
console.log(result);  // Odd

Best Practices for Using if-else

2. Keep It Simple – Avoid overly complex if-else chains by breaking down logic into smaller functions.
3. Readable Conditions – Use clear and simple conditions.
4. Avoid Deep Nesting – Excessive nesting can make the code harder to read.
5. Use Logical Operators – Combine conditions using && (AND) or || (OR) to reduce code repetition.

Key Takeaways

• The if-else statement lets you manage two possible outcomes, controlling the execution flow based on conditions.
• A fallback (else) ensures alternative code runs if the primary condition fails.
• Ternary operators provide a shorter alternative for simple if-else logic.

(3)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.