Operator Precedence in Typescript

The operator precedence along with their associativity determines how Typescript evaluates an expression when there are multiple Typescript Operators present in the expression. Each Typescript operators have certain precedence. The Typescript 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 an 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 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 in 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 bitwise operators like || & && stops the evaluation, if they find the match This is known as a short-circuiting. For Example in 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 the conditional operator are the other short-circuited operators.

Operator Precedence & Associativity Table

Reference

1. Expressions & Operators
2. Precedency & Associativity

Read More

1. Complete Typescript Tutorial
2. Typescript Operators
3. Arithmetic Operators
4. Unary plus / Unary minus Operators
5. Increment/Decrement Operators
6. Comparison / Relational Operators
7. Equality Operator / Strict Equality Operators
8. Ternary Conditional Operators
9. Logical Operators
10. Bitwise Operators
11. Assignment Operators
12. Nullish coalescing operator
13. Comma Operator in Typescript
14. Operator Precedence