Comparison Operators in JavaScript, Relational, Example

Comparison operators in JavaScript are those operators that are used for comparing between two numeric values, strings, objects, or two quantities.

The comparison operators determine the relationship between them by comparing operands (or values). Therefore, we also know the comparison operators as relational operators in Java.

For example, to know which is a greater number, comparing the age of two persons, comparing the price of two items, etc.

We can perform these kinds of comparisons with the help of comparison (relational) operators.

The comparison operator requires two operands. The result of all comparison operators is a boolean value, either true or false.

Comparison operators in JavaScript are mainly used to create conditions in decision-making statements or loops in order to perform actions only when a certain condition is met.

For example:

if(condition_is_true) 
    statement to be executed;
// We can implement this statement in the JavaScript program like this:
   if(x > y) 
      document.write(x);

Types of Comparison Operators in JavaScript

JavaScript supports eight types of relational or comparison operators. They are listed in the below table:

The above eight operators provide the foundation for comparing data in JavaScript. Each operator is always a combination of two constants, variables, expressions, or a mix of these.

[adinserter block=”5″]

Let’s take an example program based on the concepts of all comparison operators.

Program code 1:

<script>
  let x = 10;
  let y = 4;
  document.write("x = "+x+ " y = " +y, "<br>");
  document.write("(x > y): " +(x > y), "<br>");
  document.write("(x < y): " +(x < y), "<br>");

  document.write("(x >= y): " +(x >= y), "<br>");
  document.write("(x <= y): " +(x <= y), "<br>");
  document.write("(x != y): " +(x != y));
</script>

Output:
      x = 10 y = 4
      (x > y): true
      (x < y): false 
      (x >= y): true
      (x <= y): false
      (x != y): true

Let’s create a JavaScript program where we will compare a number to a string. In such a case, JavaScript interpreter automatically converts the string to a number.

Program code 2:

<script>
  let x = 5;
  let y = "5";
  document.write("x = "+x+ " y = " +y, "<br>");
  document.write("(x > y): " +(x > y), "<br>");
  document.write("(x < y): " +(x < y), "<br>");
  document.write("(x >= y): " +(x >= y), "<br>");

  document.write("(x <= y): " +(x <= y), "<br>");
  document.write("(x != y): " +(x != y), "<br>");
  document.write("(x == y): " +(x == y), "<br>");
  document.write("(x === y): " +(x ===y));
</script>

Output:
    x = 5 y = 5
   (x > y): false
   (x < y): false 
   (x >= y): true
   (x <= y): true
   (x != y): false
   (x == y): true
   (x === y): false

In the preceding program, 5 ==”5″ is true because “5” string is automatically converted into number. Whereas, 5 === “5” is false because both operands are not of the same type.

Let’s create a JavaScript program in which we will compare a boolean with a number. When one of the operands is boolean, it is automatically converted to 1 for true and 0 for false.

Program code 3:

<script>
  let x = 0;
  let y = false;
  document.write("x = "+x+ " y = " +y, "<br>");
  document.write("(x > y): " +(x > y), "<br>");
  document.write("(x < y): " +(x < y), "<br>");
  document.write("(x >= y): " +(x >= y), "<br>");

  document.write("(x <= y): " +(x <= y), "<br>");
  document.write("(x != y): " +(x != y), "<br>");
  document.write("(x == y): " +(x == y), "<br>");
  document.write("(x === y): " +(x ===y));
</script>

Output:
    x = 0 y = false
   (x > y): false
   (x < y): false 
   (x >= y): true
   (x <= y): true
   (x != y): false
   (x == y): true // because false is equivalent to 0.
   (x === y): false // because both operands are not of the same type.

Note: The strict equality operator === and !== are used when the operands are of the same type.

Try It Yourself

Program code 4:

<script>
  let x = 0;
  let y = true;
  document.write("x = "+x+ " y = " +y, "<br>");
  document.write("(x > y): " +(x > y), "<br>");
  document.write("(x < y): " +(x < y), "<br>");
  document.write("(x >= y): " +(x >= y), "<br>");

  document.write("(x <= y): " +(x <= y), "<br>");
  document.write("(x != y): " +(x != y), "<br>");
  document.write("(x == y): " +(x == y), "<br>");
  document.write("(x === y): " +(x ===y));
</script>

Comparison Operators and Data Conversion

We can also have two operands of different data types within a single comparison expression. In this case, JavaScript always tries to convert each operand into a number before running the comparison. Let’s understand different cases with examples.
[adinserter block=”2″]
Case 1: If one operand is string and another is number, JavaScript tries to convert the string into a number. For example:

Program code 5:

<script>
   var num1 = 12;
   var num2 = "12";
   var result = num1 == num2;
   document.write("Result: " +result);
</script>

Output:
     Result: true

In this program, string “12” gets converted to a number 12. Therefore, the comparison num1 == num2 return true.

Case 2: If the string cannot be converted into a number, comparison always returns false. For example:

Program code 6:

<script>
  var num1 = 12;
  var num2 = "String";
  var result = num1 == num2;
  document.write("Result: " +result);
</script>

Output:
     Result: false

Case 3: If one operand is boolean and another is a number in an expression, JavaScript converts the boolean to a number, as follows:

• true: This boolean value gets converted to 1.
• false: This boolean value gets converted to 0.

For example, in the below program, the boolean true gets converted to the number 1. Therefore, the comparison num1 == num2 returns true.

Program code 7:

<script>
  var num1 = 1;
  var num2 = true;
  var result = num1 == num2;
  document.write("Result: " +result);
</script>

Output:
     Result: true

Case 4: If one value is boolean and another is a string, JavaScript attempts to convert boolean into a number and converts a string into a number. For example:

Program code 8:

<script>
  var num1 = false;
  var num2 = "0";
  var result = num1 == num2;
  document.write("Result: " +result);
</script>

Output:
    Result: true

In the preceding program, the boolean false gets converted to a number 0 and the string “0” also gets converted to a number 0. Therefore, the comparison num1 == num2 returns true.

Strict Equality (Identity) Operator in JavaScript

The strict equality operator (===) was introduced in JavaScript 1.5 version. It returns true if two operands must be the same data type and must be equal without any data conversion.

The syntax of strict equality operator is as follows:

A === B // Here, A and B are two operands.

For example, a statement 5 === “5” will return false because the value on the left is number and the value on the right is string. Here, values are of different data type.

If we compare two strings using strict equality operator, the strict equality operator will return true only if they have the same sequence of character and same length. For example, the statement “ABc” === “ABc” will return true.

If we compare two boolean values, they will strictly equal if either both of them are true or both of them are false. Let’s take an example program based on the strict equality operator.

Program code 9:

<script>
  var p, q, result;
   p = 5;
   q = 5;
   result = p === q;
  document.write(result, "<br>");

   p = 10;
   q = "10";
   result = p === q;
  document.write(result, "<br>");

   p = 'ABCd'
   q = 'ABCD'
   result = p === q;
  document.write(result);
</script>

Output:
     true
     false
     false

Try It Yourself

Program code 10:

<script>
  var p, q, result;
   p = "Love you";
   q = "Love You";
   result = p === q;
  document.write(result);
</script>

Program code 11:

<script>
  var p, q, result;
   p = (10 + 10);
   q = "20";
   result = p === q;
  document.write(result);
</script>

Non-Identity/Strict Inequality Operator in JavaScript

The non-identity operator (!==) was added in JavaScript 1.5 version. It performs the opposite function to the strict equality operator. It returns true in either of the following cases without any data conversion:

• The two operands are not equal.
• The two operands are not of the same data type.

The syntax of non-identity or strict inequality operator is as follows:

A !== B

Consider the following example program of non-identity operator.

Program code 12:

<script>
  var p, q, result;
   p = (10 + 10);
   q = "20";
   result = p !== q;
  document.write(result);
</script>

Output:
      true

In this program, the operands p and q are not of the same data type. Therefore, it will return true.

Try It Yourself

Program code 13:

<script>
  var p, q, result;
   p = true;
   q = 1;
   result = p !== q;
  document.write(result);
</script>

Program code 14:

<script>
  var p, q, result;
   p = "Love";
   q = "love";
   result = p !== q;
  document.write(result);
</script>

String Comparison in JavaScript

If both operands are strings in an expression, they are compared as strings. JavaScript interpreter compares the ASCII codes for each character in both strings, such as the first character of each string, second character of each string, and so on.

Uppercase letter A is represented in ASCII by the number 65, B by 66, C by 67, and so on. Whereas, lowercase letter a is represented in ASCII code by 97, b by 98, c by 99, and so on.

Keep in mind that string comparison is performed on a strict character by character basis, using the numerical value of each letter of ASCII code.

Let’s take some important example programs based on string comparison in JavaScript.

Program code 15:

<script>
  var p, q, result;
   p = "A";
   q = "B";
   result = p > q;
  document.write(result);
</script>

Output:
       false

Program code 16:

<script>
  var string1 = "Apple";
  var string2 = "Banana";
  var result = string1 < string2;
  document.write(result);
 </script>

Output:
    true

Program code 17:

<script>
  var string1 = "add" < "ab";
  var string2 = "ad" < "ab";
  var result = string1 == string2;
  document.write(result);
</script>

Output:
     true

Try It Yourself

Program code 18:

<script>
  var string1 = "Dhan";
  var string2 = "Dhanbad";
  var result1 = string1 > string2;
  document.write(result1, "<br>");

  string1 = "Dhan ";
  string2 = "Dhanbad";
  var result2 = string1 < string2;
  document.write(result2);
</script>

In this tutorial, you learned eight types of comparison or relational operators in JavaScript and their functions with various example programs. Hope that you will have understood all basic points related to relational operators and practiced all example programs.

In the next tutorial, we will learn logical operators in JavaScript with various example programs.
Thanks for reading!!!
Next ⇒ Logical Operators in JavaScript⇐ PrevNext ⇒