Operator precedence determines the order in which operators are evaluated. JavaScript follows familiar mathematical rules, while parentheses let you state the intended grouping explicitly. section 2.1.6 section 2.1.7
Common evaluation rules place these operations in sequence:
- Parentheses group expressions first. section 2.1.6
- Exponentiation precedes multiplication, division, and remainder. section 2.1.6 section 2.8
- Multiplication, division, and remainder precede addition and subtraction. section 2.1.6
- Assignment operators such as += occur after the arithmetic on their right-hand side. section 2.8
Make the grouping visible
These expressions produce different results: 100 / 2 + 10 evaluates division before addition, while 100 / (2 + 10) evaluates the parenthesized sum first. The same principle clarifies layout calculations such as (containerWidth - gutter * 2) / 3. section 2.1.7
CSS arithmetic follows parentheses, multiplication or division, then addition or subtraction. Use calc() for expressions such as calc((100% - 2rem) * 2), where the parenthesized subtraction is calculated first. section 3.2.1
Table 2.5 JavaScript operator order of precedence
| Precedence |
Operator(s) |
Description |
Order of evaluation |
| 21 |
|
Grouping (parentheses) |
n/a |
| 20 |
|
Object instantiation |
right-to-left |
| 19 |
|
Member access, computed member, call, optional chaining |
left-to-right |
| 18 |
|
Object instantiation |
right-to-left |
| 17 |
|
Post-increment, post-decrement |
left-to-right |
| 16 |
|
Unary operators |
right-to-left |
| 15 |
|
Exponentiation |
right-to-left |
| 14 |
|
Multiplication, division, remainder |
left-to-right |
| 13 |
|
Addition, subtraction |
left-to-right |
| 12 |
|
Bitwise shifts |
left-to-right |
| 11 |
|
Comparisons |
left-to-right |
| 10 |
|
Equality |
left-to-right |
| 9 |
|
Bitwise AND |
left-to-right |
| 8 |
|
Bitwise XOR |
left-to-right |
| 7 |
|
Bitwise OR |
left-to-right |
| 6 |
|
Logical AND |
left-to-right |
| 5 |
|
Logical OR |
left-to-right |
| 4 |
|
Nullish coalescing |
left-to-right |
| 3 |
|
Ternary conditional |
right-to-left |
| 2 |
|
Assignment |
right-to-left |
| 1 |
|
Comma (sequence) |
left-to-right |
Use the precedence table to check JavaScript operators, their precedence levels, and their evaluation direction. section 2.1.6
