Javascript Comparison Operators

Introduction

JavaScript comparison operators are essential tools that allow you to compare values & make decisions in your code. These operators evaluate expressions & return boolean values - either true or false - based on whether the comparison is true or not. These operators are crucial for tasks like validating user inputs, performing calculations, and managing application logic. Every developer should know how to use comparison operators, which are the basics of more complex programming.

In this article, we'll discuss the different types of comparison operators in JavaScript and how they work with proper examples to understand their use.

JavaScript Comparison Operators

JavaScript comparison operators are used to compare two values & determine the relationship between them. These operators return a boolean value (true or false) based on whether the comparison evaluates to true or not. There are several comparison operators in JavaScript:

- Equality (==)

- Inequality (!=)

- Strict Equality (===)

- Strict Inequality (!==)

- Greater Than (>)

- Greater Than or Equal (>=)

- Less Than (<)

- Less Than or Equal (<=)

Point to Remember: Each operator has a specific purpose, and comparing different types of values may give unexpected results if you're not careful. It's important to understand how these operators work and when to use them appropriately in your code.

How is the comparison done?

In JavaScript, when you compare two values using a comparison operator, the comparison is done based on the type & value of the operands. Let’s see how the comparison is performed:

1. If the operands are of the same type, JavaScript compares their values directly:

- For numbers, the comparison is based on their numeric values.

- For strings, the comparison is based on the lexicographical order of the characters.

- For booleans, true is considered greater than false.

2. If the operands are of different types, JavaScript tries to convert them to a common type before comparing:

- If one operand is a number & the other is a string, JavaScript attempts to convert the string to a number.

- If one operand is a boolean, JavaScript converts it to a number (true becomes 1, false becomes 0).

- If one operand is an object & the other is a number or string, JavaScript tries to convert the object to a primitive value using the object's valueOf() or toString() method.

3. After the type conversion (if necessary), the comparison is performed based on the resulting values.

It's important to remember that the equality (==) and inequality (!=) operators perform type coercion before comparing, while the strict equality (===) and strict inequality (!==) operators compare both the type and value without any type coercion.

Dealing with falsy values

In JavaScript, certain values are considered "falsy" because they are evaluated as false when used in a boolean context. These falsy values are:

- false

- 0 (zero)

- "" (empty string)

- null

- undefined

- NaN (Not a Number)

When you compare a value with a falsy value using the equality (==) or inequality (!=) operator, JavaScript performs type coercion before the comparison. This means that falsy values may yield unexpected results if you're not careful.

For example:

console.log(false == 0);
console.log("" == false);
console.log(null == undefined);

You can also try this code with Online Javascript Compiler

Run Code

Output

true
true
true

In these cases, the equality operator (==) performs type coercion & considers the operands as equal because they are both falsy values.

To avoid such ambiguities, it's often recommended to use the strict equality (===) and strict inequality (!==) operators when comparing values. These operators compare both the type and value without any type coercion.

console.log(false === 0);
console.log("" === false);
console.log(null === undefined);

You can also try this code with Online Javascript Compiler

Run Code

Output

false
false
false

By using strict equality and inequality, you ensure that the comparison is based on both the type and value of the operands, providing more predictable results.

Note: When dealing with falsy values, it's crucial to consider their behavior in comparisons and choose the appropriate operator based on your requirements.

JavaScript Equality (==) Operator

The equality operator (==) in JavaScript compares two values for equality & returns true if they are equal, & false otherwise. It performs type coercion if the operands are of different types before making the comparison.

Let’s see a few examples:

console.log(5 == 5);
console.log(5 == "5");
console.log(true == 1);
console.log(null == undefined);
console.log("hello" == "hello");

You can also try this code with Online Javascript Compiler

Run Code

Output

 true
true
true
true
true

In the first example, both operands are numbers & have the same value, so the equality operator returns true.

In the second example, one operand is a number, and the other is a string. The equality operator performs type coercion, converting the string "5" to the number 5 and then comparing the values, resulting in true.

The third example compares a boolean with a number. The equality operator coerces the boolean true to the number 1 before the comparison, resulting in true.

In the fourth example, null & undefined are considered equal when using the equality operator.

The last example compares two strings with the same value, resulting in true.

Point to be Remembered: It's important to note that the equality operator's type coercion can sometimes lead to unexpected results, especially when comparing values of different types. For more strict & predictable comparisons, you can use the strict equality operator (===)

JavaScript Inequality (!=) Operator

The inequality operator (!=) in JavaScript compares two values for inequality & returns true if they are not equal, & false otherwise. Similar to the equality operator, it performs type coercion if the operands are of different types before making the comparison.

A few of the examples are:

console.log(5 != 4);
console.log(5 != "5");
console.log(true != 0);
console.log(null != undefined);
console.log("hello" != "world");

You can also try this code with Online Javascript Compiler

Run Code

Output

 true
false
false
false
true

In the first example, the operands are numbers with different values, so the inequality operator returns true.

In the second example, one operand is a number & the other is a string. The inequality operator performs type coercion, converting the string "5" to the number 5, & then compares the values, resulting in false since they are considered equal.

The third example compares a boolean with a number. The inequality operator coerces the boolean true to the number 1 before the comparison, resulting in false since 1 is not equal to 0.

In the fourth example, null & undefined are considered equal when using the inequality operator, so it returns false.

The last example compares two different strings, resulting in true since they are not equal.

JavaScript Strict Equality (===) Operator :

The strict equality operator (===) in JavaScript compares two values for equality, but unlike the equality operator (==), it does not perform type coercion. It returns true only if the operands have the same value and the same type.

For Example:

console.log(5 === 5);
console.log(5 === "5");
console.log(true === 1);
console.log(null === undefined);
console.log("hello" === "hello");

You can also try this code with Online Javascript Compiler

Run Code

Output

true
false
false
false
true

In the first example, both operands are numbers with the same value, so the strict equality operator returns true.

In the second example, one operand is a number and the other is a string. The strict equality operator does not perform type coercion and considers them as different types, resulting in false.

The third example compares a boolean with a number. The strict equality operator considers them as different types and returns false.

In the fourth example, null and undefined are considered distinct values when using the strict equality operator, so it returns false.

The last example compares two strings with the same value, resulting in true.

When it can be used: A strict equality operator can be used when you compare values in JavaScript because it provides more predictable and accurate results by considering both the value and the type of the operands. It helps avoid unexpected behavior caused by type coercion.

Strict Inequality (!==) Operator

The strict inequality operator (!==) in JavaScript compares two values for inequality, & like the strict equality operator (===), it does not perform type coercion. It returns true if the operands have different values or different types.

For examples:

console.log(5 !== 4);
console.log(5 !== "5");
console.log(true !== 1);
console.log(null !== undefined);
console.log("hello" !== "world");

You can also try this code with Online Javascript Compiler

Run Code

Output

true
true
true
true
true

In the first example, the operands are numbers with different values, so the strict inequality operator returns true.

In the second example, one operand is a number, and the other is a string. The strict inequality operator considers them to be different types and returns true.

The third example compares a boolean with a number. The strict inequality operator considers them to be different types and returns true.

In the fourth example, null & undefined are considered distinct values when using the strict inequality operator, so it returns true.

The last example compares two different strings, resulting in true since they have different values.

When it can be used: A strict inequality operator can be used when you want to compare values in JavaScript while ensuring that both the value and the type of the operands are considered. It provides a more precise comparison and helps avoid unexpected behavior caused by type coercion.

JavaScript Greater Than (>) Operator

The greater than operator (>) in JavaScript compares two values & returns true if the left operand is greater than the right operand, & false otherwise. It can be used to compare numbers, strings, or a combination of both.

For example:

console.log(5 > 3);
console.log(2 > 7);
console.log("apple" > "banana");
console.log("cat" > "car");
console.log("10" > 5);

You can also try this code with Online Javascript Compiler

Run Code

Output

true
false
false
false
true

In the first example, 5 is greater than 3, so the operator returns true.

In the second example, 2 is less than 7, so the operator returns false.

The third example compares two strings lexicographically. Since "a" comes before "b" in the ASCII table, "apple" is considered less than "banana", & the operator returns false.

In the fourth example, "cat" is lexicographically less than "car" because "t" comes after "r" in the ASCII table, so the operator returns false.

The last example compares a string with a number. JavaScript attempts to convert the string to a number before making the comparison. In this case, the string "10" is converted to the number 10, which is greater than 5, resulting in true.

Note: Whenever you are comparing strings, the greater than operator compares the characters from left to right based on their ASCII values until it finds a difference or reaches the end of the strings.

Greater Than or Equal (>=) Operator"

The greater than or equal operator (>=) in JavaScript compares two values & returns true if the left operand is greater than or equal to the right operand, & false otherwise. It can be used to compare numbers, strings, or a combination of both.

For example :

console.log(5 >= 5);
console.log(8 >= 3);
console.log(2 >= 7);
console.log("apple" >= "apple");
console.log("cat" >= "car");
console.log("10" >= 5);

You can also try this code with Online Javascript Compiler

Run Code

Output

true
true
false
true
true
true

In the first example, 5 is equal to 5, so the operator returns true.

In the second example, 8 is greater than 3, so the operator returns true.

In the third example, 2 is less than 7, so the operator returns false.

The fourth example compares two identical strings. Since they are equal, the operator returns true.

In the fifth example, "cat" is lexicographically greater than "car" because "t" comes after "r" in the ASCII table, so the operator returns true.

Point to remember: The greater than or equal operator behaves similarly to the greater than operator, but it also considers equality. It returns true if the left operand is greater than or equal to the right operand.

JavaScript Less Than or Equal (<=) Operator

The less than or equal operator (<=) in JavaScript compares two values & returns true if the left operand is less than or equal to the right operand, & false otherwise. It can be used to compare numbers, strings, or a combination of both.

For example :

console.log(5 <= 5);
console.log(3 <= 8);
console.log(7 <= 2);
console.log("apple" <= "apple");
console.log("car" <= "cat");
console.log(5 <= "10");

You can also try this code with Online Javascript Compiler

Run Code

Output

 true
true
false
true
true
true

In the first example, 5 is equal to 5, so the operator returns true.

In the second example, 3 is less than 8, so the operator returns true.

In the third example, 7 is greater than 2, so the operator returns false.

The fourth example compares two identical strings. Since they are equal, the operator returns true.

In the fifth example, "car" is lexicographically less than or equal to "cat" because "r" comes before "t" in the ASCII table, so the operator returns true.

The last example compares a number with a string. JavaScript attempts to convert the string to a number before making the comparison. In this case, the string "10" is converted to the number 10, which is greater than or equal to 5, resulting in true.

Note: The less than or equal operator behaves similarly to the less than operator, but it also considers equality. It returns true if the left operand is less than or equal to the right operand.

Comparing null, undefined, and NaN

When comparing the special values null, undefined, and NaN (Not a Number) using comparison operators, it's important to understand their behavior to avoid unexpected results.

1. Comparing null & undefined:

- When using the equality operator (==), null & undefined are considered equal.

- When using the strict equality operator (===), null & undefined are considered distinct values.

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

You can also try this code with Online Javascript Compiler

Run Code

Output

true
false

2. Comparing with NaN:

- NaN is a special value that represents "Not a Number".

- NaN is not equal to any value, including itself, when using either the equality (==) or strict equality (===) operator.

- To check if a value is NaN, you can use the isNaN() function.

console.log(NaN == NaN);  
console.log(NaN === NaN);  
console.log(isNaN(NaN));

You can also try this code with Online Javascript Compiler

Run Code

Output:

false
false
true

3. Comparing null or undefined with other values:

- When comparing null or undefined with other values using comparison operators (<, >, <=, >=), they are converted to numbers.

- null is converted to 0, & undefined is converted to NaN.

console.log(null > 0);
console.log(null >= 0);
console.log(undefined > 0);
console.log(undefined < 0);

You can also try this code with Online Javascript Compiler

Run Code

Output

false
true
false
false

Note: It's important to be cautious when you are comparing null, undefined, or NaN values using comparison operators. In general, it's advised to use the strict equality operator (===) for comparisons to avoid unexpected behavior due to type coercion.

Supported Browsers

JavaScript comparison operators are supported by all modern web browsers, which are:

- Google Chrome

- Mozilla Firefox

- Apple Safari

- Microsoft Edge

- Opera

- Internet Explorer (IE) 9 & above

Frequently Asked Questions

What is the difference between == and === operators in JavaScript?

The == operator performs type coercion before comparing values, while the === operator compares both value and type without coercion.

Can I compare strings using comparison operators in JavaScript?

Yes, you can compare strings lexicographically using comparison operators. The comparison is based on the Unicode values of the characters.

How does JavaScript handle comparisons with NaN (Not a Number)?

NaN is not equal to any value, including itself. To check if a value is NaN, you should use the isNaN() function.

Conclusion

In this article, we discussed JavaScript comparison operators in detail, which allow you to compare values and make decisions in your code. We explained the different types of operators, like equality (==), inequality (!=), strict equality (===), strict inequality (!==), greater than (>), greater than or equal (>=), less than (<), and less than or equal (<=). We also discussed how these operators behave with special values like null, undefined, and NaN.

You can also check out our other blogs on Code360.