Operator Precedence and associativity in JavaScript

Operator Precedence

Operator precedence determines the order in which operators are evaluated when more than one operator is used in an expression.

The higher an operator’s precedence, the earlier it is evaluated in comparison with the operators with lower precedence.

Consider the following example:

The above expression is evaluated in the order of the multiplication operator (*) at first, then the plus operator (+), and finally, the assignment operator (=), due to their respective precedence order.

Precedence can also be manually overridden using a parenthesis e.g.,

The above mentioned expression has its parenthesis around the plus operator, which alters the precedence thereby evaluating the addition operation first.

Operator Associativity

Associativity determines the way in which the operators having same precedence are parsed e.g.:

Left-associativity (left to right) denotes that it is processed as (a <operator> b) <operator> c, while right-associativity (right to left) denotes it is interpreted as a <operator> (b <operator>c).

Assignment operators are right-associative i.e.,

Here both a and b get the same value 5.

At first, b is set to 5.

Then a is also initialized to 5 i.e., the return value of b = 5(right operand of the assignment).

Operator Precedence Table

In the following table, the highest precedence refers to 20 and to the lowest to 1.

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