Back to Basics: Operators, Operators, Operators

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:

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:

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:

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:

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.