Operator Precedence in JavaScript

One of the initial exercises when you start out as a JavaScript developer is to create a calculator—a very simple but powerful exercise to learn about how operations work in JavaScript and how to use the operators the right way.

What we learn is that the structure of our code will make all the difference, and just how important it is to understand operator precedence—the order in which our code evaluates operators.

Let’s learn more about operator precedence.

Operator Precedence

Operator precedence in JavaScript determines the priority of operators in an operation. It determines which operators have higher precedence than others, and thus tells us the order to perform a given mathematical expression.

Operators with higher precedence will become the operands of operators with lower precedence. This means that the operator with higher precedence goes first in an operation.

Changing a simple operator inside an operation can change the result. It’s a mistake to try to create a complex operation without knowing operator precedence.

You may know operator precedence as “order of operations.” These are the same rules, widely used in both mathematics and computer programming, broken out into this order: Parentheses, Exponents, Multiplication/Division, Addition/Subtraction. This tells us parentheses are evaluated first come first, and addition/subtraction are performed last.

JavaScript has 21 levels of operator precedence. You can check them out here. The table shows the operator, the usage of the symbol, which direction we should read the operation and the precedence from highest (21) to the lowest (1) precedence.

Imagine an operation like the following:

(3 + 10) * 2

What do you think would be the output? Well, if you said 26, you are correct. The parentheses change the order of the operation because this function has higher precedence.

Imagine a simple operation where we want to subtract and multiply:

3 - 5 * 10

The subtraction operator is shown first, but the multiplication is evaluated first. The multiplication operator has a higher precedence level over the subtraction operator. The associativity here does not matter—the subtraction operator will always be evaluated later.

When there are operators of the same precedence, associativity affects the process of the operation whether processing it from right-to-left or left-to-right.

Left-to-right

Left-associativity (left-to-right), the normal way of operating, is when the operation is evaluated from left-to-right. When we write a simple statement in JavaScript, we are writing it left-to-right.

Imagine a simple operation, where we have three numbers. We will start the operation with the first two numbers, then go to the last one.

10 + 20 + 30
// Left-to-right associativity would be:
(10 + 20) + 30
// then:
30 + 30

This is left-to-right associativity. We use it in every aspect of our lives when we use numbers. In this example, we will always get the same result no matter what because addition is associative.

An associative operation is a calculation that will always return the same result no matter how the numbers are grouped. Multiplication is also associative, while subtraction and division are not.

For example, the following operations are associative because they always return the same result:

10 + (10 + 2)
(10 + 10) + 2

The following operations are not associative because the way the numbers are grouped affects the result:

5 - (4 - 3)
(5 - 4) - 3

Right-to-left

Right-associativity (right-to-left) is when the operation is evaluated from right-to-left.

10 + 20 + 30
// Right-to-left associativity would be:
10 + (20 + 30)
// then:
30 + 30

Assignment operators always have right-to-left associativity.

a = b = c = 5

This is how right-to-left associativity works: a, b and c are assigned to 5. First, first c is set to 5, then b, then a.

The difference in associativity happens when there are many operators of the same precedence. With many operators of different precedence, associativity does not affects the final result.

Grouping

Grouping is the operator with highest precedence. JavaScript developers in general use parentheses to control the order of the operation. Since grouping has the highest precedence, they are always calculated first.

2 + 8 + 9 + (10 - 5)

We can place parentheses inside one another—this is called nesting parentheses. JavaScript always evaluates the inner set of parentheses first.

(2 + 2) + ((9 - 5) - 2)

Groupings are almost always evaluated first, but sometimes this is not true. When we have a conditional evaluation, grouping might not even be evaluated.

Imagine the following operation:

a && (b + c)

In case the a value is false, the grouping expression (b + c) will never be evaluated. This is called short-circuiting.

Logical Operators

Short-circuiting is very common in JavaScript and usually happens because of logical operators.

Short-circuit means that inside an OR operation, in case the first operand is true, JavaScript will never look at the second operand.

if (20 === number || 10 === number) return true;

Logical operators are usually used for boolean comparisons. They are used in logical statements to compare the difference between values.

We have four logical operators in JavaScript, each one of these operators also has its precedence number:

• ! — NOT
• && — AND
• || — OR
• ?? — Nullish Coalescing

Logical operators are usually used for boolean comparisons. When they are used in boolean comparisons, they return a boolean value. Logical operators return the value of one of the operands used in the operation. They’re always evaluated from left to right and the operator with higher precedence is the logical NOT (!) operator.

The logical NOT (!) operator has the highest precedence of all logical operators. This operator takes truth to falsity. When this operator is used with a non-boolean value, it returns false if its single operand can be converted to true; otherwise, it returns true.

const bool = true;

if (!bool) {
  console.log("false!");
} else {
  console.log("true!");
}

// 'true!'

const arr = ["operator", "precedence"];

if (!arr) {
  console.log("false!");
} else {
  console.log("true!");
}

// 'true!'

The logical AND (&&) returns true if a set of operands are true and returns false otherwise. Most of the time, this operator is used with boolean values, and whenever it is, it always returns a boolean value. In case this operator is used with non-boolean values, it will return a non-boolean value.

const bool = true;
const arr = ["operator", "precedence"];

if (arr && bool) {
  console.log("true!");
} else {
  console.log("false!");
}

// 'true!'

if (arr && bool && 1 > 2) {
  console.log("true!");
} else {
  console.log("false!");
}

// 'false!'

The logical OR (||) returns true if inside a set of operands, at least one or more of its operands are true; otherwise it returns false. If this operator is used with non-boolean values, it will return a non-boolean value.

const bool = true;
const arr = ["operator", "precedence"];

if (arr || 1 > 2) {
  console.log("true!");
} else {
  console.log("false!");
}

// 'true!'

if (1 > 2 || 2 > 3) {
  console.log("true!");
} else {
  console.log("false!");
}

// 'false!'

The nullish coalescing operator (??) is the least used operator of all logical operators. This operator returns the right-side operand when the left-side operand is null or undefined.

const bool = null ?? true;
console.log(bool);

// 'true'

const boool = 1 ?? true;
console.log(boool);
// '1'

Conclusion

Operator precedence in JavaScript is a vital concept. It helps us to create operations in a better way. We create operations to make decisions. Based on an input, we want a specific output every time. We should aim to create the most functional code possible.

JavaScript is a good language, but we should pay attention to not make mistakes. Especially when working with operations, operator precedence plays a very important part. Operator precedence tell us which operators should and will go first in an operation—operators with higher precedence will go first, followed by operators with lower precedence. By remembering the concept of operator precedence, we can avoid a lot of errors.