JavaScript Comparison Operators
Tags: javascript
Published: 2020-04-06 15:04:39

---
title: JavaScript Comparison Operators
published: true
date: 2020-04-06 06:00:00 UTC
tags: javascript
canonical_url: https://www.prestonlamb.com/blog/javascript-comparison-operators
---

## [tldr;](#tldr)

Comparison operators are frequently used in JavaScript applications, and are an important part of controlling the logic flow of the app. But if you don’t have a good understanding of how they work you can run into a couple issues. Understanding strict comparisons and abstract comparisons is also really important, and in this article we’ll cover both of these comparisons.

## [Comparison Operators](#comparison-operators)

If you’ve written any amount of JavaScript, you’ve almost certainly used comparison operators. You’ve had to say, “If the value of this variable equals the value of that variable, do this; otherwise do that.” Or, “If the value of this variable is less than ‘X’, set the value of this variable to ‘Y’.” These are common uses of comparison operators. But tell me, have you ever written the following comparison (or something similar) and gotten `true` when you were expecting `false`?

```js
console.log(1 == '1')/ // true
```

I have had this happen to me before, and at first was really confused. But once I realized what was going on, it made more sense. Let’s talk about why this happens.

## [Abstract Comparisons](#abstract-comparisons)

The first type of comparison we’ll talk about is abstract comparison. In JavaScript, these comparisons are `==` and `!=`. When you use these two comparisons, JavaScript converts both variables to the same type and then compares them. So in our example above, it takes one of the two values and converts it to the same type as the opposite one (i.e. takes the `number` and converts it to a `string`) and then does the comparison. That’s why the statement `1 == '1'` is `true`. Obviously a number is not the same as a string, but with abstract comparison they are compared to each other as if they were the same. Make sense? The same is true for `!=`. If we take the inverse of the previous statement:

```js
console.log(1 != '1'); // false
```

We see that the result of this comparison is `false`, even though those are two different values. This was really confusing when I first started in JavaScript. I was unsure why I was getting into certain `if` statements or why variables were having values set to what I thought was the incorrect value. Understanding what was happening in the comparison helped me to clear everything up.

Another situation to be aware of when using abstract comparison is when you are comparing `null` and `undefined`. These are two distinct primitive types in JavaScript, but if you use the abstract comparison on these two values, you get a `true`.

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

This is arguably a bigger issue than comparing strings and numbers. There are times where you want to do a specific thing if the value of the variable is `null` and a different thing if it’s `undefined`. They have different implied meanings, even though they are both the absence of a value.

## [Strict Comparisons](#strict-comparisons)

So how do we ensure that `1` does not equal `'1'`? That’s where strict comparisons come in to play. With strict comparisons, no type conversion happens, and the values are compared to each other exactly as you wrote them. So let’s look at our examples from above and see what their results will be with strict comparisons:

```js
console.log(1 === '1'); // false
console.log(1 !== '1'); // true
console.log(null === undefined); // false
```

Likely when you make a comparison between two objects, you actually want to know if two values are strictly equal or strictly not equal to each other. I always use the strict comparison, and recommend that everyone do the same. There might be some edge cases where you need abstract comparisons only for equality, but I have found very few cases where I needed them over strict comparisons.

## [Types of Comparison Operators](#types-of-comparison-operators)

There are really two types of comparison operators: equality/inequality operators (which we’ve really covered so far) and relational operators. Let’s go over these in a little more depth. We’ll start with equality/inequality operators and then cover relational operators.

### [Equality/Inequality Operators](#equality-inequality-operators)

We’ve talked a lot about equality/inequality operators already. The four equality/inequality operators are `==`, `===`, `!=` and `!==`. In this section, we’ll just give a few notes on these comparisons. We’ve already shown several examples of using these comparison operators.

- Two `numbers` are abstractly or strictly equal to each other if they are the exact same number
- Two `strings` are abstractly or strictly equal to each other if they have the same sequence of characters in the same order
- Two `objects` are abstractly or strictly equal to each other only if they point to the same location in memory
- Two `boolean` values are only equal to each other if they are both `true` or both `false`.
- `undefined` and `null` are abstractly equal to each other

The inverse of the above rules apply to using the inequality operators (`!=` and `!==`).

### [Relational Operators](#relational-operators)

Relational operators are the following operators: `>`, `>=`, `<` and `<=`. You’ll likely recognize these from your math classes in school. They are pretty straight forward, but let’s go over each of them real quick.

For the greater than (`>`) operator, the result is true if the left side of the operator is a greater value than the right side. Some examples are

```js
console.log(4 > 1); // true
console.log(4 > 4); // false
console.log(4 > 8); // false
```

For the greater than or equal to (`>=`) operator, the result is true if the left side of the operator is a greater value or equal to the right side. Some examples are

```js
console.log(4 >= 4); // true
console.log(4 >= 8); // false
```

For the less than (`<`) operator, the result is true if the left side of the operator is a lesser value than the right side. Some examples are

```js
console.log(4 < 8); // true
console.log(4 < 4); // false
console.log(4 < 2); // false
```

For the less than or equal to (`<=`) operator, the result is true if the left side of the operator is a lesser value or equal to the right side. Some examples are

```js
console.log(4 <= 4); // true
console.log(4 <= 2); // false
```

## [Conclusion](#conclusion)

These relational operators are a basic part of the JavaScript language, but are also really important. Understanding the difference between strict and abstract comparisons should keep you from running into unexpected errors in your application.