#### Tutorial

# Understanding Comparison and Logical Operators in JavaScript

### Introduction

The field of computer science has many foundations in mathematical logic. If you have a familiarity with logic, you know that it involves truth tables, Boolean algebra, and comparisons to determine equality or difference.

The JavaScript programming language uses operators to evaluate statements that can aid in control flow within programming.

In this tutorial, we’ll go over logical operators. These are commonly used with conditional statements, and the `if`

, `else`

, and `else if`

keywords, as well as the ternary operator. If you are interested in learning more about conditional statements first, refer to How To Write Conditional Statements in JavaScript.

## Comparison Operators

In JavaScript, there are a number of comparison operators that you can use to evaluate whether given values are different or equal, as well as if a value is greater than or less than another. Often, these operators are used with stored values in variables.

Comparison operators all return a Boolean (logical) value of `true`

or `false`

.

The table below summarizes the comparison operators available in JavaScript.

Operator | What it means |
---|---|

`==` |
Equal to |

`!=` |
Not equal to |

`===` |
Strictly equal to with no type conversion |

`! ==` |
Strictly unequal to with no type conversion |

`>` |
Greater than |

`>=` |
Greater than or equal to |

`<` |
Less than |

`<=` |
Less than or equal to |

Let’s go into each operator in detail.

### Equality

The equality operator measures whether values on either side of the operator are equal.

Let’s consider the following:

```
let x = 3;
x == 3;
```

Because `3`

is equivalent to `3`

, the output received will be the Boolean value of `true`

.

```
Outputtrue
```

If we instead test whether `x`

is equal to another integer, we’ll receive output stating that the statement is validated to be false.

```
let x = 3;
x == 5;
```

```
Outputfalse
```

With this equivalency expression, you can also test other data types such as strings and Booleans.

We’ll use a string example below.

```
let shark = 'sammy';
shark == 'sammy';
shark == 'taylor';
```

```
Outputtrue
false
```

In the first instance, the expression returned `true`

because the strings were equivalent. In the second instance, of `shark == 'taylor'`

, the expression returned `false`

because the strings were not equal.

Worth noting, is that the `==`

operator is not a strict equivalency, so you *can* mix numbers and strings that evaluate to being equivalent. Consider the following example.

```
let x = 3;
x == '3';
```

Even though the first line uses a number data type, and the second line tests `x`

against a string data type, both values equal 3, and the output you will receive indicates that the expression is true.

```
Outputtrue
```

Because this operator is not strict about data type, it can support users entering strings instead of numbers, for example. There is no need to convert data types to test equivalency.

There are many cases where you may use comparison operators like the `==`

operator. You may want to test equivalency when grading a test, for example. That way you can validate whether a given answer is correct or not.

```
let answer = 10;
let response = prompt("What is 5 + 5?");
if (answer == response) {
console.log("You're correct!");
}
```

Here, if the student enters `10`

in response to the question when prompted, they will receive the feedback that they are correct.

There are many potential applications of comparison operators in JavaScript, and they will help you control the flow of your program.

Now that you have a foundation with a few examples for `==`

, we’ll be a bit briefer going forward.

### Inequality

The `!=`

operator tests inequality, to determine whether the values on either side of the operator are *not* equal.

Let’s consider an example.

```
let y = 8;
y != 9;
```

For this example, `8`

does *not* equal `9`

, so the expression will be evaluated to be `true`

:

```
Outputtrue
```

For a statement of inequality to be considered `false`

, the two values on either side would need to actually be equal, as in the following.

```
let y = 8;
y != 8
```

```
Outputfalse
```

In this second example, the two values on either side of the operator *are* equal, so the expression is not true.

### Identity

The `===`

operator determines whether two values are both of equal value *and* of equal type. This is also known as a strict equality operator. This means you cannot mix number and string data types.

Here’s an example:

```
let z = 4;
z === 4;
z === '4';
```

We’ll receive the following output.

```
Outputtrue
false
```

The example indicates that `z`

is *strictly* equal to `4`

(as it is assigned the numeric value of `4`

), but that it is **not** strictly equal to the string `'4'`

.

Because this operator is strict, you will need to keep in mind that you may need to convert user-entered data from one data type to another, for instance, when working with the identity operator. This may help you keep data types consistent throughout your program.

### Non Identity

Like `===`

, the operator `!==`

evaluates a strict inequality, which considers both the value and the type of the operands on either side of the operator.

We’ll review the following examples.

```
let a = 18;
a !== 18;
a !== '18';
a !== 29;
```

The output for the above will be as follows.

```
Outputfalse
true
true
```

In this example, since `a`

*does* strictly equal `18`

, the first expression evaluates to `false`

as we are testing inequality. In the next two examples, `a`

is determined to be unequal to the string `'18'`

and the number `29`

, so those two expressions evaluate to `true`

(since they are *not* equal).

### Greater than

The greater than symbol in JavaScript may be familiar to you from math: `>`

. This evaluates whether one value (on the left side of the expression) is greater than another value (on the right side of the expression).

Like the `==`

operator above, the greater than operator is *not* strict, and therefore will allow you to mix strings and numbers.

Let’s consider the following examples.

```
let f = 72;
f > 80;
f > '30';
```

We’ll receive the following output:

```
Outputfalse
true
```

In the first instance, `72`

is *less than* `80`

, so the first expression evaluates to `false`

. In the second instance, `72`

is in fact greater than `'30'`

, and the operator does not care that the number is a string, so the expression evaluates to `true`

.

### Greater than or equal

Similarly, the operator for greater than or equal to will evaluate whether one operand meets the threshold of the other. This operator is typed as `>=`

a kind of compound between greater than (`>`

) and the equal sign (`=`

).

Our examples:

```
let g = 102;
g >= 90;
g >= 103;
```

```
Outputtrue
false
```

Because `102`

is a larger number than `90`

, it is considered to be greater than or equal to `90`

. Because `102`

is less than `103`

, it is `false`

to state that `102 >= 103`

. If either `90`

or `103`

were a string data type, the expressions would also evaluate the same.

### Less than

The less than operator appears as the mirror version of the greater than operator: `<`

.

Consider the following examples as a demonstration.

```
let w = 1066;
w < 476;
w < 1945;
```

```
Outputfalse
true
```

Here, `1066`

is *greater than* `476`

, so the expression evaluates to `false`

. However, `1066`

*is* less than `1945`

, so the second statement evaluates to `true`

. Again, the `476`

or `1945`

values could also be strings.

### Less than or equal

The opposite of greater than or equal, the less than or equal operator — `<=`

— will evaluate whether the value on the left side of the operator is less than or equal to the value on the right side.

Here are a few examples.

```
let p = 2001;
p <= 1968;
p <= 2001;
p <= 2020;
```

```
Outputfalse
true
true
```

The first expression evaluates to `false`

because `2001`

is not less than or equal to `1968`

. In the second expression, because the variable and `2001`

are equal values, the output is `true`

. In the third expression, the output is also `true`

because `2001`

*is* less than `2020`

. Again, these values could also be represented as strings, as in `'2001'`

, and would evaluate in the same manner.

**Note**: Be sure not to confuse the less than or equal operator (`<=`

) with the arrow function (`=>`

) in JavaScript. Learn more about arrow functions in our tutorial Understanding Arrow Functions in JavaScript.

To understand how these comparison operators can work together in a program, refer to our `grades.js`

example in our How To Write Conditional Statements in JavaScript tutorial.

## Logical Operators

In JavaScript, there are three **logical operators**, which connect two or more programming statements to return a `true`

(also called “truthy”) or `false`

(“falsy”) value. These are most often used with Boolean (logical) types, but can be applied to values of any data type.

These logical operators are summarized in the table below.

Operator | Syntax | Description |
---|---|---|

AND | `&&` |
Returns `true` if both operands are `true` |

OR | || | Returns `true` if either operand is `true` |

NOT | `!` |
Returns `true` if operand is `false` |

Let’s review each of these operators in more detail.

### AND

The AND operator is represented by two ampersands — `&&`

— it will return `true`

if the operands to the left and right evaluate to be true.

For example, with AND we can check if something is both high quality and has a low price.

```
// High quality and low price are true
const highQuality = true;
const lowPrice = true;
(highQuality && lowPrice);
```

```
Outputtrue
```

Since both variables evaluate to be `true`

, the AND operation within the parentheses returns `true`

. If either one of the variables were initialized as `false`

, the `&&`

expression would evaluate to `false`

.

### OR

The OR operator is represented by two pipes — `||`

— it will return `true`

if one of the operands is true.

In this example, we’ll check if something is *either* `highQuality`

or `lowPrice`

.

```
// Only low price is true
const highQuality = false;
const lowPrice = true;
(highQuality || lowPrice);
```

```
Outputtrue
```

Since one of the two conditions (`highQuality`

or `lowPrice`

) was `true`

, the whole operation returns `true`

. This would only evaluate to `false`

if *both* conditions were `false`

.

### NOT

The NOT operator is represented by an exclamation point — `!`

— it will return `true`

if the operand is set to `false`

, and vice versa.

```
const highQuality = true;
!(highQuality);
```

```
Outputfalse
```

In the above statement, `highQuality`

has the value of `true`

. With the NOT operator, we are checking to see if `hiqhQuality`

evaluates to `false`

. If it were `false`

, the output would return `true`

, but since it *is* `true`

, the output returns `false`

.

The NOT operator is a bit tricky to understand at first. The important part to remember is that NOT checks whether something evaluates to be false.

## Conclusion

Logical operators are the building blocks of flow control in JavaScript programming. Using these operators effectively will help you develop programs that evaluate statements and move to the next stage based on whether a statement is true or false.

To continue learning more about JavaScript, check out our How To Code in JavaScript series, and our JavaScript tag.