The if...else if...else statement in JavaScript is a control structure that allows you to test multiple conditions in sequence and execute different blocks of code based on which condition is true. It’s useful for handling complex decision-making scenarios where you have more than two possible outcomes.

Syntax

The basic syntax of the if...else if...else statement is:

if (condition1) {
  // Code to execute if condition1 is true
} else if (condition2) {
  // Code to execute if condition1 is false and condition2 is true
} else if (condition3) {
  // Code to execute if none of the previous conditions are true and condition3 is true
} else {
  // Code to execute if none of the above conditions are true
}

How It Works

1. Condition Evaluation: The if statement evaluates condition1. If condition1 is true, the corresponding block of code is executed, and the remaining conditions are not evaluated.
2. Else If Evaluation: If condition1 is false, the else if statement checks condition2. If condition2 is true, the corresponding block of code is executed, and the remaining conditions are not evaluated.
3. Further Conditions: This process continues with additional else if statements, if present.
4. Else Block: If none of the preceding conditions are true, the else block (if provided) is executed.

Example

let score = 85;

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');
}

• Explanation:
  • The code checks the score against multiple ranges.
  • It starts by checking if the score is 90 or above. If true, it logs 'Grade: A'.
  • If not, it checks if the score is 80 or above. If true, it logs 'Grade: B'.
  • This process continues with other else if conditions.
  • If none of the conditions are met, the else block logs 'Grade: F'.

Key Points

1. Sequential Checking: The conditions are evaluated in sequence. The first true condition’s block is executed, and the rest are ignored.

2. Multiple Conditions: You can use multiple else if statements to handle various cases. The else block is optional and handles all cases not covered by the previous conditions.

3. Order of Conditions: The order of if and else if conditions is important. The most specific condition should be placed first to ensure accurate results.

4. Logical Operators: Conditions can include logical operators to combine multiple tests.

   let age = 25;
   let isStudent = true;
   
   if (age < 18) {
     console.log('You are a minor.');
   } else if (age >= 18 && age < 30 && isStudent) {
     console.log('You are a young adult and a student.');
   } else if (age >= 30) {
     console.log('You are an adult.');
   } else {
     console.log('You are an adult but not a student.');
   }
   

   • Explanation:
     • The code checks if age and isStudent meet the criteria and logs the appropriate message.

5. Fallback Option: The else block acts as a fallback if none of the if or else if conditions are true.

Summary

• Control Flow: if...else if...else statements are used to handle multiple conditions and control the flow of the program.
• Sequential Execution: Conditions are evaluated in sequence; once a true condition is found, its corresponding code block is executed.
• Optional Else: The else block is optional and handles all cases not covered by the preceding conditions.