JS Comparison

JavaScript Comparison Operators

The comparison operators in JavaScript compare two variables or values and return a boolean value, either true or false based on the 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.

List of JavaScript Comparison Operators

There are eight comparison operators in JavaScript to perform different types of comparison. Here is a table explaining each comparison operator:

How Comparison is Done (Type Coercion)

If both operands are of the same type, the comparison operators compare the values directly. However, if the operands are of different types, JavaScript performs 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. 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 a numeric value, it is converted to a number type.
• If the string contains non-numeric values as well, it will be converted to NaN.
• If the string is empty, it is converted to zero (0).

Dealing with Falsy Values

There are some falsy values in JavaScript. JavaScript deals with these falsy values differently while performing comparisons. Following are the falsy values:

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

All comparison operators (except === and !==) convert false and empty strings to zero before performing comparison.

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

JavaScript Equality (==) Operator

The "equality" operator checks if the values 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 compares the operands.

Let's look at some examples of comparison with no type conversion (both operands are of the same type):

const a = 10;
const b = 20;
console.log(a == 10); // true
console.log(a == b);  // false 
console.log("Hello" == "Hello"); // true

Now let's check some examples of comparison with type conversion (operands are of different types):

console.log(5 == '5'); // true
console.log(0 == false); // true
console.log(0 == ''); // true

const a = 10;
const b = 20;
let result = (a == b);
console.log("(a == b) => " + result);

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 the same type.

In the example below, two values of the same type are compared for an inequality check:

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

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

console.log(10 != '10'); // false
console.log(0 != false); // false

const a = 10;
const b = 20;
let result = (a != b);
console.log("(a != b) => " + result);

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 the same type.

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

console.log(10 === 10); // true
console.log(10 === 20); // false
console.log('Hello' === 'Hello'); // true
console.log(10 === '10'); // false
console.log(0 === false); // false

const a = 10;
const b = 20;
let result = (a === b);
console.log("(a === b) => " + result);

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 the same type but not equal, or if they are of different types.

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

console.log(10 !== 10); // false
console.log(10 !== 20); // true
console.log('Hello' !== 'Hello'); // false
console.log(10 !== '10'); // true
console.log(0 !== false); // true

const a = 10;
const b = 20;
let result = (a !== b);
console.log("(a !== b) => " + result);

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.

console.log(20 > 10); // true
console.log(10 > 10); // false
console.log("ab" > "aa"); // true
console.log(10 > '5'); // true

const a = 10;
const b = 20;
let result = (a > b);
console.log("(a > b) => " + result);

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.

console.log(10 >= 5); // true
console.log(5 >= 5); // true
console.log("ab" >= "aa"); // true
console.log(10 >= '5'); // true

const a = 10;
const b = 20;
let result = (a >= b);
console.log("(a >= b) => " + result);

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.

console.log(10 < 20); // true
console.log(5 < 5); // false
console.log("ab" < "aa"); // false
console.log(10 < '5'); // false

const a = 10;
const b = 20;
let result = (a < b);
console.log("(a < b) => " + result);

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.

console.log(10 <= 20); // true
console.log(5 <= 5); // true
console.log("ab" <= "aa"); // false
console.log(10 <= '5'); // false

const a = 10;
const b = 20;
let result = (a <= b);
console.log("(a <= b) => " + result);

Comparing null, undefined, and NaN

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

console.log(0 == null); // returns false
console.log(0 == undefined); // returns false
console.log(0 == NaN); // returns false

null and undefined are weakly equal:

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

The unique behavior of NaN: The type of NaN is a number, but it is not equal to zero. Interestingly, NaN is not even equal to itself.

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