This tutorial will show you how to use comparison operators within the JavaScript language.
Comparison operators are what allows you to compare the value of a left operand to a right operand. JavaScript will then return true
or false
depending on whether that comparison is true.
Comparison operators are an essential part of JavaScript and are what will help you write useful conditions for if statements.
One key concept you need to understand about JavaScript is the difference between “loose” and “strict” comparisons.
- With a “loose” comparison, JavaScript will perform type juggling. Simply put, it will perform conversions between certain data types to determine whether the value matches.
For example, the number1
will match the string"1"
using a loose comparison. - When JavaScript performs a “strict” comparison, variables will only match when the data types are the same.
If the data types differ, the comparison will returnfalse
and not be considered equal.
The table below lists all of the comparison operators supported by JavaScript. This table will show you the operator, its name, an example, and the comparison result.
Operator | Name | Example | Result |
---|---|---|---|
== | Equals | x == y | true if x is equal to y . Types can be different |
=== | Identical | x === y | true if x is equal to y , and types are identical. |
!= | Not Equal | x != y | true if x is not equal to y . Types can be different |
!== | Not Identical | x !== y | true if x is not equal to y , or if types are different |
< | Less Than | x < y | true if x is less than y |
<= | Less Than or Equal To | x <= y | true if x is less than or equal to y |
> | Greater Than | x > y | true if x is greater than y |
>= | Greater Than or Equal To | x >= y | true if x is greater than or equal to y |
Examples of Comparison Operators in JavaScript
Over the following few sections, we will explore how to use each supported comparison operator within JavaScript.
Each example explains how to use the operator and when that operator will return true or false.
Equals Comparison Operator (==
) in JavaScript
The equal comparison operator (==
) in JavaScript allows you to check whether two values are equal. The data types of these two values can be different as long as JS can juggle them to be the same.
To showcase this, let us explore the following code snippet. Each of the “console.log()
” calls contains a comparison showing a different usage of the equals operator.
- In the first comparison, we are simply comparing whether the number
10
equals10
. Since these values are equal, the operator will returntrue
. - With this second log, we are using the comparison operator to check whether the number
10
equals the string"10"
.
While these are different types, the “equals” operator allows JavaScript to juggle the types to see if the values are the same. This comparison will return true since JavaScript can convert the string"10"
to10
. - The final log shows using the comparison operator to compare two values are not the same.
Since10
is not equal to11
, this operator will returnfalse
.
console.log(10 == 10);
console.log(10 == "10");
console.log(10 == 11);
Below you can see the result of each of our comparisons within JavaScript.
true
true
false
Identical Operator (===
)
The identical operator (===
) is JavaScript’s strict alternative to the equals comparison operator. With this operator, values will only be considered the same if they are equal and are of the same data type.
JavaScript won’t perform any data type juggling to compare the values.
Let us take the same three “console.log()
” calls we used in the previous example to showcase this behavior change.
- The first example will return true since both values are equal and are both a number.
- With the second example, JavaScript’s identical operator will return
false
.
This operator returns false since the data types do not match. One is a string, and one is a number. The strict comparison stops JavaScript from juggling the data types to see if the values match. - For the final example, JavaScript will still return
false
for this comparison.
The identical comparison operator returns false because10
is not equal to11
.
console.log(10 === 10);
console.log(10 === "10");
console.log(10 === 11);
With the results below, you can see how JavaScript’s identical operator handled each comparison.
true
false
false
Not Equal Comparison Operator in JavaScript (!=
)
The not equal comparison operator (!=
) performs the opposite of the “equals” operator (=
). In JavaScript, you will use this operator to see if two values are not the same. This comparison is made loosely so that the data types can be different.
Since the not equal comparison operator in JavaScript will produce the opposite result to the equals operator, let us use the same examples as before.
- Since
10
equals10
, the not equal operator will returnfalse
. - With the second example, JavaScript considers
10
and"10"
to be the same value when performing a loose comparison.
As both of these have the same value after type juggling, JavaScript not equals operator will returnfalse
. - Finally,
10
is not equal to11
, so JavaScript will returntrue
for this expression.
console.log(10 != 10);
console.log(10 != "10");
console.log(10 != 11);
After running the above example, you should end up with the following result. This result shows you how JavaScript evaluated each usage of the not equals operator.
false
false
true
Not Identical Operator (!==
)
The not identical comparison operator (!==
) in JavaScript is very similar to the not equals operator. However, the not identical operator performs a strict comparison. This means that if the data types differ, JavaScript will return true
.
To showcase this more strict behavior, let us take the same example we used in the previous three examples.
- The not identical operator will still return
false
for the first example. This is since10
is equal to10
, and are both of the same data types. - With the second example, this operator will return
true
. This response is due to the data types of the values being different. - In the final example, the not identical operator will still return
true
. This is because10
is not equal to11
.
console.log(10 !== 10);
console.log(10 !== "10");
console.log(10 !== 11);
You can see how this comparison operator behaves in JavaScript by looking at the result below. You can see how each expression was evaluated.
false
true
true
Less Than Comparison Operator in JavaScript (<
)
JavaScript’s less than comparison operator (<
) allows you to compare whether one value is less than another.
- This operator will only return
true
if the value is less than the compared value. - If the values are equal, it will return
false
.
To showcase how this comparison operator works, less us utilize it in the following expressions. We will log these expressions to see how JavaScript evaluated each operation, true
or false
.
- For the first comparison, we are checking if
10
is less- than20
.
Since10
is less than20
, the less than operator will returntrue
. - Secondly, we check whether
10
is less than10
.
Since these values are equal, the operator will returnfalse
. - With the final comparison, we check if
10
is less than5
.
Since10
is greater than5
, the less-than operator will returnfalse
.
console.log(10 < 20);
console.log(10 < 10);
console.log(10 < 5);
Below you can see the result of the less the comparison operator in JavaScript. JavaScript evaluated only the first example to be true
.
true
false
false
Less than or Equal to Operator (<=
)
The less than or equal to (<=
) perator is useful for comparing values where you want the operator to return true
even when the values are the same.
- If the values are equal, the operator will return
true
. - The operator will return
true
if the left-side value is less than the right-side value.
Let us explore three quick examples to show how the less than or equal to comparison operator works in JavaScript.
- The first comparison will return
true
. This is due to10
being less than20
. - Our second use of the less than or equal to operator in JavaScript will also return
true
. This is because10
is equal to10
. - The final comparison will return
false
since10
is greater than5
.
console.log(10 <= 20);
console.log(10 <= 10);
console.log(10 < 5);
Below you can see the result of the above comparison operators in JavaScript.
true
true
false
Greater Than Operator (>
)
JavaScript’s greater than operator (>
) is the opposite of the less-than operator. Therefore, this comparison operator will return true when the left-side operand is greater than the right side.
If the values are equal, then the greater than operator returns false
.
With the example below, you can see how the greater than comparison operator works within JavaScript
- As
20
is greater than10
, the first comparison will returntrue
. - Since
20
is equal to20
, the second comparison will returnfalse
. 15
is less than20
, so the final comparison will also returnfalse
.
console.log(20 > 10);
console.log(20 > 20);
console.log(15 > 25);
Below you can see the result of the above usages of the greater than comparison operator in JavaScript.
true
false
false
Greater Than or Equal To Comparison Operator (>=
) in JavaScript
The final JavaScript comparison operator we will be exploring is the greater than or equal to operator (>=
).
This operator will return true
when the left-side value is either greater than or equal to the right side.
To showcase the behavior of this operator, let us use the same examples as we did in the previous operator. Thanks to us using the “console.log()
” function, we will can see what each comparison returns.
- The first example will return
true
since20
is greater than10
. - Since we are using the greater than or equal to operator, the second example will also return
true
. The reason for this is that20
is equal to20
. - The final comparison will return
false
since15
is not greater than or equal to25
.
console.log(20 >= 10);
console.log(20 >= 20);
console.log(15 >= 25);
The text below shows you the output you should get from the above JavaScript example.
true
true
false
Conclusion
Throughout this guide, we have shown you the various comparison operators supported by JavaScript.
Each comparison operator is incredibly useful and is a core part of writing useful conditional if statements.
Please comment below if you have any questions about using comparison operators in JavaScript.
We also have numerous other JavaScript tutorials if you want to learn more. In addition to our JS tutorials, we have a wealth of guides for other programming languages.