Mastering JavaScript Comparison and Logical Operators

JavaScript is all about making decisions in your code. For comparing some values or performing various conditions, the language is equipped with powerful comparison operators and logical operators. In this article I will cover both in depth, and give you the information you need to write code which is smarter, cleaner, and more functional.

What Are Comparison Operators?

As we can tell from their name, comparison operators compare two values and return a boolean (true or false) in JavaScript. Their help in making decisions if a condition is true or false.

Types of Comparison Operators

1. Equal (==)

As the name suggests, equal operator is a two dimensional comparison operator that compares two values and return true if the two values hold the same value even if their data type is not one and the same.

console.log(5 == '5')  // true

5 is a number and ‘5’ is string so they are not strict equal.

2. Strict Equal (===)

The strict equal operator compares both value and type. If the types differ, it returns false.

console.log(5 === '5');  // false

Since 5 is a number and '5' is a string, they are not strictly equal.

3. Not Equal (!=)

The not equal operator returns true if the two values are not the same.

console.log(5 != '6');  // true

This checks whether the values differ, ignoring type.

4. Strict Not Equal (!==)

The strict not equal operator checks both value and type, returning true if they don’t match.

console.log(5 !== '5');  // true

The types differ here, so this evaluates to true.

5. Greater Than (>)

This operator is for checking if the value on the left for being bigger than the value on the right.

console.log(10 > 5);  // true

6. Greater Than or Equals(≥):

This compares if left hand side is greater than the right side or not.

console.log(10 >= 10);  // true

7. Less Than (<)

This is an operator to check that value in left is lesser than value in the right.

console.log(5 < 10);  // true

8. Less Than or Equal (<=)

The operator is used to test whether the (on the left) is less than or equal to (on the right).

console.log(5 <= 5);  // true

Comparison Operator Example

let age = 18;

if (age >= 18) {
  console.log("You are eligible to vote.");
} else {
  console.log("You are not old enough to vote.");
}

For example, if we want age > = 18, there will be a condition checking. If the first statement is true it executes it, otherwise the second statement runs.

Logical Operators in JavaScript

Logical operators help us combine multiple conditions. Logical operators are used when we need to check multiple conditions at once.

Types of Logical Operators

1. AND (&&)

This operator returns true if both conditions are true.

let isAdult = true;
let hasID = true;

if (isAdult && hasID) {
  console.log("You can enter the club.");
}

In this case, the person must be an adult and have ID to enter.

2. OR (||)

The OR operator returns true if at least one condition is true.

let hasInvitation = true;
let isVIP = false;

if (hasInvitation || isVIP) {
  console.log("You can attend the event.");
}

Here, either having an invitation or being a VIP grants access.

3. NOT (!)

The NOT operator reverses the value of a boolean. If a condition is true, using ! makes it false.

let isRaining = false;

if (!isRaining) {
  console.log("Let's go for a walk.");
}

Since isRaining is false, !isRaining becomes true, allowing the walk to happen.

Logical Operator Example

let temperature = 25;
let isSunny = true;

if (temperature > 20 && isSunny) {
  console.log("It's a perfect day for the beach.");
} else {
  console.log("Maybe we should stay indoors.");
}

Here, both conditions need to be true for it to be considered a perfect day for the beach.

Combining Comparison and Logical Operators

We often combine both comparison and logical operators to form complex conditions in our code.

Example of Combining Operators

let age = 22;
let hasLicense = true;

if (age >= 18 && hasLicense) {
  console.log("You are allowed to drive.");
} else {
  console.log("You cannot drive.");
}

This first code tests if the person is old enough AND has a driving license. In case these two conditions are fulfilled then they are allowed to drive.

Logical Operator Precedence

In JavaScript, logical operators have a specific order of execution. The ! operator has the highest precedence, followed by &&, and then ||.

Example of Precedence

let result = !false && (true || false);
console.log(result);  // true

Here, !false is evaluated first, then true || false, and finally, && combines both.

Conclusion

JavaScript’s comparison and logical operators form the backbone of decision-making in code. Mastering these operators allows us to build dynamic, interactive applications that respond to multiple conditions with precision. From simple comparisons to complex logic, these operators give developers the tools they need to make their code smart, efficient, and powerful.

graph TD;
    A[Comparison Operators] --> B(Equal ==);
    A --> C(Strict Equal ===);
    A --> D(Not Equal !=);
    A --> E(Strict Not Equal !==);
    A --> F(Greater Than >);
    A --> G(Greater Than or Equal >=);
    A --> H(Less Than <);
    A --> I(Less Than or Equal <=);
    J[Logical Operators] --> K(AND &&);
    J --> L(OR ||);
    J --> M(NOT !);
    N[Combined Example] --> O[Age >= 18 AND hasLicense];

By leveraging these operators effectively, we can construct intricate conditional statements that drive our code’s logic.