Previous
Written by: rJTutorial Team | Last Updated:

JavaScript If-else Statement

In JavaScript, the if-else statement is the backbone of conditional logic. It allows your code to make decisions—running specific blocks of code only when certain criteria are met. Without conditional statements, programs would simply run line-by-line in a straight path, making it impossible to handle user input, validate forms, or manage dynamic content.

If Statement

The if statement is the simplest form of control flow. It evaluates a condition inside parentheses. If that condition evaluates to true (or a "truthy" value), the code inside the curly braces executes. If the condition is false, JavaScript simply skips over it.

Syntax:

if (condition) {
  // Code to be executed if the condition is true
}

Example:

let userAge = 20;

if (userAge >= 18) {
  console.log("Access granted: You are an adult.");
}
Common Mistake: Using a single equals sign (=) instead of triple equals (===) inside your condition. A single equals sign assigns a value, which can lead to unexpected "true" results and bugs that are hard to track down.

If-else Statement

Most of the time, you want your code to do something else if the condition isn't met. This is where the else block comes in. Think of it as a "Plan B" for your logic.

Syntax:

if (condition) {
  // Code to be executed if the condition is true
} else {
  // Code to be executed if the condition is false
}

Example:

In a real-world scenario, you might use this to check a user's login status to determine which navigation buttons to show.

let isLoggedIn = false;

if (isLoggedIn) {
  console.log("Redirecting to Dashboard...");
} else {
  console.log("Please log in to continue.");
}
Best Practice: For very simple if-else checks (like assigning a single variable), consider using the Ternary Operator (condition ? trueResult : falseResult) to keep your code concise.

If-else if-else Statement

When you have more than two possible outcomes, you can "chain" conditions using else if. JavaScript will check these conditions in order from top to bottom and execute only the first one that evaluates to true.

Syntax:

if (condition1) {
  // Code to be executed if condition1 is true
} else if (condition2) {
  // Code to be executed if condition2 is true
} else {
  // Code to be executed if none of the conditions are true
}

Example:

Imagine you are building a simple dynamic pricing feature based on the time of day:

let currentHour = new Date().getHours(); // Gets current hour (0-23)

if (currentHour < 12) {
  console.log("Morning Menu: Breakfast Burritos available!");
} else if (currentHour < 18) {
  console.log("Afternoon Menu: Lunch specials available!");
} else {
  console.log("Evening Menu: Dinner sets available!");
}
Watch Out: The order of your conditions matters significantly. Once JavaScript finds a true condition, it stops checking the rest. If you put a broad condition before a specific one, the specific one may never run.

Nested If-else Statements

Sometimes a decision depends on multiple layers of logic. You can place an if statement inside another if statement. This is known as "nesting."

Syntax:

if (condition1) {
  // Code to be executed if condition1 is true
  if (condition2) {
    // Code to be executed if both condition1 and condition2 are true
  } else {
    // Code to be executed if condition1 is true and condition2 is false
  }
} else {
  // Code to be executed if condition1 is false
}

Example:

Nested logic is common in e-commerce for checking stock and user balance simultaneously.

let itemInStock = true;
let accountBalance = 50;
let itemPrice = 30;

if (itemInStock) {
  if (accountBalance >= itemPrice) {
    console.log("Purchase successful!");
  } else {
    console.log("Insufficient funds.");
  }
} else {
  console.log("Sorry, this item is out of stock.");
}
Developer Tip: Deeply nested code can become hard to read (often called the "Pyramid of Doom"). To keep your code clean, try using Guard Clauses—returning early from a function if a condition is not met to avoid unnecessary nesting.

 

Summary

The if-else statement is a fundamental building block for creating interactive and intelligent JavaScript applications. By mastering these structures, you can control exactly how your program behaves under different circumstances. Remember to keep your conditions specific, watch your nesting levels, and always use strict equality (===) for reliable results.

Previous