JavaScript Comparison Operators Tutorial

In this section, we will learn what the comparison operators are and how to use them in JavaScript.

What is Comparison Operator in JavaScript?

We do use comparison in real life pretty much every day, if not every hour! For example, when we want to buy a laptop, we compare multiple brands with each other and the one that attracts us the most (price based, design based, etc.) We buy that one. Or when we want to buy fruits, we compare their colors, their freshness and choose those that look healthier.

In JavaScript, we use comparison as well.

Basically, we compare the value of a variable with another one or the values of multiple variables with each other and based on the result, we decide to whether part of our program should be run.

This is where comparison operators can help.

List of Comparison Operators in JavaScript

Here’s the list of comparison operators that can be used in the JavaScript programming:

Operator	Symbol
Strict Equality	===
Negate Strict Equality	!==
Equal	==
Negate Equal	!=
Greater than	>
Less than	<
Greater Than or equal to	>=
Less than or equal to	<=

Comparison operators are mostly used within conditional-statements. For example, if-statement, while-loop, for-loop, etc.

JavaScript if Statement

Before we get into the details of each of these operators, we need to give an introductory explanation about one of these conditional statements so that we can use it in the following examples.

For this reason, we start with an introduction to the `if` statement.

Note: in this section, we only give a general view of what this statement does. But the `if` statement is explained in greater details in the if-statement section.

The meaning that this statement has in the real world also applies inside the JavaScript language as well.

For example, in the real world we use the `if` statement to say things like: `if I have enough money, I’ll buy that product`. Similarly, in JavaScript, we use `if` statement to check an expression. Also, each `if` statement has a body that we can put instructions (codes) in it. The execution of the body of an `if` is dependent on the result of its expression. The result of this expression is either `true` or `false`. If the result was true, then the body of the `if` statement will run. Otherwise, this body is skipped.

Inside this expression, we can use the operators mentioned in the table at the beginning of this section.

JavaScript if Statement Syntax:

Alright, before we get into more details, first let’s see the structure of an `if` statement:

if (condition){
//body of the if-statement where code is and will be run if the condition is true
}else{
//the code here will only run if the condition is not true.
}

`if`: We use the keyword `if` to create an `if` statement.
`()`: The condition that we want to be checked is put in the parentheses after the `if` statement.

This is where the comparison operators are useful.

For example, the equal `==` operator can be used in the parentheses to define whether the value of a variable is equal to another value. If the result of this expression is true, then the body of the `if` statement will run, otherwise it will be skipped.

`{}`: the body of an `if` statement starts from open brace `{` and ends at the closing brace `}` that comes after the parentheses. And within this body, we put the codes and instructions that want to be run if the condition of the `if` statement is true.
`else`: the else keyword comes after the body of the `if` statement and is used to put another set of instructions that only will run if the condition that is set for the `if` statement results false. You can think of the instructions set for the `else` statement as the plan B.

Note: the body of `else-statement` is within the braces that come after the `else` keyword. Also, this `else-statement` does not have parentheses to put a new condition.

Example: using JavaScript if Statement

const age = 20;
if (age > 21) {
    console.log("Yes the age is greater than 21.");
} else {
    console.log("No the age is less than 21.");
}

Output:

No the age is less than 21.

Here, the expression in the parentheses of the `if` statement is: `age>21`.

Basically, we used the `greater than` operator to check and see if the value of the variable `age` is greater than the value `21`. Now, because this value is not greater than the value 21, the result of the expression is false. This means the body of the `if` statement is skipped and the body of the `else` statement ran instead.

JavaScript Strict Equality `===` Operator

The strict equality is used to compare two operands based on their values and their types. If the types and the values of operands that are involved in the operation are the same, then the result of the comparison will be true otherwise, the value false will return.

For example:

20===20; // true

The result of this comparison is true. But if either of involved operands had a type different from the other, the result will be false.

Example:

"20" === 20; // false

Strict Equality `===` Operator Syntax:

LeftOperand === RightOperand

JavaScript Coercion Operation on the Strict Equality `===` Operator:

These are the rules that the execution engine follows when using the Strict Equality operator:

If the type of the left operand is different from the type of the right operand, then return `false`.
If the types are the same:
If the left operand is NaN then return `false`.
If the right operand is NaN then return `false`.
If the left and right operands are the same value, then return `true`.
If the left operand is `+0` and the right operand is `-0`, return `true`.
If the left operand is `-0` and the right operand is `+0`, return `true`.
If the values are not the same, then return false.

Example: using strict equality `===` operator in JavaScript

if (+0 === -0) {
    console.log("Yes, the value +0 is equal to the value -0");
} else {
    console.log("No, they are not the same");
}

Output:

Yes, the value +0 is equal to the value -0

In short: The Strict Equality operator does not allow the coercion operation to happen when the types are different.

JavaScript Negate Strict Equality `!==` Operator

This operator is on the opposite side compared to the Strict Equality operator `===`.

This means:

If the type of the left operand is different from the type of the right operand, then return `true`.
If the types are the same:
If the left operand is NaN then return `true`.
If the right operand is NaN then return `true`.
If the left and right operands are the same value, then return `false`.
If the left operand is `+0` and the right operand is `-0`, return `false`.
If the left operand is `-0` and the right operand is `+0`, return `false`.
If the values are not the same, then return true.

Negate Strict Equality `!==` Operator Syntax:

LeftOperand !== RightOperand

Example: using negate strict equality `!==` operator in JavaScript

if (+0 !== -0) {
    console.log("Yes, the value +0 is equal to the value -0");
} else {
    console.log("No, they are not the same");
}

Output:

No, they are not the same.

JavaScript Equal `==` Operator

The equal `==` operator is used to see if the value of the involved operands is the same or not. If the type of involved operands is not the same, the execution engine will try to coerce the types. After coercing, it will then check to see if they are equal in value or not.

In equality, it will return `true` otherwise the value `false` will return.

Example:

"20" == 20 //true

"18" == 20 //false

Equal `==` Operator Syntax:

LeftOperand == RightOperand

JavaScript Coercion Operation on the Equal `==` Operator:

Here are the steps that the execution engine will take to run the comparison between the involved operands:

If the type of both left and right operands is the same, then run the `Strict Equality Comparison ===` operator.

This means if we have a comparison like `20 ==20`, behind the scene the execution engine will use the `20===20` and run the comparison. This is because the types are the same.

If the left operand is `null` and the right operand is `undefined` then the result is `true`.

Example:

null == undefined // true

If the left operand is `undefined` and the right operand is `null` then the result is `true`.

undefined == null //true

If the left operand is of type `Number` but the right operand is of type `String` then the execution engine will run the `ToNumber` operation on the right operand and coerce that value into type `Number`.

Example:

20 == "20"

The expression above behind the scene will become: 20 ==20 and so the result becomes `true`.

If the left operand is of type `String` but the right operand is of type `Number` then the execution engine will run the `ToNumber` operation on the left operand and coerce the value into type `Number`.

Example:

"455" == 455

The expression above behind the scene becomes: 455 == 455 so the result of this comparison is true.

If either type of the left or right operand is Boolean (like true or false) then the execution engine will run the `ToNumber` operation on the left or right operand and coerce the value into Number type.

Example:

true == "1"

First the value `true` becomes `1` after the coercion. So we will have this comparison:

1 =="1"

Here the right operand is of type `String`, so the `ToNumber` operation will be run on the right operand as well.

The final comparison will look like this:

1==1

So the end result will be true

Example:

if (false == 0) {
    console.log("Yes, the value false and the value 0 are equal");
} else {
    console.log("No, they are not the same");
}

Output:

Yes, the value false and the value 0 are equal

If either type of left or right operand is `Object` but the other operand is either `String`, `Number`, `BigInt` or `Symbol`, the execution engine will run the `ToPrimitive` operation on the operand that is of type `Object`.

Example:

const obj = {
  toString(){
    return 90;
  },
  valueOf(){
    return 100;
  }
}
  if (obj == 100) {
      console.log("Yes, the object obj is equal to the value 100");
  } else {
      console.log("No, they are not the same");
  }

Output:

Yes, the object obj is equal to the value 100

If none of the rules mentioned above applies to the comparison, then return false.

JavaScript Negate Equal `!=` Operator

This operator is on the contrary to the equal `==` operator. This means every step mentioned in the `Equal == Operator` still applies on the operation, but at the end, the result, whatever it is, will be negated.

Negate Equal `!=` Operator Syntax:

LeftOperand != RightOperand

Example: using negate equal `!=` operator in JavaScript

const obj = {
  toString(){
    return 90;
  },
  valueOf(){
    return 100;
  }
}
  if (obj != 100) {
      console.log("Yes, the object obj is equal to the value 100");
  } else {
      console.log("No, they are not the same");
  }

Output:

No, they are not the same.

Another example:

"20" != 20 // false

We know that if we compare the two operands “20” and 20 for equality via the `==` operator, the result will be true, but because we used the negate equality operator, the result becomes false.

JavaScript Greater Than > Operator

This operator is used to see if the operand on the left side is greater than the operand on the right side. If the left operand is greater than the right operand, then the result will be true, otherwise the value false will return instead.

Greater Than > Operator Syntax:

LeftOperand > RightOperand

JavaScript Coercion Operation on the Greater Than `>` Operator:

Here are the steps that the JavaScript will follow when it sees a Greater Than `>` Operator:

If the both involved operands are not of type `String`, the execution engine will first run the `ToPrimitive` operation on both involved values. If the returned type of either left or right operand is a non-String type, then the execution engine will run the `ToNumber` operation on both operands.

Example:

const obj = {
  toString(){
    return 90;
  },
  valueOf(){
    return 100;
  }
}
  if (obj > 95) {
      console.log("Yes, the object obj is greater than the value 95");
  } else {
      console.log("No, the value 95 is greater than the obj object");
  }

Output:

Yes, the object obj is greater than the value 95

The execution engine in this program first ran the `ToPrimitive` operation on both operands.

So the expression from:

obj>95

Becomes:

100 > 95

Note: running the `ToPrimitive` operation on a non-object type will return the value itself.

After that, the `ToNumber` operation will be run on the operands.

Now because in this example both operands are of type Number, no change will happen and the same value will return.

At the end, the result of comparing `100>95` will be `true` because the value 100 is actually greater than the value 95.

But if both involved operands are of type `String` the execution engine will simply run lexicographic (natural alphabetic) comparison on the characters.

Example:

const obj = {
  toString(){
    return 90;
  },
  valueOf(){
    return 100;
  }
}
  if ('b' > 'a') {
      console.log("Yes, the character 'b' is greater than the character 'a'");
  } else {
      console.log("No, the character 'b' is not greater than the character 'a'");
  }

Output:

Yes, the character 'b' is greater than the character 'a'

JavaScript Less Than < Operator

This operator is on the opposite side of Greater-Than `>` Operator. Which means this operator checks to see if the operand on the left side is lesser compared to the operand on the right side. If it was, then the result is true, otherwise the value false will return.

Note: For this operator, the JavaScript runs the same type of operations (Coercions) that it does for the `>` operator.

Less Than < Operator Syntax:

LeftOperand < RightOperand

Example: using Less Than < operator in JavaScript

const val = "20"
  if (val < 15) {
      console.log("Yes, the value of the `val` is less than the value 15");
  } else {
      console.log("No, the value of the `val` is bigger than the value 15");
  }

Output:

No, the value of the `val` is bigger than the value 15

So here in the expression:

val < 15

Because both values are not of type `String`, the engine will run the `ToPrimitive` operations on both operands and then run the `ToNumber` operation on them.

At the end, the final expression looks like this:

20<15

So the result is false.

JavaScript Greater Than or Equal To >= Operator

This operator is the combination of equal `==` and Greater-Than `>` operators.

Basically, via this operator, the operands are checked for two conditions:

Is the left operand greater than the right operand? If yes, then return true.
Are the two operands equal in values? If yes, then return `true`.

If both of these conditions resulted false, then in that case the final result will be `false` as well.

Note: For this operator, the JavaScript runs the same type of operations (coercions) that it does for the `<` operator.

Greater Than or Equal To >= Operator Syntax:

LeftOperand >= RightOperand

Example: using greater than or equal to >= operator in JavaScript

var height = 4;
  if (height >=5){
      console.log("The height is more or equal to 5 inches.");
  }else{
      console.log("The height is less than 5 inches.");
  }

Output:

The height is less than 5 inches.

JavaScript Less Than or Equal To <= Operator

This operator is the combination of equal `==` and Less-Than `<` operators.

Basically, via this operator, the operands are checked for two conditions:

Is the left operand lesser than the right operand? If yes, then return true.
Are the two operands equal in values? If yes, then return `true`.

If both of these conditions resulted false, then in that case the final result will be `false` as well.

Note: For this operator, the JavaScript runs the same type of operations (coercions) that it does for the `<` operator.

Less Than or Equal To <= Operator Syntax:

LeftOperand <= RightOperand

Example: using Less Than or Equal To <= operator in JavaScript

var height = 5;
  if (height >=5){
      console.log("The height is more or equal to 5 inches.");
  }else{
      console.log("The height is less than 5 inches.");
  }

Output:

The height is more or equal to 5 inches.

Difference between == and === in JavaScript: == vs ===

As you saw in this section, the main difference between strict equal `===` operator and equal ==` operator is in the type coercion!

Basically, when it comes to strict equal `===` operator, if both data types of the involved operands are not the same, the result will be false immediately!

But when it comes to the equal `==` operator, JavaScript execution engine will try to coerce the operands if they are not of the same type and then will compare the values to see if they are equal or not.

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

JavaScript Comparison Operators Tutorial

What is Comparison Operator in JavaScript?

List of Comparison Operators in JavaScript

JavaScript if Statement

JavaScript if Statement Syntax:

Example: using JavaScript if Statement

JavaScript Strict Equality `===` Operator

Strict Equality `===` Operator Syntax:

JavaScript Coercion Operation on the Strict Equality `===` Operator:

Example: using strict equality `===` operator in JavaScript

JavaScript Negate Strict Equality `!==` Operator

Negate Strict Equality `!==` Operator Syntax:

Example: using negate strict equality `!==` operator in JavaScript

JavaScript Equal `==` Operator

Equal `==` Operator Syntax:

JavaScript Coercion Operation on the Equal `==` Operator:

JavaScript Negate Equal `!=` Operator

Negate Equal `!=` Operator Syntax:

Example: using negate equal `!=` operator in JavaScript

JavaScript Greater Than > Operator

Greater Than > Operator Syntax:

JavaScript Coercion Operation on the Greater Than `>` Operator:

JavaScript Less Than < Operator

Less Than < Operator Syntax:

Example: using Less Than < operator in JavaScript

JavaScript Greater Than or Equal To >= Operator

Greater Than or Equal To >= Operator Syntax:

Example: using greater than or equal to >= operator in JavaScript

JavaScript Less Than or Equal To <= Operator

Less Than or Equal To <= Operator Syntax:

Example: using Less Than or Equal To <= operator in JavaScript

Difference between == and === in JavaScript: == vs ===

Top Technologies

Javascript

Kotlin

Python

Categories

About Us

Contact Us