Understanding Nested if...else in JavaScript

A nested if...else statement is when one if...else statement exists inside another. For example,

// Program to check if number is even, odd, or negative
let number = parseInt(prompt("Enter a number: "));

// Outer if...else statement
if (number > 0) {
    // Inner if...else statement
    if (number % 2 === 0) {
        console.log("The number is even.");
    } else {
        console.log("The number is odd.");
    }
} else {
    console.log("The number is negative.");
}

Output

Enter a number: 10
The number is even.

Here's how the above program works:

Outer if...else Statement:

• Checks if the number is positive (number > 0).
• If true, it moves to the inner if...else statement.
• If false, it executes the else block, printing "The number is negative.".

Inner if...else Statement:

• Evaluates if the number is even (number % 2 === 0).
• If true, it prints "The number is even.".
• Otherwise, it prints "The number is odd.".

---

Nestest if...else Statements Aren't Ideal

Nested if...else statements are not inherently bad, but they can make your code harder to read and maintain. For example,

// Program to find the largest of three numbers
let number1 = parseInt(prompt("Enter the first number:"));
let number2 = parseInt(prompt("Enter the second number:"));
let number3 = parseInt(prompt("Enter the third number:"));

if (number1 > number2) {
    if (number1 > number3) {
        console.log(`The largest number is ${number1}`);
    } else {
        console.log(`The largest number is ${number3}`);
    }
} else {
    if (number2 > number3) {
        console.log(`The largest number is ${number2}`);
    } else {
        console.log(`The largest number is ${number3}`);
    }
}

The code works as expected. But, the nested if...else structure makes the code harder to read.

---

Problems with Deep Nesting

Imagine extending the logic of the above program to find the largest of four numbers. The code becomes increasingly unreadable. For example,

// Program to find the largest of four numbers
let num1 = parseInt(prompt("Enter the first number: "));
let num2 = parseInt(prompt("Enter the second number: "));
let num3 = parseInt(prompt("Enter the third number: "));
let num4 = parseInt(prompt("Enter the fourth number: "));

if (num1 > num2) {
    if (num1 > num3) {
        if (num1 > num4) {
            console.log(`The largest number is: ${num1}`);
        } else {
            console.log(`The largest number is: ${num4}`);
        }
    } else {
        if (num3 > num4) {
            console.log(`The largest number is: ${num3}`);
        } else {
            console.log(`The largest number is: ${num4}`);
        }
    }
} else {
    if (num2 > num3) {
        if (num2 > num4) {
            console.log(`The largest number is: ${num2}`);
        } else {
            console.log(`The largest number is: ${num4}`);
        }
    } else {
        if (num3 > num4) {
            console.log(`The largest number is: ${num3}`);
        } else {
            console.log(`The largest number is: ${num4}`);
        }
    }
}

---

Simplifying Nested Logic

You can avoid deep nesting by using logical operators like && and ||.

For example, here's a better way to find the largest of three numbers:

// Program to find the largest of three numbers
let number1 = parseInt(prompt("Enter the first number: "));
let number2 = parseInt(prompt("Enter the second number: "));
let number3 = parseInt(prompt("Enter the third number: "));

if (number1 > number2 && number1 > number3) {
    console.log(`The largest number is ${number1}`);
} else if (number2 > number3) {
    console.log(`The largest number is ${number2}`);
} else {
    console.log(`The largest number is ${number3}`);
}

Here, using the && operator allows us to avoid unnecessary nesting, making the code easier to read and maintain.

---

Takeaways

• Nested if...else statements can handle dependent conditions but can make your code messy if overused.
• You can simplify nested logic with logical operators like && and ||.