The if...else statement in JavaScript is a control structure that allows you to execute one block of code if a condition evaluates to true and another block of code if the condition evaluates to false. This provides a way to handle binary decisions and control the flow of your program based on different conditions.

Syntax

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

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

How It Works

1. Condition Evaluation: The condition inside the if parentheses is evaluated. It should be an expression that returns a boolean value (true or false).
2. Code Execution:
   • If the condition evaluates to true, the block of code following the if statement is executed.
   • If the condition evaluates to false, the block of code following the else statement is executed.

Example

let age = 20;

if (age >= 18) {
  console.log('You are an adult.');
} else {
  console.log('You are a minor.');
}

• Explanation:
  • The if condition checks if age is greater than or equal to 18.
  • If age is 20, which is greater than 18, the condition is true, and 'You are an adult.' is logged.
  • If age were less than 18, the condition would be false, and 'You are a minor.' would be logged instead.

Key Points

1. Single else Block: The else block is optional. If you only need to execute code for the true case and don’t need to handle the false case, you can use just the if statement.

   let number = 5;
   
   if (number > 0) {
     console.log('Number is positive');
   }
   

2. Multiple Conditions: For handling more than two conditions, you can use if...else if...else statements.

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

   • Explanation:
     • This example categorizes the score into different grades based on multiple conditions.

3. Short-Circuiting: The else block only executes if none of the preceding if or else if conditions are true.

   let number = -5;
   
   if (number > 0) {
     console.log('Number is positive');
   } else {
     console.log('Number is zero or negative');
   }
   

   • Explanation:
     • If number is not greater than 0, the else block is executed.

4. Combining with Logical Operators: You can use logical operators (&&, ||, !) to combine multiple conditions in an if statement.

   let temperature = 30;
   let isRaining = false;
   
   if (temperature > 25 && !isRaining) {
     console.log('It is hot and dry outside.');
   } else {
     console.log('Conditions are not ideal.');
   }
   

   • Explanation:
     • The if condition checks if the temperature is above 25 and it is not raining. If both conditions are true, the corresponding message is logged.

Summary

• Basic Usage: if...else allows you to execute code blocks based on whether a condition is true or false.
• Single else: The else block handles the case where the if condition is false.
• Multiple Conditions: Use else if to handle multiple conditions.
• Logical Operators: Combine conditions using logical operators to create more complex decision-making.