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?
- Assignment operators
- Comparison operators
- Arithmetic operators
- Logical operators
- String operators
- 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:
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:
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:
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 | || | Returns true if at least one operand is true, and returns false if both operands are false. |
true || false (returns true) false || 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:
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:
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.
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.
Oldest comments (0)