The if
and if-else
conditionals are fundamental control structures that allow making decisions based on boolean evaluations.
If you want to learn more about Conditionals
check the Introduction to Programming Course read more ⯈
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 isfalse
- 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
isfalse
- but
number > 5
istrue
- 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}`);