Comparing Values using Comparison Operators in JavaScript

Introduction

Imagine you are a farmer who wants to sell his crops at the market. You have several baskets of apples, each containing a different number of apples. You want to sort the baskets based on the number of apples in each one so that you can price them correctly. You decide to use comparison operators in JavaScript to help you with this task.

First, you use the less than operator (<) to compare the number of apples in each basket. You start with the smallest basket and compare it with the next basket. If the number of apples in the first basket is less than the number of apples in the second basket, you move the first basket to the front of the line. You repeat this process until all the baskets are sorted from smallest to largest.

Just like the farmer compares his apples, comparison operators in JavaScript are used to compare values and return a boolean (true or false) result. These operators are used in conditional statements, loops, and other logical operations. It is important to understand the different types of comparison operators in JavaScript to write effective code.

There are 8 comparison operators in JavaScript, listed below:

• Equal to (==)
• Not equal to (!=)
• Strict equal to (===)
• Strict not equal to (!==)
• Greater than (>)
• Less than (<)
• Greater than or equal to (>=)
• Less than or equal to (<=)

Equal to (==) Operator

The equal to operator compares two values for equality. It returns true if the values are equal and false if they are not equal.

console.log(5 == 5); // Output: true
console.log(5 == "5"); // Output: true
console.log(5 == 6); // Output: false

Not equal to (!=) Operator

The not equal to operator compares two values for inequality. It returns true if the values are not equal and false if they are equal.

console.log(5 != 5); // Output: false
console.log(5 != "5"); // Output: false
console.log(5 != 6); // Output: true

Strict equal to (===) Operator

The strict equal to operator compares two values for equality and type. It returns true if the values are equal and of the same type, and false if they are not equal or of a different type.

console.log(5 === 5); // Output: true
console.log(5 === "5"); // Output: false
console.log(5 === 6); // Output: false

Strict not equal to (!==) Operator

The strict not equal to operator compares two values for inequality and type. It returns true if the values are not equal or of a different type, and false if they are equal and of the same type.

console.log(5 !== 5); // Output: false
console.log(5 !== "5"); // Output: true
console.log(5 !== 6); // Output: true

Greater than (>) Operator

The greater than operator compares two values to check if the left-hand side value is greater than the right-hand side value. It returns true if the left-hand side value is greater than the right-hand side value, and false otherwise.

console.log(5 > 3); // Output: true
console.log(3 > 5); // Output: false

Less than (<) Operator

The less than operator compares two values to check if the left-hand side value is less than the right-hand side value. It returns true if the left-hand side value is less than the right-hand side value, and false otherwise.

console.log(5 < 3); // Output: false
console.log(3 < 5); // Output: true

Greater than or equal to (>=) Operator

The greater than or equal to operator compares two values to check if the left-hand side value is greater than or equal to the right-hand side value. It returns true if the left-hand side value is greater than or equal to the right-hand side value, and false otherwise.

console.log(5 >= 5); // Output: true
console.log(6 >= 5); // Output: true
console.log(4 >= 5); // Output: false

Less than or equal to (<=) Operator

The less than or equal to operator compares two values to check if the left-hand side value is less than or equal to the right-hand side value. It returns true if the left-hand side value is less than or equal to the right-hand side value, and false otherwise.

console.log(5 <= 5); // Output: true
console.log(5 <= 6); // Output: true
console.log(5 <= 4); // Output: false

Combining Comparison Operators

We can combine comparison operators with logical operators to create more complex conditions.

AND (&&) Operator

The AND operator returns true if both the left-hand side and right-hand side expressions are true. Otherwise, it returns false.

console.log(5 > 3 && 3 < 4); // Output: true
console.log(5 > 3 && 3 > 4); // Output: false

OR (||) Operator

The OR operator returns true if either the left-hand side or the right-hand side expression is true. Otherwise, it returns false.

console.log(5 > 3 || 3 > 4); // Output: true
console.log(5 < 3 || 3 > 4); // Output: false

NOT (!) Operator

The NOT operator returns the opposite of the expression's truth value. If the expression is true, it returns false. If the expression is false, it returns true.

console.log(!(5 > 3)); // Output: false
console.log(!(5 < 3)); // Output: true

Comparing Numbers

When comparing numbers, JavaScript uses the same comparison operators as it does for other data types. For example, we can use the greater than operator (>) to check if one number is greater than another.

console.log(5 > 3); // Output: true
console.log(2 > 4); // Output: false

We can also use other comparison operators like less than (<), greater than or equal to (>=), and less than or equal to (<=) to compare numbers.

console.log(5 < 3); // Output: false
console.log(2 >= 2); // Output: true
console.log(3 <= 2); // Output: false

Comparing Strings

When comparing strings, JavaScript compares them based on their Unicode values. The Unicode value of a character is a unique number that represents it in the Unicode character set. To compare strings, we can use the same comparison operators that we use for numbers.

console.log("apple" < "banana"); // Output: true
console.log("cat" > "dog"); // Output: false

In the example above, "apple" is less than "banana" because its first character "a" has a lower Unicode value than "b". Similarly, "cat" is greater than "dog" because its first character "c" has a higher Unicode value than "d".

Comparing a Number with a Value of Another Type

Sometimes, we may need to compare a number with a value of another data type like a string or boolean. In JavaScript, when we compare a number with a string or boolean, the value of the string or boolean is converted to a number before the comparison is made.

console.log(5 == "5"); // Output: true
console.log(2 > true); // Output: true

In the first example above, the string "5" is converted to the number 5 before it is compared to the number 5. In the second example, the boolean value true is converted to the number 1 before it is compared to the number 2. This is known as type coercion.

To avoid unexpected results due to type coercion, it is recommended to use the strict equality operator (===) which compares both the value and the data type.

console.log(5 === "5"); // Output: false
console.log(2 === true); // Output: false

In the example above, both comparisons return false because the data types of the operands are different.

Real-Life Applications

There are many real-life applications of comparison operators in JavaScript. Here are a few examples:

1. E-commerce websites: E-commerce websites often use comparison operators to compare the prices of different products and display them to the users in ascending or descending order.
2. Form validation: Comparison operators can be used to validate user input on web forms. For example, we can use the greater than operator to check if a user's age is greater than 18 before allowing them to sign up for a service.
3. Search engines: Search engines use comparison operators to rank search results. For example, Google uses a complex algorithm that takes into account factors such as the relevance and popularity of a webpage to determine its ranking in search results.
4. Games: Games often use comparison operators to check if a player has completed a certain objective or achieved a certain score.

Best Practices

1. Use strict equality operator (===) whenever possible: The strict equality operator compares both the value and data type of the operands. It is recommended to use strict equality operator instead of loose equality operator (==) to avoid any unexpected type coercion.
2. Use parentheses to group complex expressions: Parentheses can be used to group complex expressions to ensure that the operator precedence is maintained correctly. This can make the code easier to read and understand.
3. Be aware of floating point precision issues: Floating point numbers can sometimes cause precision issues when used with comparison operators. It is recommended to use Number.EPSILON to compare floating point numbers instead of direct comparison.
4. Use comparison operators in conditional statements: Comparison operators are often used in conditional statements like if-else statements and loops to control the flow of the program. It is important to use them in the correct way to ensure that the program behaves as expected.