DEV Community

Codecupdev
Codecupdev

Posted on

Introducing Comparison Operators in JavaScript

JavaScript provides us with a set of operators called comparison operators. Comparison operators let us compare values and return a boolean (true or false).

If you would like to watch a video of this post you can view it here:

The first set of these operators we will look at are:

  • Greater than: Checks if a value is greater than something.
  • Less than: Checks if a value is less than something.
  • Greater than or equal: Checks if a value is greater than or it is equal to something.
  • Less than or equal: Checks if the value is less than or it is equal to something.

Image description

If we were making a program that was based on supermarket stock we might encounter a situation where we only want the user to be able to place an order if we had bananas in stock. To do this we would want to check that the number of bananas available was greater than 0, this would be an example of using the greater than operator.
Later we may then want to limit the amount of bananas a customer is able to order in one go to 5 to ensure the order system was fair. In this case, we would want to check that the order count of bananas was less than or equal to 5 and we would use the less than or equal to operator.

We will start with a simple example of using the greater than operator. We will check if one is less than 2 and we get true.

1 < 2
// ---> Returns true
Enter fullscreen mode Exit fullscreen mode

Now we move on and check whether one is greater than two and we get false.

1 > 2
// ---> Returns false
Enter fullscreen mode Exit fullscreen mode

Now let’s do an example with the less than or equal operator. We will check if 5 is less than or it is equal to 5, we get true.

5 <= 5
// ---> Returns true
Enter fullscreen mode Exit fullscreen mode

The next set of comparison operators let us check whether a value is equal to another value and return a boolean based on whether or not this is the case. These operators consist of the following:

Image description

  • Equality operator (sometimes called loose equality)
  • Inequality operator(sometimes called loose inequality)
  • Strict equality
  • Strict inequality

In JavaScript, we have what is called loose equality and also strict equality. When we use the loose equality operator, Javascript performs what is called type coercion.

Type coercion is the automatic conversion of one data type to another data type. So if we wanted to compare the integer zero to a string containing zero the comparison using loose equality would return true. This is because the string zero will be coerced to the integer type and then the comparison performed would be the number 0 compared with number 0. On the other hand, if we performed the same comparison using the strict equality operator the return value would be false because the strict equality operator does not perform any type coercion.
So let’s start by trying out the equality operator. We will compare the integer five with the string 5. As you can see we get true because the string five is coerced to the integer type before the comparison is performed.

5 == '5'
// ---> Returns true
Enter fullscreen mode Exit fullscreen mode

Now let’s try this again but compare the integer 5 to the string 6. These are not equal so we get false.

5 == '6'
// ---> Returns false
Enter fullscreen mode Exit fullscreen mode

If we did this again and use the inequality operator we get true because the inequality operator checks to see that the values are not equal to one another.

6 != '6'
// ---> Returns true
Enter fullscreen mode Exit fullscreen mode

Lastly, we will look at the strict equality operator. We will compare the integer ten to the integer ten. These values are both the same so we get true.

10 === 10
// ---> Returns true
Enter fullscreen mode Exit fullscreen mode

Let’s try changing this a bit and compare the integer ten to the string ten. Now we get false and this is because we are using the strict equality operator and therefore this time the string will not be coerced.

10 === '10'
// ---> Returns false
Enter fullscreen mode Exit fullscreen mode

However, if we check that these values are not equal using the strict inequality operator we will get true because they are not from the same data type.

10 !== '10'
// ---> Returns true
Enter fullscreen mode Exit fullscreen mode

Please feel free to post any comments, questions, or feedback!

Top comments (0)