JavaScript Comparison Operators

javaScript comparison operators examples; In this tutorial, you will learn everything about JavaScript comparison operators.

JavaScript Comparison Operators

The javascript comparison operators compare two operands value and return the result in boolean form( true or false).

You can use the following js comparison operators to compare two operands(string, number, etc) value.

  • < less than
  • <= minus than, or equal to
  • > greater than
  • >= greater than, or equal to
  • == equal to
  • != not equal to
  • === strict equal to
  • !== strict not equal to

List of JS Comparison Operators

The following table illustrates the JavaScript comparison operators:

OperatorsDescription
==Compares the equality of two operands without considering type.
===Compares equality of two operands with type.
!=Compares inequality of two operands.
>Checks whether left side value is greater than right side value. If yes then returns true otherwise false.
<Checks whether left operand is less than right operand. If yes then returns true otherwise false.
>=Checks whether left operand is greater than or equal to right operand. If yes then returns true otherwise false.
<=Checks whether left operand is less than or equal to right operand. If yes then returns true otherwise false.

As mention above, a comparison operator returns result in Boolean form (true or false).

See the following example:

let a = 30 > 10; // true
let b = 50 < 10; // false
let c = 20 == 20; // true

1: Comparing numbers

If both operands are numbers, JS comparison operators will perform a numeric comparison.

See the following example:

let a = 10,
    b = 20;
console.log(a >= b);  // false
console.log(a == 10); // true

In this example, have two variables, a is 10b is 20.  The a>=b expression returns false and a==10 expression returns  true.

2: Comparing strings

When both provided operands are strings, JavaScript compares the character codes numerically one by one in the string.

let name1 = 'hello',
    name2 = 'js';
let result = name1 < name2;

console.log(name1 == 'hello'); // true
console.log(result); // true

if compare two strings in JavaScript, it compares character codes numerically and may receive an unexpected result.

See the following example:

let a = 'apple',
    b = 'Banana';
let result = b < a;
console.log(result); // true

In this example, b is less than a.  Because the Banana string letter B has the character code 66 while the apple string letter a has the character code 97.

If you want to fix this problem and compare string equally. First of you need to convert the string into a common format, Either lowercase or uppercase and after that compare.

See the following example:

let a = 'Hello',
    b = 'JS';
let res = a.toUpperCase() < b.toUpperCase();
console.log(res); // true

JavaScript toUpperCase() is a method is used to convert the string characters into uppercase.

3: Comparing a number with a string value

If one operand is a number and the second one is string, JavaScript converts the non-numeric operand to a number and evaluate comparison numerically.

console.log(15 < '30'); // true

In this example, the string '30'is converted to 30 and compared with the number 15.

4: Comparing an object with a non-object

If an operand is an object, JavaScript calls the valueOf() method of that object to get the value for comparison. If the object doesn’t have the valueOf() method, JavaScript then calls the toString() method and uses the returned value for comparison. See the following example:

let apple = {
  valueOf: function() {
    return 10;
  }
};

let orange = {
  toString: function() {
    return '20';
  }
};
console.log(apple > 10); // false
console.log(orange == 20); // true

In this first comparison, the apple object has the valueOf() method that returns 10, therefore, JavaScript uses 10 for comparison. In the second comparison, JavaScript first calls the valueOf() method. However, the orange object doesn’t have the valueOf() method so JavaScript calls the toString() method to get the returned value of 20.

5: Comparing a Boolean with different values

If one operand is a Boolean and the second one is different data types in JavaScript. First of all, convert operands value into the same data type and compares converted operands values with the different operands.

Note:- true will convert to 1 and false will convert to 0.

console.log(true > 0); // true
console.log(false < 1); // true
console.log(true > false); // true
console.log(false > true); // false
console.log(true >= true); // true
console.log(true <= true); // true
console.log(false <= false); // true
console.log(false >= false); // true

6: Comparing null and undefined

In JavaScript, null equals undefined. It means that the following expression returns true.

console.log(null == undefined); // true

7: Comparing NaN with number values

If either operand is NaN, then the equal operator(==) returns false.

console.log(NaN == 1); // false

Even

console.log(NaN == NaN); // false

The not-equal (!=) operator returns true when comparing the NaN with another value:

console.log(NaN != 1); // true

And also

console.log(NaN != NaN); // true

8: Strict equal (===) and not strict equal (!==)

In the above mention table, available strict equal ( ===) and not strict equal  ( !==) comparison operators.

OperatorMeaning
===strict equal
!==not strict equal

The strict equal and not strict equal operators in js, act like the equal and not equal operator in js. Except that they do not convert the operand before comparing using js comparison operators.

See the following example:

console.log("10" == 10); // true
console.log("10" === 10); // false

Here,

  • In the first comparison, it converts the string into the number and performs the comparing between operands.
  • However, in the second comparison, use strict equal operator ( ===), it do not convert the string before comparison.

Conclusion

In this tutorial, you have learned how to use the JavaScript comparison operators to compare operands value.

Recommended JavaScript Tutorial

Recommended:-JavaScript Arrays

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

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