Skip to main content

JavaScript if...else Statements

JavaScript if...else Statements

The if...else statement in JavaScript is a fundamental control structure that allows you to execute a block of code conditionally, based on whether an expression evaluates to true or false. It is one of the most basic and widely used constructs for controlling the flow of a program.

Basic if Statement

The if statement evaluates a condition, and if the condition is true, it executes a block of code. If the condition is false, the code block is skipped.

const age = 18;

if (age >= 18) {
  console.log('You are eligible to vote.');
}
// Output: You are eligible to vote.

In this example, the code inside the if block is executed because the condition age >= 18 is true.

if...else Statement

The if...else statement allows you to define an alternative block of code to execute if the condition is false.

const age = 16;

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

In this case, the else block is executed because the condition age >= 18 is false.

if...else if...else Statement

The if...else if...else statement allows you to check multiple conditions sequentially. The first block with a true condition is executed, and subsequent conditions are not checked.

const 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

Here, the else if block with the condition score >= 70 is executed because it is the first condition that evaluates to true.

Using Multiple Conditions

You can combine multiple conditions using logical operators like && (AND) and || (OR) within an if statement.

const isMember = true;
const cartTotal = 120;

if (isMember && cartTotal > 100) {
  console.log('You get a 10% discount.');
} else {
  console.log('No discount available.');
}
// Output: You get a 10% discount.

In this example, both conditions (isMember is true and cartTotal > 100) must be true for the if block to execute.

Ternary Operator

The ternary operator provides a shorthand way to write simple if...else statements. It has the following syntax: condition ? expressionIfTrue : expressionIfFalse.

const age = 20;
const message = (age >= 18) ? 'You are an adult.' : 'You are a minor.';

console.log(message);
// Output: You are an adult.

The ternary operator is best used for simple conditional assignments.

Nested if Statements

You can nest if statements inside each other to handle more complex conditions:

const isLoggedIn = true;
const hasAdminAccess = false;

if (isLoggedIn) {
  if (hasAdminAccess) {
    console.log('Welcome, Admin!');
  } else {
    console.log('Welcome, User!');
  }
} else {
  console.log('Please log in.');
}
// Output: Welcome, User!

In this example, the outer if statement checks if the user is logged in, and the inner if statement checks if they have admin access.

Conclusion

The if...else statement is an essential control structure in JavaScript, providing a way to make decisions and control the flow of your program. Understanding how to use if, if...else, if...else if...else, and other variations can help you handle different conditions in your code effectively.

Comments

Post a Comment