Operator precedence
Operator precedence determines how operators are parsed concerning each other. Operators with higher precedence become the operands of operators with lower precedence.
Try it
Precedence And Associativity
Consider an expression describable by the representation below, where both OP1
and OP2
are fillintheblanks for OPerators.
a OP1 b OP2 c
The combination above has two possible interpretations:
(a OP1 b) OP2 c a OP1 (b OP2 c)
Which one the language decides to adopt depends on the identity of OP1
and OP2
.
If OP1
and OP2
have different precedence levels (see the table below), the operator with the higher precedence goes first and associativity does not matter. Observe how multiplication has higher precedence than addition and executed first, even though addition is written first in the code.
console.log(3 + 10 * 2); // 23
console.log(3 + (10 * 2)); // 23, because parentheses here are superfluous
console.log((3 + 10) * 2); // 26, because the parentheses change the order
Within operators of the same precedence, the language groups them by associativity. Leftassociativity (lefttoright) means that it is interpreted as (a OP1 b) OP2 c
, while rightassociativity (righttoleft) means it is interpreted as a OP1 (b OP2 c)
. Assignment operators are rightassociative, so you can write:
a = b = 5; // same as writing a = (b = 5);
with the expected result that a
and b
get the value 5. This is because the assignment operator returns the value that is assigned. First, b
is set to 5. Then the a
is also set to 5 — the return value of b = 5
, a.k.a. right operand of the assignment.
As another example, the unique exponentiation operator has rightassociativity, whereas other arithmetic operators have leftassociativity.
const a = 4 ** 3 ** 2; // Same as 4 ** (3 ** 2); evaluates to 262144
const b = 4 / 3 / 2; // Same as (4 / 3) / 2; evaluates to 0.6666...
Operators are first grouped by precedence, and then, for adjacent operators that have the same precedence, by associativity. So, when mixing division and exponentiation, the exponentiation always comes before the division. For example, 2 ** 3 / 3 ** 2
results in 0.8888888888888888 because it is the same as (2 ** 3) / (3 ** 2)
.
For prefix unary operators, suppose we have the following pattern:
OP1 a OP2 b
where OP1
is a prefix unary operator and OP2
is a binary operator. If OP1
has higher precedence than OP2
, then it would be grouped as (OP1 a) OP2 b
; otherwise, it would be OP1 (a OP2 b)
.
const a = 1;
const b = 2;
typeof a + b; // Equivalent to (typeof a) + b; result is "number2"
If the unary operator is on the second operand:
a OP2 OP1 b
Then the binary operator OP2
must have lower precedence than the unary operator OP1
for it to be grouped as a OP2 (OP1 b)
. For example, the following is invalid:
function* foo() {
a + yield 1;
}
Because +
has higher precedence than yield
, this would become (a + yield) 1
— but because yield
is a reserved word in generator functions, this would be a syntax error. Luckily, most unary operators have higher precedence than binary operators and do not suffer from this pitfall.
If we have two prefix unary operators:
OP1 OP2 a
Then the unary operator closer to the operand, OP2
, must have higher precedence than OP1
for it to be grouped as OP1 (OP2 a)
. It's possible to get it the other way and end up with (OP1 OP2) a
:
async function* foo() {
await yield 1;
}
Because await
has higher precedence than yield
, this would become (await yield) 1
, which is awaiting an identifier called yield
, and a syntax error. Similarly, if you have new !A;
, because !
has lower precedence than new
, this would become (new !) A
, which is obviously invalid. (This code looks nonsensical to write anyway, since !A
always produces a boolean, not a constructor function.)
For postfix unary operators (namely, ++
and 
), the same rules apply. Luckily, both operators have higher precedence than any binary operator, so the grouping is always what you would expect. Moreover, because ++
evaluates to a value, not a reference, you can't chain multiple increments together either, as you may do in C.
let a = 1;
a++++; // SyntaxError: Invalid lefthand side in postfix operation.
Operator precedence will be handled recursively. For example, consider this expression:
1 + 2 ** 3 * 4 / 5 >> 6
First, we group operators with different precedence by decreasing levels of precedence.
 The
**
operator has the highest precedence, so it's grouped first.  Looking around the
**
expression, it has*
on the right and+
on the left.*
has higher precedence, so it's grouped first.*
and/
have the same precedence, so we group them together for now.  Looking around the
*
//
expression grouped in 2, because+
has higher precedence than>>
, the former is grouped.
(1 + ( (2 ** 3) * 4 / 5) ) >> 6
// │ │ └─ 1. ─┘ │ │
// │ └────── 2. ───────┘ │
// └────────── 3. ──────────┘
Within the *
//
group, because they are both leftassociative, the left operand would be grouped.
(1 + ( ( (2 ** 3) * 4 ) / 5) ) >> 6
// │ │ │ └─ 1. ─┘ │ │ │
// │ └─│─────── 2. ───│────┘ │
// └──────│───── 3. ─────│──────┘
// └───── 4. ─────┘
Note that operator precedence and associativity only affect the order of evaluation of operators (the implicit grouping), but not the order of evaluation of operands. The operands are always evaluated from lefttoright. The higherprecedence expressions are always evaluated first, and their results are then composed according to the order of operator precedence.
function echo(name, num) {
console.log(`Evaluating the ${name} side`);
return num;
}
// Exponentiation operator (**) is rightassociative,
// but all call expressions (echo()), which have higher precedence,
// will be evaluated before ** does
console.log(echo("left", 4) ** echo("middle", 3) ** echo("right", 2));
// Evaluating the left side
// Evaluating the middle side
// Evaluating the right side
// 262144
// Exponentiation operator (**) has higher precedence than division (/),
// but evaluation always starts with the left operand
console.log(echo("left", 4) / echo("middle", 3) ** echo("right", 2));
// Evaluating the left side
// Evaluating the middle side
// Evaluating the right side
// 0.4444444444444444
If you are familiar with binary trees, think about it as a postorder traversal.
/ ┌────────┴────────┐ echo("left", 4) ** ┌────────┴────────┐ echo("middle", 3) echo("right", 2)
After all operators have been properly grouped, the binary operators would form a binary tree. Evaluation starts from the outermost group — which is the operator with the lowest precedence (/
in this case). The left operand of this operator is first evaluated, which may be composed of higherprecedence operators (such as a call expression echo("left", 4)
). After the left operand has been evaluated, the right operand is evaluated in the same fashion. Therefore, all leaf nodes — the echo()
calls — would be visited lefttoright, regardless of the precedence of operators joining them.
Shortcircuiting
In the previous section, we said "the higherprecedence expressions are always evaluated first" — this is generally true, but it has to be amended with the acknowledgement of shortcircuiting, in which case an operand may not be evaluated at all.
Shortcircuiting is jargon for conditional evaluation. For example, in the expression a && (b + c)
, if a
is falsy, then the subexpression (b + c)
will not even get evaluated, even if it is grouped and therefore has higher precedence than &&
. We could say that the logical AND operator (&&
) is "shortcircuited". Along with logical AND, other shortcircuited operators include logical OR (
), nullish coalescing (??
), and optional chaining (?.
).
a  (b * c); // evaluate `a` first, then produce `a` if `a` is "truthy"
a && (b < c); // evaluate `a` first, then produce `a` if `a` is "falsy"
a ?? (b  c); // evaluate `a` first, then produce `a` if `a` is not `null` and not `undefined`
a?.b.c; // evaluate `a` first, then produce `undefined` if `a` is `null` or `undefined`
When evaluating a shortcircuited operator, the left operand is always evaluated. The right operand will only be evaluated if the left operand cannot determine the result of the operation.
Note: The behavior of shortcircuiting is baked in these operators. Other operators would always evaluate both operands, regardless if that's actually useful — for example, NaN * foo()
will always call foo
, even when the result would never be something other than NaN
.
The previous model of a postorder traversal still stands. However, after the left subtree of a shortcircuiting operator has been visited, the language will decide if the right operand needs to be evaluated. If not (for example, because the left operand of 
is already truthy), the result is directly returned without visiting the right subtree.
Consider this case:
function A() { console.log('called A'); return false; }
function B() { console.log('called B'); return false; }
function C() { console.log('called C'); return true; }
console.log(C()  B() && A());
// Logs:
// called C
// true
Only C()
is evaluated, despite &&
having higher precedence. This does not mean that 
has higher precedence in this case — it's exactly because (B() && A())
has higher precedence that causes it to be neglected as a whole. If it's rearranged as:
console.log(A() && C()  B());
// Logs:
// called A
// called B
// false
Then the shortcircuiting effect of &&
would only prevent C()
from being evaluated, but because A() && C()
as a whole is false
, B()
would still be evaluated.
However, note that shortcircuiting does not change the final evaluation outcome. It only affects the evaluation of operands, not how operators are grouped — if evaluation of operands doesn't have side effects (for example, logging to the console, assigning to variables, throwing an error), shortcircuiting would not be observable at all.
The assignment counterparts of these operators (&&=
, =
, ??=
) are shortcircuited as well. They are shortcircuited in a way that the assignment does not happen at all.
Table
The following table lists operators in order from highest precedence (18) to lowest precedence (1).
Several notes about the table:
 Not all syntax included here are "operators" in the strict sense. For example, spread
...
and arrow=>
are typically not regarded as operators. However, we still included them to show how tightly they bind compared to other operators/expressions.  The left operand of an exponentiation
**
(precedence 13) cannot be one of the unary operators with precedence 14 without grouping, or there will be aSyntaxError
. That means, although1 ** 2
is technically unambiguous, the language requires you to use(1) ** 2
instead.  The operands of nullish coalescing
??
(precedence 3) cannot be a logical OR
(precedence 3) or logical AND&&
(precedence 4). That means you have to write(a ?? b)  c
ora ?? (b  c)
, instead ofa ?? b  c
.  Some operators have certain operands that require expressions narrower than those produced by higherprecedence operators. For example, the righthand side of member access
.
(precedence 17) must be an identifier instead of a grouped expression. The lefthand side of arrow=>
(precedence 2) must be an arguments list or a single identifier instead of some random expression.  Some operators have certain operands that accept expressions wider than those produced by higherprecedence operators. For example, the bracketenclosed expression of bracket notation
[ … ]
(precedence 17) can be any expression, even comma (precedence 1) joined ones. These operators act as if that operand is "automatically grouped". In this case we will omit the associativity.
Precedence  Operator type  Associativity  Individual operators 

18  Grouping  n/a  ( … ) 
17  Member Access  lefttoright  … . … 
Optional chaining  … ?. … 

Computed Member Access  n/a  … [ … ] 

new (with argument list) 
new … ( … ) 

Function Call  … ( … ) 

16  new (without argument list) 
n/a  new … 
15  Postfix Increment  n/a  … ++ 
Postfix Decrement  …  

14  Logical NOT (!)  n/a  ! … 
Bitwise NOT (~)  ~ … 

Unary plus (+)  + … 

Unary negation ()   … 

Prefix Increment  ++ … 

Prefix Decrement   … 

typeof 
typeof … 

void 
void … 

delete 
delete … 

await 
await … 

13  Exponentiation (**)  righttoleft  … ** … 
12  Multiplication (*)  lefttoright  … * … 
Division (/)  … / … 

Remainder (%)  … % … 

11  Addition (+)  lefttoright  … + … 
Subtraction ()  …  … 

10  Bitwise Left Shift (<<)  lefttoright  … << … 
Bitwise Right Shift (>>)  … >> … 

Bitwise Unsigned Right Shift (>>>)  … >>> … 

9  Less Than (<)  lefttoright  … < … 
Less Than Or Equal (<=)  … <= … 

Greater Than (>)  … > … 

Greater Than Or Equal (>=)  … >= … 

in 
… in … 

instanceof 
… instanceof … 

8  Equality (==)  lefttoright  … == … 
Inequality (!=)  … != … 

Strict Equality (===)  … === … 

Strict Inequality (!==)  … !== … 

7  Bitwise AND (&)  lefttoright  … & … 
6  Bitwise XOR (^)  lefttoright  … ^ … 
5  Bitwise OR ()  lefttoright  …  … 
4  Logical AND (&&)  lefttoright  … && … 
3  Logical OR ()  lefttoright  …  … 
Nullish coalescing operator (??)  … ?? … 

2  Assignment  righttoleft  … = … 
… += … 

… = … 

… **= … 

… *= … 

… /= … 

… %= … 

… <<= … 

… >>= … 

… >>>= … 

… &= … 

… ^= … 

… = … 

… &&= … 

… = … 

… ??= … 

Conditional (ternary) operator  righttoleft (Groups on expressions after ? ) 
… ? … : … 

Arrow (=>)  righttoleft  … => … 

yield 
n/a  yield … 

yield* 
yield* … 

Spread (...)  ... … 

1  Comma / Sequence  lefttoright  … , … 