Mastering Multiple Conditions in JavaScript’s if Statements

Mastering conditional logic is crucial for building dynamic and responsive JavaScript applications. This article explores how to effectively handle multiple conditions within your if statements, significantly enhancing the power and flexibility of your code.

Table of Contents

• Using Logical Operators for Multiple Conditions
• Combining AND and OR Operators
• Using Nested if Statements
• The Ternary Operator for Concise Logic

Using Logical Operators for Multiple Conditions

JavaScript’s logical operators are the foundation of handling multiple conditions. They allow you to combine boolean expressions to create more complex conditional statements. The three primary logical operators are:

• && (AND): Returns true only if all expressions are true.
• || (OR): Returns true if at least one expression is true.
• ! (NOT): Inverts the boolean value of an expression (true becomes false, and vice-versa).

Example using AND (&&):

let age = 25;
let hasLicense = true;

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

Example using OR (||):

let isWeekend = true;
let isHoliday = false;

if (isWeekend || isHoliday) {
  console.log("It's time to relax!");
} else {
  console.log("It's a workday.");
}

Example using NOT (!):

let isLoggedIn = false;

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

Combining AND and OR Operators

You can combine && and || operators to create even more intricate conditions. Parentheses () are essential for controlling the order of evaluation. Remember the order of precedence: ! (NOT) has the highest precedence, followed by && (AND), and then || (OR).

Example combining AND and OR:

let temperature = 25;
let isSunny = true;
let isRainy = false;

if ((temperature > 20 && isSunny) || isRainy) {
  console.log("It's a good day to go outside, but bring an umbrella if it's rainy.");
} else {
  console.log("Maybe stay inside today.");
}

Using Nested if Statements

For complex scenarios, nesting if statements provides a clear way to handle multiple levels of conditions. Each nested if statement is evaluated only if the outer if condition is met.

let age = 15;
let hasParentPermission = true;

if (age >= 18) {
  console.log("You can attend the event.");
} else {
  if (hasParentPermission) {
    console.log("You can attend the event with parental supervision.");
  } else {
    console.log("You cannot attend the event.");
  }
}

The Ternary Operator for Concise Logic

For simple conditional assignments, the ternary operator (condition ? valueIfTrue : valueIfFalse) offers a more concise alternative to a full if-else statement.

let isAdult = age >= 18 ? true : false;
console.log(isAdult); // Outputs true if age >= 18, false otherwise

By mastering these techniques, you can build robust and adaptable JavaScript applications that handle a wide range of conditional scenarios with clarity and efficiency.