What is and how to use the IF-ELSE conditional in JavaScript

The if and if-else conditionals are fundamental control structures that allow decision-making based on boolean evaluations.

The IF Conditional

The if structure evaluates a boolean expression and executes a block of code only if the expression evaluates to true. The basic syntax of an if conditional in JavaScript is:

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

Let’s see it with an example:

let number = 10;

if (number > 5) {
    console.log("The number is greater than 5");
}

In this example, the condition number > 5 evaluates to true, so the message “The number is greater than 5” is printed to the console.

The IF ELSE Conditional

The if conditional allows adding an else block of alternative code that will be executed if the if condition is false. The basic syntax is:

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

Let’s see it with an example:

let number = 3;

if (number > 5) {
    console.log("The number is greater than 5");
} else {
    console.log("The number is not greater than 5");
}

In this case:

• The condition number > 5 is false
• Therefore, the block of code within the else is executed
• Thus, “The number is not greater than 5” is printed to the console

The IF ELSE-IF Conditional

To evaluate multiple conditions, you can chain multiple if / else-if / else blocks. This allows evaluating several conditions in sequence until one of them is true.

if (condition1) {
    // Code to execute if condition1 is true
} else if (condition2) {
    // Code to execute if condition1 is false and condition2 is true
} else {
    // Code to execute if all previous conditions are false
}

Using Logical Operators in Conditionals

To evaluate multiple conditions within a single if, you can use logical operators like && (logical AND) and || (logical OR).

AND Operator (&&)

The && operator evaluates to true only if both conditions are true.

let number = 10;

if (number > 5 && number < 15) {
    console.log("The number is between 5 and 15");
}

OR Operator (||)

The || operator evaluates to true if at least one of the conditions is true.

let number = 20;

if (number < 5 || number > 15) {
    console.log("The number is less than 5 or greater than 15");
}

Practical Examples

Determine if a number is less than 5 or greater than 15

In this example, we determine if a number is less than 5, greater than 15, or in the intermediate range.

let number = 10;

if (number > 15) {
    console.log("The number is greater than 15");
} else if (number > 5) {
    console.log("The number is greater than 5 but less than or equal to 15");
} else {
    console.log("The number is 5 or less");
}

Here, we sequentially evaluate the conditions:

• number > 15 is false
• but number > 5 is true
• So, “The number is greater than 5 but less than or equal to 15” is printed.

Determine the largest of three numbers

In this example, we find the largest of three numbers using if-else structures.

let a = 5, b = 10, c = 3;
let largest;

if (a > b && a > c) {
    largest = a;
} else if (b > a && b > c) {
    largest = b;
} else {
    largest = c;
}

console.log(`The largest number is: ${largest}`);

Verify grading ranges

In this example, we assign a letter grade based on a numerical score using a series of if-else conditions.

let grade = 85;
let range;

if (grade >= 90) {
    range = "A";
} else if (grade >= 80) {
    range = "B";
} else if (grade >= 70) {
    range = "C";
} else if (grade >= 60) {
    range = "D";
} else {
    range = "F";
}

console.log(`The grade is: ${range}`);