Operator Precedence in JavaScript

The operator precedence along with their associativity determines how JavaScript evaluates an expression when there are multiple JavaScript Operators present in the expression. Each JavaScript operators have certain precedence. The JavaScript evaluates the operators with higher precedence first. If a group of operators has the same Precedence, then it evaluates them either left to right or right to left, depending on the operator’s associativity. The table end of the article. has a list of all operators, with their precedence along with associativity.

Operator Precedence

For Example, take a simple arithmetic operation.

If we did the math from left to right and without any precedence we would add 100+100=200, and then multiply it by 20. The answer would be 4000. But that is not what we get.

Multiplication always has higher precedence than an addition. Hence it performs the multiplication first (100*20=2000) and then the addition (100+2000=2100)

The Parenthesis or (grouping) always has higher precedence than all other operators. Hence the following expression evaluates (100+100) first and then multiplication.

Operators Associativity

The associativity defines the direction in which the evaluation takes place. It can be either left to right (left-associativity) or right to left (right associativity).

1. Associativity comes into the picture only when the operators have the same precedence.
2. All operators with the same precedence have the same associativity

The assignment Operator = has a right to left associativity.

1. y=10 is evaluated first. y becomes 10
2. x=y is next. Hence x becomes 10.

Note that in the above example if = had left to right associativity, then the value of x will be 5.

Multiplication, division & reminder has the same Precedence and left-to-right associativity. The expression 10/5*20/8 is evaluated in the following order.

1. 10/5 = 2
2. 2*20 = 40
3. 40/8 = 5

Parenthesis (grouping) and short-circuiting

The Parenthesis or grouping operator has the highest precedence. However, even they might not be evaluated, when they are part of the expression involving short-circuited Operators.

The Logical operators like || & && stop the evaluation, if they find the match This is known as a short-circuiting. For Example, the code below does not invoke alert("Hello") even with a parenthesis.

Similarly in expression, a || (b * c) b*c never invoked if a is truthy.

The logical AND, nullish-coalescing, optional chaining, and conditional operator are the other short-circuited operators.

Operator Precedence & Associativity Table

Reference

1. Expressions & Operators
2. Precedency & Associativity