Operator Precedence in JavaScript

Operator precedence defines the order in which operators are evaluated when there are multiple operators in an expression.

Logically, operators with higher precedence are evaluated before those with lower precedence.

For example, in the expression 3 + 4 * 5, multiplication is performed before addition because the multiplication operator has a higher precedence than the addition operator.

Operator Precedence Table in JavaScript

Here is a table with the most common operators in JavaScript, ordered by their precedence, from highest to lowest:

That is, those higher up in this table are evaluated before those lower down.

Associativity

Associativity defines the order in which operators with the same precedence are evaluated. It can be left-to-right or right-to-left.

For example, in the expression 5 - 3 + 2, the operation is performed left to right because subtraction and addition have the same precedence.

Most operators in JavaScript have left-to-right associativity. That is, if multiple operators of the same type are encountered, they are evaluated left to right.

const result = 5 - 3 + 2;

// evaluated as
const result = (5 - 3) + 2; // 4

But some operators have right-to-left associativity (which means they are evaluated right to left). The two odd ducks are:

• The assignment operator (=)
• The exponentiation operator (**).

let a, b, c;
a = b = c = 10;

// Evaluated as 
a = (b = (c = 10))

console.log(a); // and all are 10 and happy

Examples of Precedence in JavaScript

Arithmetic Operators

Consider the expression:

const result = 3 + 4 * 5;

Since the * operator has a higher precedence than the + operator, multiplication is performed before addition:

const result = 3 + (4 * 5); // 3 + 20 = 23

Unary and Binary Operators

In the expression:

const value = -3 ** 2;

The ** operator has a higher precedence than the - operator, so the expression is evaluated as:

const value = -(3 ** 2); // -(9) = -9

Comparison and Logical Operators

Consider the expression:

const isValid = 5 < 10 && 10 < 15;

The && operators have lower precedence than the comparison operators <. The expression is evaluated as:

const isValid = (5 < 10) && (10 < 15); // true && true = true

Ternary Operator

The ternary operator has lower precedence than arithmetic operators, so it is evaluated after arithmetic operations:

const result = 10 + 5 > 10 ? 'Greater' : 'Lesser';

Here, the expression 10 + 5 > 10 is evaluated first, and then the ternary operator is applied:

const result = (10 + 5 > 10) ? 'Greater' : 'Lesser'; // 'Greater'