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.

Table of Contents

## Operator Precedence

For Example, take a simple arithmetic operation.

1 2 3 |
100+100*20 |

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)

1 2 3 |
console.log(100+100*20); //2100 |

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

1 2 3 |
console.log((100+100)*20); //4000 |

## 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).

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

The assignment Operator `=`

has a right to left associativity.

`y=10`

is evaluated first.`y`

becomes 10- x=y is next. Hence
`x`

becomes 10.

1 2 3 4 |
y=5 x = y = 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.

- 10/5 = 2
- 2*20 = 40
- 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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
console.log(true || (alert("Hello"))) //alert is never evaluated let a =10 let b = 5 let c = 5 console.log(a || (b * c)); //10 b*c never invoked |

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

## Operator Precedence & Associativity Table

Precedence | Operator type | Associativity | Individual operators |
---|---|---|---|

21 | Grouping | n/a | ( â€¦ ) |

20 | Member Access | left-to-right | â€¦ . â€¦ |

Computed Member Access | left-to-right | â€¦ [ â€¦ ] | |

new (with argument list) | n/a | new â€¦ ( â€¦ ) | |

Function Call | left-to-right | â€¦ ( â€¦ ) | |

Optional chaining | left-to-right | ?. | |

19 | new (without argument list) | right-to-left | new â€¦ |

18 | Postfix Increment | n/a | â€¦ ++ |

Postfix Decrement | â€¦ -- | ||

17 | Logical NOT | right-to-left | ! â€¦ |

Bitwise NOT | ~ â€¦ | ||

Unary Plus | + â€¦ | ||

Unary Negation | - â€¦ | ||

Prefix Increment | ++ â€¦ | ||

Prefix Decrement | -- â€¦ | ||

typeof | typeof â€¦ | ||

void | void â€¦ | ||

delete | delete â€¦ | ||

await | await â€¦ | ||

16 | Exponentiation | right-to-left | â€¦ ** â€¦ |

15 | Multiplication | left-to-right | â€¦ * â€¦ |

Division | â€¦ / â€¦ | ||

Remainder | â€¦ % â€¦ | ||

14 | Addition | left-to-right | â€¦ + â€¦ |

Subtraction | â€¦ - â€¦ | ||

13 | Bitwise Left Shift | left-to-right | â€¦ << â€¦ |

Bitwise Right Shift | â€¦ >> â€¦ | ||

Bitwise Unsigned Right Shift | â€¦ >>> â€¦ | ||

12 | Less Than | left-to-right | â€¦ < â€¦ |

Less Than Or Equal | â€¦ <= â€¦ | ||

Greater Than | â€¦ > â€¦ | ||

Greater Than Or Equal | â€¦ >= â€¦ | ||

in | â€¦ in â€¦ | ||

instanceof | â€¦ instanceof â€¦ | ||

11 | Equality | left-to-right | â€¦ == â€¦ |

Inequality | â€¦ != â€¦ | ||

Strict Equality | â€¦ === â€¦ | ||

Strict Inequality | â€¦ !== â€¦ | ||

10 | Bitwise AND | left-to-right | â€¦ & â€¦ |

9 | Bitwise XOR | left-to-right | â€¦ ^ â€¦ |

8 | Bitwise OR | left-to-right | â€¦ | â€¦ |

7 | Logical AND | left-to-right | â€¦ && â€¦ |

6 | Logical OR | left-to-right | â€¦ || â€¦ |

5 | Nullish coalescing operator | left-to-right | â€¦ ?? â€¦ |

4 | Conditional | left-to-right | â€¦ ? â€¦ : â€¦ |

3 | Assignment | right-to-left | â€¦ = â€¦ |

â€¦ += â€¦ | |||

â€¦ -= â€¦ | |||

â€¦ **= â€¦ | |||

â€¦ *= â€¦ | |||

â€¦ /= â€¦ | |||

â€¦ %= â€¦ | |||

â€¦ <<= â€¦ | |||

â€¦ >>= â€¦ | |||

â€¦ >>>= â€¦ | |||

â€¦ &= â€¦ | |||

â€¦ ^= â€¦ | |||

â€¦ |= â€¦ | |||

â€¦ &&= â€¦ | |||

â€¦ ||= â€¦ | |||

â€¦ ??= â€¦ | |||

2 | yield | right-to-left | yield â€¦ |

yield* | yield* â€¦ | ||

1 | Comma / Sequence | left-to-right | â€¦ , â€¦ |

## Reference

**Read More**

- JavaScript Tutorial
- JavaScript Operators
- Arithmetic Operators
- Unary plus (+) & Unary minus (-)
- Increment & Decrement Operators
- Comparison or Relational Operators
- Strict Equality & Loose Equality Checker
- Ternary Conditional Operator
- Logical Operators
- Bitwise Operators
- Assignment Operators
- Nullish Coalescing Operator
- Comma Operator
- Operator Precedence