# Operator precedence

Operator precedence determines how operators are parsed concerning each other. Operators with higher precedence become the operands of operators with lower precedence.

## Precedence And Associativity

Consider an expression describable by the representation below. Note that both `OP1` and `OP2` are fill-in-the-blanks for OPerators.

```a OP1 b OP2 c
```

If `OP1` and `OP2` have different precedence levels (see the table below), the operator with the highest 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);   // logs 23
console.log(3 + (10 * 2)); // logs 23 because parentheses here are superfluous
console.log((3 + 10) * 2); // logs 26 because the parentheses change the order
``````

Left-associativity (left-to-right) means that it is processed as `(a OP1 b) OP2 c`, while right-associativity (right-to-left) means it is interpreted as `a OP1 (b OP2 c)`. Assignment operators are right-associative, 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`, aka right operand of the assignment.

As another example, the unique exponentiation operator has right-associativity, whereas other arithmetic operators have left-associativity. It is interesting to note that, the order of evaluation is always left-to-right regardless of associativity and precedence.

 Code Output ``````function echo(name, num) { console.log("Evaluating the " + name + " side"); return num; } // Notice the division operator (/) console.log(echo("left", 6) / echo("right", 2)); `````` ```Evaluating the left side Evaluating the right side 3 ``` ``````function echo(name, num) { console.log("Evaluating the " + name + " side"); return num; } // Notice the exponentiation operator (**) console.log(echo("left", 2) ** echo("right", 3));`````` ```Evaluating the left side Evaluating the right side 8```

The difference in associativity comes into play when there are multiple operators of the same precedence. With only one operator or operators of different precedences, associativity doesn't affect the output, as seen in the example above. In the example below, observe how associativity affects the output when multiple of the same operator are used.

 Code Output ``````function echo(name, num) { console.log("Evaluating the " + name + " side"); return num; } // Notice the division operator (/) console.log(echo("left", 6) / echo("middle", 2) / echo("right", 3)); `````` ```Evaluating the left side Evaluating the middle side Evaluating the right side 1 ``` ``````function echo(name, num) { console.log("Evaluating the " + name + " side"); return num; } // Notice the exponentiation operator (**) console.log(echo("left", 2) ** echo("middle", 3) ** echo("right", 2)); `````` ```Evaluating the left side Evaluating the middle side Evaluating the right side 512 ``` ``````function echo(name, num) { console.log("Evaluating the " + name + " side"); return num; } // Notice the parentheses around the left and middle exponentiation console.log((echo("left", 2) ** echo("middle", 3)) ** echo("right", 2));`````` ```Evaluating the left side Evaluating the middle side Evaluating the right side 64```

Looking at the code snippets above, `6 / 2 / 3` is the same as `(6 / 2) / 3` because division is left-associative. Exponentiation, on the other hand, is right-associative, so `2 ** 3 ** 2` is the same as `2 ** (3 ** 2)`. Thus, doing `(2 ** 3) ** 2` changes the order and results in the 64 seen in the table above.

Remember that precedence comes before associativity. So, mixing division and exponentiation, the exponentiation comes before the division. For example, `2 ** 3 / 3 ** 2` results in 0.8888888888888888 because it is the same as `(2 ** 3) / (3 ** 2)`.

### Note on grouping and short-circuiting

In the table below, Grouping is listed as having the highest precedence. However, that does not always mean the expression within the grouping symbols `( … )` is evaluated first, especially when it comes to short-circuiting.

Short-circuiting is jargon for conditional evaluation. For example, in the expression `a && (b + c)`, if `a` is falsy, then the sub-expression `(b + c)` will not even get evaluated, even if it is in parentheses. We could say that the logical conjunction operator ("&&") is "short-circuited". Along with logical conjunction, other short-circuited operators include logical disjunction ("OR"), nullish-coalescing, optional chaining, and the conditional operator. Some more examples follow.

``````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`
``````

## Examples

``````3 > 2 && 2 > 1
// returns true

3 > 2 > 1
// Returns false because 3 > 2 is true, then true is converted to 1
// in inequality operators, therefore true > 1 becomes 1 > 1, which
//  is false. Adding parentheses makes things clear: (3 > 2) > 1.
``````

## Table

The following table lists operators in order from highest precedence (18) to lowest precedence (1).

1. 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.
2. The operand of unary operators (precedence 14; excluding prefix increment/decrement) cannot be an exponentiation `**` (precedence 13) without grouping, or there will be a `SyntaxError`. That means, although `-1 ** 2` is technically unambiguous, the language requires you to use `(-1) ** 2` instead.
3. 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` or `a ?? (b || c)`, instead of `a ?? b || c`.
4. Some operators have certain operands that require expressions narrower than those produced by higher-precedence operators. For example, the right-hand side of member access `.` (precedence 17) must be an identifier instead of a grouped expression. The left-hand side of arrow `=>` (precedence 15) must be an arguments list or a single identifier instead of some random expression.
5. Some operators have certain operands that accept expressions wider than those produced by higher-precedence operators. For example, the bracket-enclosed 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 left-to-right `… . …`
Computed Member Access n/a `… [ … ]`
`new` (with argument list) n/a `new … ( … )`
Function Call n/a `… ( … )`
Optional chaining left-to-right `?.`
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 (**) right-to-left `… ** …`
12 Multiplication (*) left-to-right `… * …`
Division (/) `… / …`
Remainder (%) `… % …`
11 Addition (+) left-to-right `… + …`
Subtraction (-) `… - …`
10 Bitwise Left Shift (<<) left-to-right `… << …`
Bitwise Right Shift (>>) `… >> …`
Bitwise Unsigned Right Shift (>>>) `… >>> …`
9 Less Than (<) left-to-right `… < …`
Less Than Or Equal (<=) `… <= …`
Greater Than (>) `… > …`
Greater Than Or Equal (>=) `… >= …`
`in` `… in …`
`instanceof` `… instanceof …`
8 Equality (==) left-to-right `… == …`
Inequality (!=) `… != …`
Strict Equality (===) `… === …`
Strict Inequality (!==) `… !== …`
7 Bitwise AND (&) left-to-right `… & …`
6 Bitwise XOR (^) left-to-right `… ^ …`
5 Bitwise OR (|) left-to-right `… | …`
4 Logical AND (&&) left-to-right `… && …`
3 Logical OR (||) left-to-right `… || …`
Nullish coalescing operator (??) left-to-right `… ?? …`
2 Assignment right-to-left `… = …`
`… += …`
`… -= …`
`… **= …`
`… *= …`
`… /= …`
`… %= …`
`… <<= …`
`… >>= …`
`… >>>= …`
`… &= …`
`… ^= …`
`… |= …`
`… &&= …`
`… ||= …`
`… ??= …`
Conditional (ternary) operator right-to-left
(Groups on expressions after `?`)
`… ? … : …`
Arrow (=>) n/a `… => …`
`yield` `yield …`
`yield*` `yield* …`
Spread (...) `... …`
1 Comma / Sequence left-to-right `… , …`