JavaScript If Else

by
Previous
Next

What Are JavaScript if…else Statements?

The if…else statement checks whether a condition is true or false. Based on the result, it decides which block of code to execute.

  • If the condition is true, the code inside the if block runs.
  • If the condition is false, the code inside the else block (if provided) runs.

Syntax

if (condition) {
    // Code to execute if the condition is true
} else {
    // Code to execute if the condition is false
}
  • condition: An expression that evaluates to true or false.
  • The if block runs when the condition is true.
  • The else block runs when the condition is false.

Examples

1. Basic if Statement

let age = 18;

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

2. if…else Statement

let 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.

3. if…else if…else Statement

This is used when multiple conditions need to be checked.

let marks = 75;

if (marks >= 90) {
    console.log("Grade: A");
} else if (marks >= 75) {
    console.log("Grade: B");
} else if (marks >= 50) {
    console.log("Grade: C");
} else {
    console.log("Grade: F");
}
// Output: Grade: B

4. Nested if…else Statements

You can nest if…else statements for more complex conditions.

let age = 20;
let hasID = true;

if (age >= 18) {
    if (hasID) {
        console.log("You can enter the club.");
    } else {
        console.log("You need an ID to enter.");
    }
} else {
    console.log("You are too young to enter.");
}
// Output: You can enter the club.

Key Concepts

1. Truthy and Falsy Values

In JavaScript, some values are considered “truthy” or “falsy” when evaluated in a condition.

  • Truthy Values: Non-zero numbers, non-empty strings, objects, arrays, etc.
  • Falsy Values: 0, “” (empty string), null, undefined, NaN, false.

Example:

if (0) {
    console.log("This won't run.");
} else {
    console.log("Falsy value detected.");
}
// Output: Falsy value detected.

2. Using Logical Operators

Logical operators like && (AND), || (OR) and ! (NOT) enhance your conditions.

Example:

let isLoggedIn = true;
let isAdmin = false;

if (isLoggedIn && isAdmin) {
    console.log("Welcome, Admin!");
} else {
    console.log("Access Denied.");
}
// Output: Access Denied.

Best Practices

Keep Conditions Simple
Avoid overly complex conditions. Break them into smaller, readable parts.

Example:

// Complex and hard to read
if (age >= 18 && hasID && isMember) {
    console.log("Welcome!");
}

// Better approach
if (age >= 18) {
    if (hasID && isMember) {
        console.log("Welcome!");
    }
}

Use Comments for Clarity
Add comments to explain complex conditions. Example:

if (user.role === "admin") {
    // Allow access to admin dashboard
    console.log("Access granted.");
}

Avoid Deep Nesting
Too many nested if…else statements make code hard to read. Use functions or return early.

Example:

// Avoid
if (user) {
    if (user.isActive) {
        if (user.role === "admin") {
            console.log("Welcome, Admin!");
        }
    }
}

// Better
if (!user || !user.isActive) return;
if (user.role === "admin") {
    console.log("Welcome, Admin!");
}

Common Mistakes to Avoid

Using Assignment Instead of Comparison
Accidentally using = instead of == or ===.

Mistake:

if (x = 5) {
    console.log("This is always true.");
}

Fix:

if (x === 5) {
    console.log("This works correctly.");
}

Neglecting Edge Cases
Always consider edge cases, like empty strings or null values.

Example:

if (name) {
    console.log("Hello, " + name);
} else {
    console.log("Name is missing.");
}

Previous
Next

Leave a Comment