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

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

The IF conditional

The if structure evaluates a boolean expression and executes a code block only if the expression turns out to be 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 number > 5 condition is evaluated as 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 alternative else code block 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 number > 5 condition is false
• So the code block inside the else is executed
• Therefore, “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, logical operators such as && (logical AND) and || (logical OR) can be used.

AND Operator (&&)

The && operator evaluates as 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 as 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 grade ranges

In this example, we assign a grade letter 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}`);