JavaScript Comparison Operators

This tutorial will show you how to use comparison operators within the JavaScript language.

JavaScript Comparison Operators

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 number 1 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 return false 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.

OperatorNameExampleResult
==Equalsx == ytrue if x is equal to y. Types can be different
===Identicalx === ytrue if x is equal to y, and types are identical.
!=Not Equalx != ytrue if x is not equal to y. Types can be different
!==Not Identicalx !== ytrue if x is not equal to y, or if types are different
<Less Thanx < ytrue if x is less than y
<=Less Than or Equal Tox <= ytrue if x is less than or equal to y
>Greater Thanx > ytrue if x is greater than y
>=Greater Than or Equal Tox >= ytrue 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 equals 10. Since these values are equal, the operator will return true.
  • 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" to 10.
  • The final log shows using the comparison operator to compare two values are not the same.

    Since 10 is not equal to 11, this operator will return false.
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 because 10 is not equal to 11.
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 equals 10, the not equal operator will return false.
  • 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 return false.
  • Finally, 10 is not equal to 11, so JavaScript will return true 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 since 10 is equal to 10, 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 because 10 is not equal to 11.
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- than 20.

    Since 10 is less than 20, the less than operator will return true.
  • Secondly, we check whether 10 is less than 10.

    Since these values are equal, the operator will return false.
  • With the final comparison, we check if 10 is less than 5.

    Since 10 is greater than 5, the less-than operator will return false.
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 to 10 being less than 20.
  • Our second use of the less than or equal to operator in JavaScript will also return true. This is because 10 is equal to 10.
  • The final comparison will return false since 10 is greater than 5.
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 than 10, the first comparison will return true.
  • Since 20 is equal to 20, the second comparison will return false.
  • 15 is less than 20, so the final comparison will also return false.
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 since 20 is greater than 10.
  • Since we are using the greater than or equal to operator, the second example will also return true. The reason for this is that 20 is equal to 20.
  • The final comparison will return false since 15 is not greater than or equal to 25.
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.

Leave a Reply

Your email address will not be published. Required fields are marked *