1. javascript
  2. /basics
  3. /comparisons

Comparison in JavaScript

JavaScript offers several ways to compare values, which are essential for making decisions in your code. We'll cover the different types of comparisons available in JavaScript, including equality, strict equality, relational, and type coercion comparisons, as well as some nuanced cases to keep in mind.

Basic Relational Comparison

JavaScript has relational comparison operators, used to compare the relationship between two values. These operators include:

  • < (less than)

  • > (greater than)

  • <= (less than or equal to)

  • >= (greater than or equal to)

For example:

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

When comparing strings, JavaScript compares them lexicographically (i.e. based on their Unicode values).

For example:

console.log("a" < "b"); // true
console.log("b" > "a"); // true

You can check out our Introduction to Operators in JavaScript article for more details

Equality Comparison (==)

The most basic comparison operator in JavaScript is the double equals (==) operator, which compares two values for equality. It converts the operands to the same type before making the comparison. For example:

console.log(1 == "1"); // true
console.log(true == 1); // true

In the first example, the number 1 is compared to the string "1", and JavaScript converts the string to a number before making the comparison, resulting in true. In the second example, the boolean value true is compared to the number 1, and JavaScript converts the boolean to a number before making the comparison, resulting in true as well.

Strict Equality (===)

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

In contrast to the equality comparison, the strict equality comparison returns false in the above examples because the operands have different types.

The strict equality operator is often preferred in JavaScript, as it can prevent unexpected results caused by type coercion.

Type Coercion Comparison

JavaScript also has a comparison operator that specifically checks for the type of a value. The typeof operator returns a string indicating the type of the operand, and can be used in the following ways:

console.log(typeof "hello world"); // "string"
console.log(typeof 42); // "number"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"

Comparing Different Types

Note that the comparison may not always return the expected result. Here's a similar example of comparing a number and a string:

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

In the first line of code, JavaScript converts the string "5" to a number before making the comparison, resulting in 5 == 5 which is true. In the second example, the strict equality operator === is used, and JavaScript does not perform any type conversion, resulting in "5" === 5 which is false.

Another example is when comparing a boolean with a number:

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

In the first line of code, JavaScript converts the boolean false to a number 0 before making the comparison, resulting in 0 == 0 which is true. In the second example, the strict equality operator === is used, and JavaScript does not perform any type conversion, resulting in 0 === false which is false.

Nuanced Cases with NaN, null, and undefined

In JavaScript, there are certain nuances to consider when working with these values.

  • NaN is a special value that represents "not a number." It is the result of an undefined or unrepresentable mathematical operation. However, when using the strict equality operator (===), NaN will not equal any other value, including itself. Instead, you must use the built-in function isNaN() to check for NaN values.

  • undefined and null are considered to be loosely equal to each other when using the equality operator (==). But they are not strictly equal (===) to any other value.

  • undefined values can be encountered when trying to access properties or variables that have not been defined, or have been declared but have not been assigned a value.

Conclusion

JavaScript offers a variety of comparison operators to test the equality and relationship between values. Understanding these concepts is crucial for writing efficient and bug-free code. It's always a good practice to prefer strict equality comparison and be aware of the nuances that may arise when using other operators.