JavaScript - Comparison Operators

JavaScript Comparison Operators

The comparison operators in JavaScript compare two variables or values and return a boolean value, either true or false based on comparison result. For example, we can use the comparison operators to check whether two operands are equal or not.

The comparison operators are used in logical expressions. A logical expression is evaluated to either true or false.

The comparison operators are binary operators as they perform operations on two operands. The operands can be numerical, string, logical, or object values.

There are eight comparison operators in JavaScript to perform different types of comparison. Here, we have given a table explaining each comparison operator with the example.

Operator	Description	Example
==	Equal	x == y
!=	Not Equal	x != y
===	Strict equality (equal value and equal type)	x === y
!==	Strict inequality (not equal value or not equal type)	x !== y
>	Greater than	x > y
<	Less than	x < y<
>=	Greater than or Equal to	x >= y
<=	Less than or Equal to	x <= y

How comparison is done?

If both operands are of same type, the comparison operators compare the values. However, if the operands are of different types, JavaScript perform appropriate type conversion for the comparison. This is known as type coercion.

The comparison is done by checking the numerical values of the operands if both the operands are numbers. The strings are compared based on lexicographical ordering, using Unicode values. The following type coercion is done when a string is compared with a number.

If the string contains only numeric value, it is converted to number type.
If the string contains non-numeric values as well, it will be converted to NaN.
If string is empty, it is converted to zero.

The strict equality (===) and strict inequality (!==) operators perform strict comparison. These operators don't perform type conversion before performing comparison operation.

Dealing with falsy values

There are some falsy values in JavaScript. JavaScript deals with these falsy values differently while performing the comparison. Followings are the flasy values −

0 (zero)
false
' ' or " " (Empty String)
null
undefined
NaN

All comparison operators (excepts === and !==) converts false and empty string to zero before performing comparison.

In addition to above, the less and, greater than operators (<, <=, >, >=) convert null to zero and undefined to NaN.

JavaScript Equality (==) Operator

The "equality" operator checks if the value of two operands are equal or not. It returns true if the operands are equal, otherwise it returns false. If the operands are of different types, it performs type conversion and then compare the operands.

Let’s look at some examples of comparison with no type conversion. The both operands are of same type.

const a = 10;
const b = 20;
a == 10; //true
a == b; // false 
"Hello" == "Hello"; // true

Now let’s check some example of comparison with type conversion. Here the operands are of different types.

5 == '5'; // true
0 == false; // true
0 == ''; // true

In the first example above, '5' is converted to 5 (string to number conversion). The false and empty string (' '), are converted to zero (0) before comparison.

Example

The following code shows how to use equality operator in JavaScript −

<html>
<body>
<div id="output"></div>
<script>
  const a = 10;
  const b = 20;
  let result = (a == b);
  document.getElementById("output").innerHTML = "(a == b) => " + result;
</script>
<p> Set the variables to different values and then try...</p>
</body>
</html>

JavaScript Inequality (!=) Operator

The "inequality" operator checks if the values of two operands are not equal. It returns true if the operands are not equal, otherwise it returns false. Same as the equality operator, type conversion is performed if the operands are not of same type.

In the example below two values of same type are compared for inequality check. If the values are not equal, the inequality operator will return true.

10 != 10; // false
10 != 20; // true
"Hello" != "Hello"; // false

Let’s check for inequality when the operands are of different types

10 != '10'; // false
0 != false; // false

Here in first example, '10' is type casted to 10. Here string is converted to number type. In second example, false (Boolean value) is converted to zero (number).

Example

The following code shows how to use inequality operator in JavaScript.

<html>
<body>
<div id="output"></div>
<script>
  const a = 10;
  const b = 20;
  let result = (a != b);
  document.getElementById("output").innerHTML = "(a != b) => " + result;
</script>
<p> Set the variables to different values and then try...</p>
</body>
</html>

JavaScript Strict Equality (===) Operator

The "strict equality" operator checks whether the values and data types of the two operands are equal or not. It returns true if both operands are equal and of same type.

In other words, it checks the equality of the operands without the type conversion. If the operands are of different types, it returns false without further checking the value.

10 === 10; // true
10 === 20; // false
'Hello'==='Hello'; // true
10 === '10'; // false
0 === false; // false

Example

The following code shows how to use strict equality operator in JavaScript.

<html>
<body>
<div id="output"></div>
<script>
  const a = 10;
  const b = 20;
  let result = (a === b);
  document.getElementById("output").innerHTML = "(a === b) => " + result;
</script>
<p> Set the variables to different values and then try...</p>
</body>
</html>

Strict Inequality (!==) Operator

The "strict inequality" operator checks whether the two operands are not equal in value or type. It returns true if the operands are of same type but not equal or are of different types.

Same as strict equality operator, it also first checks the inequality of operands without type conversion. If the operands are of different type, it will return true without further checking the value.

10 !== 10; //returns false
10 !== 20; // returns true
'Hello'!=='Hello'; // returns false
10 !== '10'; //return true
0 !== false; //returns true

Example

The following code shows how to use strict inequality operator in JavaScript.

<html>
<body>
<div id="output"></div>
<script>
  const a = 10;
  const b = 20;
  let result = (a !== b);
  document.getElementById("output").innerHTML = "(a !== b) => " + result;
</script>
<p> Set the variables to different values and then try...</p>
</body>
</html>

JavaScript Greater Than (>) Operator

The "greater than" operator checks if the value of the left operand is greater than the value of the right operand. If yes, it returns true otherwise it returns false.

20 > 10; // true
10 > 10; // false
"ab" > "aa"; // true
10 > '5'; // true

Example

The following code shows how to use greater than operator in JavaScript −

<html>
<body>
<div id="output"></div>
<script>
  const a = 10;
  const b = 20;
  let result = (a > b);
  document.getElementById("output").innerHTML = "(a > b) => " + result;
</script>
<p> Set the variables to different values and then try...</p>
</body>
</html>

Greater Than or Equal (>=) Operator

The "greater than or equal" operator checks if the value of the left operand is greater than or equal to the value of the right operand. If yes, it returns true otherwise false.

10 >= 5; // true
5 >= 5; // true
"ab" >= "aa"; // true
10 >= '5'; // true

Example

The following code shows how to use greater than or equal to operator in JavaScript.

<html>
<body>
<div id="output"></div>
<script>
  const a = 10;
  const b = 20;
  let result = (a >= b);
  document.getElementById("output").innerHTML = "(a >= b) => " + result;
</script>
<p> Set the variables to different values and then try...</p>
</body>
</html>

JavaScript Less Than (<) Operator

The "less than operator" returns true if the value of the left operand is less than the value of the right operand, otherwise it returns false.

10 < 20; // true
5 < 5; // false
"ab" < "aa"; // true
10 < '5'; // false

Example

The following code shows how to use less than operator in JavaScript −

<html>
<body>
<div id="output"></div>
<script>
  const a = 10;
  const b = 20;
  let result = (a < b);
  document.getElementById("output").innerHTML = "(a < b) => " + result;
</script>
<p> Set the variables to different values and then try...</p>
</body>
</html>

JavaScript Less Than or Equal (<=) Operator

The less than or equal operator checks if the value of the left operand is less than or equal to the value of the right operand. If yes, then the condition becomes true.

10 <= 20; // true
5 <= 5; // true
"ab" <= "aa"; // false
10 <= '5'; // false

Example

The following code shows how to use less than or equal operator in JavaScript −

<html>
<body>
<div id="output"></div>
<script>
  const a = 10;
  const b = 20;
  let result = (a <= b);
  document.getElementById("output").innerHTML = "(a <= b) => " + result;
</script>
<p> Set the variables to different values and then try...</p>
</body>
</html>

Comparing null, undefined and NaN

In JavaScript, null, undefined and NaN are the falsy values that are not converted to zero (0) for the comparison.

0 == null; // returns false
0 == undefined; // returns false
0 == NaN; // returns false

null and undefined are weekly equal.

null == undefined; // returns true
null === undefined; // returns false

The type of NaN is number but it is not equal to zero. Interestingly NaN is not equal to NaN itself.

NaN == NaN; // returns false