Comparing Values using Comparison Operators in JavaScript
Understanding Operator Precedence in JavaScript
Comparing Values using Comparison Operators in JavaScript
Last Updated: 25th April, 2024
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.
Loading...
Run
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.
Loading...
Run
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.
Loading...
Run
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.
Loading...
Run
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.
Loading...
Run
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.
Loading...
Run
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.
Loading...
Run
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.
Loading...
Run
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.
Loading...
Run
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.
Loading...
Run
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.
Loading...
Run
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.
Loading...
Run
We can also use other comparison operators like less than (<), greater than or equal to (>=), and less than or equal to (<=) to compare numbers.
Loading...
Run
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.
Loading...
Run
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.
Loading...
Run
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.
Loading...
Run
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:
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.
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.
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.
Games: Games often use comparison operators to check if a player has completed a certain objective or achieved a certain score.
Best Practices
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.
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.
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.
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.
Module 3: JavaScript OperatorsLesson 3: Comparing Values using Comparison Operators in JavaScript
Module 3: JavaScript OperatorsLesson 3: Comparing Values using Comparison Operators in JavaScript
Top Tutorials
Web Development
NodeJS
In this comprehensive Node JS tutorial, the fundamentals are thoroughly covered, preparing learners to create scalable and high-performance web applications. The development environment setup, module usage, asynchronous programming implementation, and integration with databases and external services are all explored. By harnessing the capabilities of server-side JavaScript, web development proficiency can be significantly enhanced.
In this HTML5 tutorial, the learner explores the latest features and enhancements of the markup language. They are guided through semantic elements, multimedia integration, and form improvements. The tutorial emphasizes practical examples to build a solid foundation in HTML5.
Learn React with the best React JS tutorial and master how to build dynamic, user-friendly web applications using the powerful JavaScript library. Start today!