If-Else statement is used the most with JavaScript comparison and logical operators. As we have discussed over the JavaScript comparison and logical operators on our JavaScript Operators lesson, we will go through these operators and see how it is used extensively in if-else statements 🤯.
JavaScript Comparison Operators 🤔
The comparison operators in JavaScript are used for logical calculations. It helps us compare between operands and return either true or false based on the comparison.
Some of the most commonly used Comparison Operators in JavaScript are as follows:
Let’s use two variables var a = 2 and var b = 3 to explain comparison operators clearly.
| Operator Name & Symbol | Description | Example | Output |
| Equal to (==) | Returns true if the operands are equal | a == 2 a == 3 a == b | true false false |
| Not Equal (!=) | Returns true if the operands are not equal | a != 3 a != 2 a != b | true false true |
| Strictly Equal (===) | Returns true if the operands have same value and same data type | a===2 a===”2″ | true false |
| Strictly Not Equal (!==) | Returns true if the operands have same value but not the same data type | a!==”2″ a!==2 | true false |
| Greater than (>) | Returns true if left operand has larger value than the right operand | a > 1 a > 5 a > b | true false false |
| Less than (<) | Returns true if left operand has smaller value than the right operand | a < 5 a < 1 a < b | true false true |
| Greater than or equal (>=) | Returns true if left operand either has larger value than the right operand or is equal to the right operand | a >= 2 a >= 1 a >= b | true true false |
| Less than or equal (<=) | Returns true if left operand either has smaller value than the right operand or is equal to the right operand | a <= 2 a <= b a <=1 | true true false |
Using If-Else with Comparison Operators 🆚
Let us see how comparison operators are used in writing conditions for the if-else statements.
If Else in Equal to (==) Operator
var age = 16;
if (age == 16) {
console.log('Your age is 16');
} else {
console.log('Your age is not 16');
}
Output
Your age is 16
If Else in Not Equal to (!=) Operator
var age = 20;
if (age != 10) {
console.log('Your age is not equal to 20');
} else {
console.log('Your age is equal to 20');
}
Output
Your age is not equal to 20
If Else in Strictly Equal to (===) Operator
Strictly Equal to === operator returns true if and only if the both the operands involved have same value and same data type.
For example: 2 === “2” returns false because 2 is a number data type while “2” is a string data type. But, 2=== 2 returns true as both 2 and 2 belongs to number data type. For more info see the JavaScript Operators lesson.
var age1 = "16";
/*
If we use Equal to (==) operator, it will return true whenever values (i.e. age1 and 16) match,
even if data types do not match.
*/
if (age1 == 16) {
console.log('Your age is 16');
} else {
console.log('Your age is not 16');
}
var age2 = "20";
/*
If we use Strictly Equal to (===) operator, it will return true only when
values (i.e. age2 and "20") and data types both match.
*/
if (age2 === 20) {
console.log('Your age is 20');
} else {
console.log('Your age is not 20');
}
var age3 = "45";
if (age3 === "45") {
console.log('Your age is 45');
} else {
console.log('Your age is not 45');
}
Output
Your age is 16
Your age is not 20
Your age is 45
If Else in Strictly Not Equal to (!==) Operator
var age2 = "20";
/*
If we use Strictly Not Equal to (!==) operator, it will return true only when
values (i.e. age2 and "20") and data types do not match.
*/
if (age2 !== 20) {
console.log('Your age is not 20');
} else {
console.log('Your age is 20');
}
var age3 = "45";
if (age3 !== "45") {
console.log('Your age is not 45');
} else {
console.log('Your age is 45');
}
Output
Your age is not 20
Your age is 45
If Else in Greater than (>) Operator
var age = 15;
if (age > 16) {
console.log('You are a teenager');
} else {
console.log('You are not a teenager');
}
Output
You are not a teenager
If Else in Less than (<) Operator
var age = 18;
if (age < 18) {
console.log('You are not allowed to drive');
} else {
console.log('You are allowed to drive');
}
Output
You are allowed to drive
If Else in Greater than or equal to (>=) Operator
var age = 18;
if (age >= 18) {
console.log('You are allowed to drive');
} else {
console.log('You are not allowed to drive');
}
Output
You are allowed to drive
If Else in Less than or equal to (<=) Operator
var age = 16;
if (age <= 16) {
console.log('You are a teenager');
} else {
console.log('You are not a teenager');
}
Output
You are a teenager
JavaScript Logical Operators 🧠
The logical operators in JavaScript describe and find out the logic between the operands. The available Logical Operators in JavaScript are as follows:
Let’s use two variables var a = 2 and var b = 3 to explain logical operators clearly.
| Operator Name & Symbol | Description | Example | Output |
| Logical AND (&&) | Returns true if and only if both operands (or operations) are true, otherwise returns false | (a>1 && b<4) (a>1 && b>10) (a>10 && b>1) | true false false |
| Logical OR (||) | Returns true if either one of the operands (or operations) are true, otherwise returns false | (a>1 || b>4) (a<1 || b>2) (a<1 || b>10) | true true false |
| Logical NOT (!) | Returns true if the operand (or operation) is false and returns false if the operand (or operation) is true | !(a==2) !(a>10) | false true |
Using If-Else with Logical Operators 🤔
Let us see how logical operators are used in writing conditions for the if-else statements.
If Else in Logical AND (&&) Operator
if (true && true) {
console.log('Logical AND returns true');
} else {
console.log('Logical AND returns false');
}
if (true && false) {
console.log('Logical AND returns true');
} else {
console.log('Logical AND returns false');
}
if (false && false) {
console.log('Logical AND returns true');
} else {
console.log('Logical AND returns false');
}
var num1 = 10, num2 = 15;
if (num1 > 9 && num2 > 14) {
console.log('The above condition is true');
} else {
console.log('The above condition is false');
}
// Here, num2 === 15 is true but num1 > 11 is false. So the && operator returns false.
if (num1 > 11 && num2 === 15) {
console.log('The above condition is true');
} else {
console.log('The above condition is false');
}
Output
Logical AND returns true
Logical AND returns false
Logical AND returns false
The above condition is true
The above condition is false
If Else in Logical OR (||) Operator
if (true || true) {
console.log('Logical OR returns true');
} else {
console.log('Logical OR returns false');
}
if (true || false) {
console.log('Logical OR returns true');
} else {
console.log('Logical OR returns false');
}
if (false || false) {
console.log('Logical OR returns true');
} else {
console.log('Logical OR returns false');
}
var num1 = 10, num2 = 15;
if (num1 > 9 || num2 > 14) {
console.log('The above condition is true');
} else {
console.log('The above condition is false');
}
// Here, num2 === 15 is true and num1 > 11 is false. So the || operator returns true.
if (num1 > 11 || num2 === 15) {
console.log('The above condition is true');
} else {
console.log('The above condition is false');
}
Output
Logical OR returns true
Logical OR returns true
Logical OR returns false
The above condition is true
The above condition is true
If Else in Logical NOT (!) Operator
if (!true) {
console.log('Logical NOT returns true');
} else {
console.log('Logical NOT returns false');
}
if (!false) {
console.log('Logical NOT returns true');
} else {
console.log('Logical NOT returns false');
}
var num1 = 10, num2 = 15;
if (!(num1 > 9)) {
console.log('The above condition is true');
} else {
console.log('The above condition is false');
}
if (!(num2 > 16)) {
console.log('The above condition is true');
} else {
console.log('The above condition is false');
}
// You can even pair up Logical Not (!) with other operators
if (!(num1 > 9 || num2 > 14)) {
console.log('The above condition is true');
} else {
console.log('The above condition is false');
}
Output
Logical NOT returns false
Logical NOT returns true
The above condition is false
The above condition is true
The above condition is false
In this way, JavaScript Comparison and Logical operators are used with if-else statements to help us write better conditions and what actions to do and not to do depending upon those conditions.