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 block of code only if the expression results in 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");
}

The IF ELSE Conditional

The if conditional allows adding an else block of alternative code that will execute 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");
}

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

let number = 10;

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

let number = 20;

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

Practical Examples

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");
}

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}`);

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}`);