JavaScript if...else Statement


In programming, decision-making is essential for controlling the flow of your code. JavaScript provides a powerful mechanism for conditional execution using the if...else statement. This allows developers to execute different blocks of code depending on whether a condition is true or false.


1. What is the if...else Statement?

The if...else statement in JavaScript is a fundamental control structure used to execute code based on whether a given condition is true or false. The syntax is straightforward:

if (condition) {
  // code to run if condition is true
} else {
  // code to run if condition is false
}

If the condition inside the if block evaluates to true, the code inside the if block is executed. If it evaluates to false, the code inside the else block runs instead.


2. Basic Syntax of the if...else Statement

Here is a simple example to illustrate the basic syntax of an if...else statement:

Example 1: Basic if...else Statement

let age = 18;

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

Explanation:

  • If the value of age is greater than or equal to 18, the first message ("You are eligible to vote.") will be printed.
  • Otherwise, the second message ("You are not eligible to vote.") will be printed.

3. The else if Statement

In situations where you have more than two conditions to check, you can use the else if statement. This allows you to test multiple conditions in sequence.

Syntax:

if (condition1) {
  // code to run if condition1 is true
} else if (condition2) {
  // code to run if condition2 is true
} else {
  // code to run if no conditions are true
}

Example 2: Using else if

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:

  • The program checks the score and prints the corresponding grade based on the if...else if conditions.
  • If score is 85, it will print "Grade B" because it satisfies the second condition (score >= 80).

4. Nested if...else Statements

You can nest if...else statements within each other to check more complex conditions. This is useful when you need to test multiple conditions in a hierarchical manner.

Example 3: Nested if...else Statement

let age = 20;
let hasParentalConsent = true;

if (age >= 18) {
  console.log("You can make your own decisions.");
} else {
  if (hasParentalConsent) {
    console.log("You can make decisions with parental consent.");
  } else {
    console.log("You need parental consent to make decisions.");
  }
}

Explanation:

  • First, the program checks if the person is at least 18 years old.
  • If not, it checks whether the person has parental consent. If the person has consent, it prints a different message. If there is no consent, it prints a third message.

5. The Ternary Operator: A Shortcut for if...else

JavaScript also provides the ternary operator, which is a shorthand for the if...else statement. It is often used for simple conditional expressions.

Syntax:

condition ? expression1 : expression2;
  • If the condition is true, expression1 is evaluated.
  • If the condition is false, expression2 is evaluated.

Example 4: Using the Ternary Operator

let age = 20;
let message = age >= 18 ? "You can vote." : "You cannot vote.";
console.log(message);

Explanation:

  • If age is 18 or greater, the message "You can vote." will be assigned to message.
  • Otherwise, "You cannot vote." will be assigned.

6. The if...else Statement with Logical Operators

You can combine if...else statements with logical operators (such as && for AND, || for OR) to test multiple conditions at once.

Example 5: Using Logical Operators in if...else

let age = 25;
let hasLicense = true;

if (age >= 18 && hasLicense) {
  console.log("You can drive.");
} else {
  console.log("You cannot drive.");
}

Explanation:

  • The condition checks if both age is greater than or equal to 18 and if the person has a license.
  • If both conditions are true, it prints "You can drive.".
  • If either condition is false, it prints "You cannot drive.".

7. The if Statement with Multiple Conditions

When you need to evaluate multiple conditions simultaneously, the if...else statement works with logical operators like && (AND) and || (OR).

Example 6: Multiple Conditions in if...else

let temperature = 30;
let isRaining = false;

if (temperature > 25 && !isRaining) {
  console.log("It's a perfect day for a picnic.");
} else {
  console.log("Better stay indoors.");
}

Explanation:

  • The program checks if the temperature is greater than 25 and if it’s not raining.
  • If both conditions are true, it prints "It's a perfect day for a picnic.". Otherwise, it suggests staying indoors.

8. Conclusion

The if...else statement is one of the most fundamental concepts in JavaScript programming. By using it, you can make your programs more interactive and responsive to different conditions.

Here’s a quick summary of the key points:

  • if is used to execute a block of code if a condition is true.
  • else is used to execute a block of code if the condition is false.
  • else if allows for multiple conditions to be tested.
  • You can nest if...else statements to create complex conditions.
  • The ternary operator is a shorthand for simple if...else statements.
  • Logical operators like && and || allow for more complex conditions.

By mastering the if...else statement, you'll be able to handle a variety of decision-making scenarios in your JavaScript programs.