Back to Basics: Operators, Operators, Operators
Tags: javascript, operators, beginners, technicalinterviews
Published: 2021-01-28 00:14:09

This series discusses the building blocks of JavaScript. Whether you're new to the language, you're preparing for a technical interview, or you're hoping to brush up on some key JS concepts, this series is for you.

Today's post is about operators. In this post, I'll go over some of the most common operators you'll come across in JavaScript, but it's by no means an exhaustive list. At the bottom of this post, you can find a link to the MDN documentation, which has information on other kinds of JavaScript operators.

- [What is an operator?](#what-is-an-operator)
- [Assignment operators](#assignment-operators)
- [Comparison operators](#comparison-operators)
- [Arithmetic operators](#arithmetic-operators)
- [Logical operators](#logical-operators)
- [String operators](#string-operators)
- [Ternary (conditional) operator](#ternary-conditional-operator)

## What is an operator?

In JavaScript, an operator is a way to compare or assign values, or perform operations. There are many different types of operators.

There are _binary_ operators, _unary_ operators, and a _ternary_ operator in JavaScript. "Binary" means that there are **two** values, or _operands_, involved, with one coming before the operator, and one coming after the operator. An example of a binary operator is `1 + 2`. In this example, `1` and `2` are the operands, and `+` is the operator.

A "unary" operator means that there is only **one** operand. The operand is either before the operator, or after the operator. An example of a unary operator is `x++` (don't worry if you're unfamiliar with this syntax, we'll talk about below).

The "ternary" operator in JavaScript involves **three** operands. It's used as a shortened version of an `if...else` statement, and is therefore also known as a "conditional" operator. An example of a ternary operator is `num >= 0 ? "Positive" : "Negative"`. In this example, the three operands are `num >= 0`, `"Positive"`, and `"Negative"`, and the operators that separate them are `?` and `:`.

## Assignment operators

An **assignment** operator is a binary operator. It assigns a value to the left operand based on the value of the right operand.

The most common assignment operator is `=`, as in `a = b`. In this example, `a` is the left operand, and it's assigned the value of `b`, which is the right operand.

There are also _compound assignment operators_. Compound assignment operators typically combine assignment and arithmetic operators in a shortened version. For example, `a += b` is a shortened version of `a = a + b`.

Below is a table of some of the most common assignment operators:

| Operator name             | Shortened operator | Longform version | Example   |
| ------------------------- | ------------------ | ---------------- | --------- |
| Assignment operator       | a = b              | a = b            | `x = 4;`  |
| Addition operator         | a += b             | a = a + b        | `x += 4;` |
| Subtraction assignment    | a -= b             | a = a - b        | `x -= 4;` |
| Multiplication assignment | a \*= b            | a = a \* b       | `x *= 4;` |
| Division assignment       | a /= b             | a = a / b        | `x /= 4;` |
| Remainder assignment      | a %= b             | a = a % b        | `x %= 4;` |

Let's see some examples of the above operators:

```javascript
let x = 10;
console.log((x += 3)); // x = 10 + 3 -> x = 13

let y = 8;
console.log((y -= 3)); // y = 8 - 3 -> y = 5

let z = 3;
console.log((z *= 3)); // z = 3 * 3 -> z = 9

let m = 6;
console.log((m /= 3)); // m = 6 / 3 -> m = 2

let n = 7;
console.log((n %= 3)); // n = 7 % 3 -> n = 1
```

## Comparison operators

A **comparison** operator is a binary operator. It compares the two operands, and returns `true` or `false` depending on the comparison.

One comparison operator is less than, or `<`. For example, `1 < 2` would return `true`, because `1` is less than `2`.

When comparing two values of different types, JavaScript does something called **type conversion**. This means that if you're comparing a string with an integer, for example, JavaScript will try to convert the string into a number so that the values can actually be compared. There are two comparison operators that **don't** do type conversion: strict equal, `===`, and strict not equal, `!==`. Strict equal and strict not equal do not convert values of different types before performing the operation.

Below is a table of comparison operators in JavaScript:

| Operator name         | Operator symbol | Operator function                                                                                                                                          | Example                    |
| --------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
| Equal                 | `==`            | Returns `true` if the operands are equal, and `false` if the operands are not equal.                                                                       | `4 == "4"` (returns true)  |
| Not equal             | `!=`            | Returns `true` if the operands are not equal, and `false` if the operands are equal.                                                                       | `4 != "5"` (returns true)  |
| Strict equal          | `===`           | Returns `true` if the operands are of the same type and are equal, and `false` if the operands are the same type and are not equal or are different types. | `4 === 4` (returns true)   |
| Strict not equal      | `!==`           | Returns `true` if the operands are the same type but are not equal or are different types, and `false` if the operands are of the same type and are equal. | `4 !== "4"` (returns true) |
| Greater than          | `>`             | Returns `true` if the left operand is greater than the right operand, and `false` if the left operand is less than or equal to the right operand.          | `4 > 3` (returns true)     |
| Greater than or equal | `>=`            | Returns `true` if the left operand is greater than or equal to the right operand, and `false` if the left operand is less than the right operand.          | `4 >= "4"` (returns true)  |
| Less than             | `<`             | Returns `true` if the left operand is less than the right operand, and `false` if the left operand is greater than or equal to the right operand.          | `4 < "5"` (returns true)   |
| Less than or equal    | `<=`            | Returns `true` if the left operand is less than or equal to the right operand, and `false` if the left operand is greater than the right operand.          | `4 <= 7` (returns true)    |

Let's see some examples of the above operators:

```javascript
let x = 5;
let y = 2;
let z = 7;
let m = "5";
let n = "6";

x == m; // 5 == "5" -> true
x != y; // 5 != 2 -> true
x === z; // 5 === 7 -> false
x !== m; // 5 !== "5" -> true
x > y; // 5 > 2 -> true
x >= z; // 5 >= 7 -> false
x < n; // 5 < "6" -> true
x <= m; // 5 <= "5" -> true
```

## Arithmetic operators

An **arithmetic** operator can be a binary or unary operator. As a binary operator, it takes two numerical values as the operands, performs an arithmetic operation, and returns a numerical value. As a unary operator, it takes one numerical value, performs an operation, and returns a numerical value.

One arithmetic operator is the plus sign, `+`, which is used to add two numbers. For example, `4 + 6` would return `10`. Below is a table of some of the arithmetic operators in JavaScript:

| Operator name  | Operator symbol | Operator function                                                                                                                                                                                                                                         | Example                                               |
| -------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
| Addition       | `+`             | Binary operator. Returns the result of adding two operands.                                                                                                                                                                                               | `4 + 6` returns 10                                    |
| Subtraction    | `-`             | Binary operator. Returns the result of subtracting one operand from another.                                                                                                                                                                              | `5 - 2` returns 3                                     |
| Multiplication | `*`             | Binary operator. Returns the result of multiplying two operands.                                                                                                                                                                                          | `3 * 4` returns 12                                    |
| Division       | `/`             | Binary operator. Returns the result of dividing one operand by another.                                                                                                                                                                                   | `9 / 3` returns 3                                     |
| Remainder      | `%`             | Binary operator. Returns the integer remainder of dividing one operand by another.                                                                                                                                                                        | `10 % 3` returns 1                                    |
| Increment      | `++`            | Unary operator. Adds `1` to the operand. If it comes before the operand (`++z`), it returns the value of the operand _after_ adding `1`. If it comes after the operand (`z++`), it returns the value of the operand _before_ adding `1`.                  | If `z = 4`, `++z` returns `5`, and `z++` returns `4`. |
| Decrement      | --              | Unary operator. Subtracts `1` from the operand. If it comes before the operand (`--z`), it returns the value of the operand _after_ subtracting `1`. If it comes after the operand (`z--`), it returns the value of the operand _before_ subtracting `1`. | If `z = 4`, `--z` returns `3`, and `z--` returns `4`. |
| Exponentiation | `**`            | Binary operator. Returns the result of raising one operand to the power of the other operand.                                                                                                                                                             | `5 ** 2` returns 25                                   |

Let's see some examples of the above operators:

```javascript
let x = 3;
let y = 5;
let z = 6;
let a = 2;
let b = 7;

console.log(x + y); // 3 + 5 -> 8
console.log(y - x); // 5 - 3 -> 2
console.log(x * z); // 3 * 6 -> 18
console.log(z / x); // 6 / 3 -> 2
console.log(y % x); // 5 % 3 -> 2
console.log(a++); // 2
console.log(--b); // 6
console.log(y ** x); // 5 * 5 * 5 -> 125
```

## Logical operators

A **logical** operator can be a binary operator or a unary operator. As a binary operator, it typically takes two Boolean values, evaluates them, and returns a Boolean value.

The unary logical operator in JavaScript is the logical NOT. It takes one operand and evaluates if it can be converted to the Boolean value `true`.

Below is a table of logical operators in JavaScript:

| Operator name | Operator symbol | Operator function | Example |
| --- | --- | --- | --- |
| Logical AND | && | Returns `true` if both operands are `true`, and returns `false` if at least one of the operands is `false`. | `true && true` (returns true) `true && false` (returns false) |
| Logical OR | &#124;&#124; | Returns `true` if at least one operand is `true`, and returns `false` if both operands are `false`. | `true` &#124;&#124; `false` (returns true) `false` &#124;&#124; `false` (returns false) |
| Logical NOT | ! | Returns `false` if the operand can be converted to `true`, and returns `true` if the operand cannot be converted to `true`. | `!true` (returns false) `!false` (returns true) |

Let's see some examples of the above operators:

```javascript
true && true; // true
true && false; // false
false && false; // false

true || true; // true
true || false; // true
false || false; // false

!true; // false
!false; // true
```

## String operators

A **string** operator is a binary operator. It takes two strings and combines them into a single string using `+`, which in this case is called the _concatenation operator_. String _concatenation_ means combining two string values together.

An example of a string operator is `console.log("Happy " + "birthday")`, which console logs the string `"Happy birthday"`.

There is also a shortened version of the string operator, which is `+=`. For example:

```javascript
let string1 = "birth";
let string2 = "day";
console.log(string1 += string2) // "birthday"
```


## Ternary (conditional) operator

A **conditional** operator, or ternary operator, is used with three operands. It's used to evaluate if a condition is true, and then returns one of two values depending on that.

The ternary operator is structured like the following:
```
condition ? expressionIfTrue : expressionIfFalse
```

Ternary operators are discussed at length [in this post](https://dev.to/alisabaj/back-to-basics-conditional-statements-in-javascript-2feo#the-ternary-operator).


---

This post just went over some of the more common operators you'll use and come across in JavaScript. There are many more operators, including bitwise operators and relational operators, and I encourage you to learn more about them in the MDN documentation [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators).