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

PrecedenceOperator typeAssociativityIndividual operators
21Groupingn/a( … )
20Member Accessleft-to-right… . …
Computed Member Accessleft-to-right… [ … ]
new (with argument list)n/anew … ( … )
Function Callleft-to-right… ( … )
Optional chainingleft-to-right?.
19new (without argument list)right-to-leftnew …
18Postfix Incrementn/a… ++
Postfix Decrement… --
17Logical NOTright-to-left! …
Bitwise NOT~ …
Unary Plus+ …
Unary Negation- …
Prefix Increment++ …
Prefix Decrement-- …
typeoftypeof …
voidvoid …
deletedelete …
awaitawait …
16Exponentiationright-to-left… ** …
15Multiplicationleft-to-right… * …
Division… / …
Remainder… % …
14Additionleft-to-right… + …
Subtraction… - …
13Bitwise Left Shiftleft-to-right… << …
Bitwise Right Shift… >> …
Bitwise Unsigned Right Shift… >>> …
12Less Thanleft-to-right… < …
Less Than Or Equal… <= …
Greater Than… > …
Greater Than Or Equal… >= …
in… in …
instanceof… instanceof …
11Equalityleft-to-right… == …
Inequality… != …
Strict Equality… === …
Strict Inequality… !== …
10Bitwise ANDleft-to-right… & …
9Bitwise XORleft-to-right… ^ …
8Bitwise ORleft-to-right… | …
7Logical ANDleft-to-right… && …
6Logical ORleft-to-right… || …
5Nullish coalescing operatorleft-to-right… ?? …
4Conditionalleft-to-right… ? … : …
3Assignmentright-to-left… = …
… += …
… -= …
… **= …
… *= …
… /= …
… %= …
… <<= …
… >>= …
… >>>= …
… &= …
… ^= …
… |= …
… &&= …
… ||= …
… ??= …
2yieldright-to-leftyield …
yield*yield* …
1Comma / Sequenceleft-to-right… , …

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

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top