  # Comparing Values using Comparison Operators in JavaScript

Module - 3 JavaScript Operators
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.

Open Compiler
###### Recommended Courses
Masters in Computer Science: Software Engineering  20,000 people are doing this course
Join India's only Pay after placement Master's degree in Computer Science. Get an assured job of 5 LPA and above. Accredited by ECTS and globally recognised in EU, US, Canada and 60+ countries.
Certification in Full Stack Web Development  20,000 people are doing this course
Become a job-ready Full Stack Web Developer in 30 weeks. Join the largest tech community in India. Pay only after you get a job above 5 LPA.

Related Tutorials   696   561   1435   823

Related Articles JavaScript Animation Effects: Explained with Examples  6 mins  7328 Applications of JavaScript: A Guide to JavaScript’s uses  4 mins  3119 Reverse a Linked List: Algorithm, Examples & Best Practices  12 mins  2373 React.Js vs. Angular.Js: Which is a better Frontend Framework  7 mins  3369 Single Page Application in Web Development: Benefits and Examples  8 mins  2434 Reasons to choose React Native for Building Responsive Apps  7 mins  2766

AlmaBetter’s curriculum is the best curriculum available online. AlmaBetter’s program is engaging, comprehensive, and student-centered. If you are honestly interested in Data Science, you cannot ask for a better platform than AlmaBetter. Kamya Malhotra
Statistical Analyst
Fast forward your career in tech with AlmaBetter

Vikash SrivastavaCo-founder & CPTO AlmaBetter Related Tutorials to watch  Made with  in Bengaluru, India