Revision 1125905 of Operator precedence

Revision slug: Web/JavaScript/Reference/Operators/Operator_Precedence
Revision title: Operator precedence
Revision id: 1125905
Created: Sep 30, 2016, 3:16:24 PM
Creator: michaelficarra
Is current revision? No
Comment removing technical review flag

Tags:

Revision Content

Operator precedence determines the order in which operators are evaluated. Operators with higher precedence are evaluated first.

A common example:

3 + 4 * 5 // returns 23

The multiplication operator ("*") has higher precedence than the addition operator ("+") and thus will be evaluated first.

Associativity

Associativity determines the order in which operators of the same precedence are processed. For example, consider an expression:

a OP b OP c

Left-associativity (left-to-right) means that it is processed as (a OP b) OP c, while right-associativity (right-to-left) means it is interpreted as a OP (b OP c). Assignment operators are right-associative, so you can write:

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 it 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.

Table

The following table is ordered from highest (19) to lowest (0) precedence.

Precedence	Operator type	Associativity	Individual operators
19	{{jsxref("Operators/Grouping", "Grouping")}}	n/a	`( … )`
18	{{jsxref("Operators/Property_Accessors", "Member Access", "#Dot_notation")}}	left-to-right	`… . …`
	{{jsxref("Operators/Property_Accessors", "Computed Member Access","#Bracket_notation")}}	left-to-right	`… [ … ]`
	{{jsxref("Operators/new","new")}} (with argument list)	n/a	`new … ( … )`
17	Function Call	left-to-right	`… ( … )`
17	{{jsxref("Operators/new","new")}} (without argument list)	right-to-left	`new …`
16	{{jsxref("Operators/Arithmetic_Operators","Postfix Increment","#Increment")}}	n/a	`… ++`
16	{{jsxref("Operators/Arithmetic_Operators","Postfix Decrement","#Decrement")}}	n/a	`… --`
15	Logical NOT	right-to-left	`! …`
	Bitwise NOT	right-to-left	`~ …`
	Unary Plus	right-to-left	`+ …`
	Unary Negation	right-to-left	`- …`
	Prefix Increment	right-to-left	`++ …`
	Prefix Decrement	right-to-left	`-- …`
	typeof	right-to-left	`typeof …`
	void	right-to-left	`void …`
	delete	right-to-left	`delete …`
14	Exponentiation	right-to-left	`… ** …`
	Multiplication	left-to-right	`… * …`
	Division	left-to-right	`… / …`
	Remainder	left-to-right	`… % …`
13	Addition	left-to-right	`… + …`
13	Subtraction	left-to-right	`… - …`
12	Bitwise Left Shift	left-to-right	`… << …`
	Bitwise Right Shift	left-to-right	`… >> …`
	Bitwise Unsigned Right Shift	left-to-right	`… >>> …`
11	Less Than	left-to-right	`… < …`
	Less Than Or Equal	left-to-right	`… <= …`
	Greater Than	left-to-right	`… > …`
	Greater Than Or Equal	left-to-right	`… >= …`
	in	left-to-right	`… in …`
	instanceof	left-to-right	`… instanceof …`
10	Equality	left-to-right	`… == …`
	Inequality	left-to-right	`… != …`
	Strict Equality	left-to-right	`… === …`
	Strict Inequality	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	Conditional	right-to-left	`… ? … : …`
3	Assignment	right-to-left	`… = …`
			`… += …`
			`… -= …`
			`… **= …`
			`… *= …`
			`… /= …`
			`… %= …`
			`… <<= …`
			`… >>= …`
			`… >>>= …`
			`… &= …`
			`… ^= …`
			`… \|= …`
2	yield	right-to-left	`yield …`
2	yield*	right-to-left	`yield* …`
1	Spread	n/a	`...` …
0	Comma / Sequence	left-to-right	`… , …`

Revision Source

<div>{{jsSidebar("Operators")}}</div>

<p>Operator precedence determines the order in which operators are evaluated. Operators with higher precedence are evaluated first.</p>

<p>A common example:</p>

<pre class="brush: js">
3 + 4 * 5 // returns 23
</pre>

<p>The multiplication operator ("<code>*</code>") has higher precedence than the addition operator ("<code>+</code>") and thus will be evaluated first.</p>

<h2 id="Associativity">Associativity</h2>

<p>Associativity determines the order in which operators of the same precedence are processed. For example, consider an expression:</p>

<pre class="syntaxbox">
a OP b OP c
</pre>

<p>Left-associativity (left-to-right) means that it is processed as <code>(a OP b) OP c</code>, while right-associativity (right-to-left) means it is interpreted as <code>a OP (b OP c)</code>. Assignment operators are right-associative, so you can write:</p>

<pre class="brush: js">
a = b = 5;
</pre>

<p>with the expected result that <code>a</code> and <code>b</code> get the value 5. This is because the assignment operator returns the value that it assigned. First, <code>b</code> is set to 5. Then the <code>a</code> is also set to 5, the return value of <code>b = 5</code>, aka right operand of the assignment.</p>

<h2 id="Table">Table</h2>

<p>The following table is ordered from highest (19) to lowest (0) precedence.</p>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <th>Precedence</th>
   <th>Operator type</th>
   <th>Associativity</th>
   <th>Individual operators</th>
  </tr>
  <tr>
   <td>19</td>
   <td>{{jsxref("Operators/Grouping", "Grouping")}}</td>
   <td>n/a</td>
   <td><code>( … )</code></td>
  </tr>
  <tr>
   <td rowspan="3">18</td>
   <td>{{jsxref("Operators/Property_Accessors", "Member Access", "#Dot_notation")}}</td>
   <td>left-to-right</td>
   <td><code>… . …</code></td>
  </tr>
  <tr>
   <td>{{jsxref("Operators/Property_Accessors", "Computed Member Access","#Bracket_notation")}}</td>
   <td>left-to-right</td>
   <td><code>… [ … ]</code></td>
  </tr>
  <tr>
   <td>{{jsxref("Operators/new","new")}} (with argument list)</td>
   <td>n/a</td>
   <td><code>new … ( … )</code></td>
  </tr>
  <tr>
   <td rowspan="2">17</td>
   <td><a href="/en-US/docs/Web/JavaScript/Guide/Functions" title="JavaScript/Reference/Operators/Special_Operators/function_call">Function Call</a></td>
   <td>left-to-right</td>
   <td><code>… (&nbsp;<var>…&nbsp;</var>)</code></td>
  </tr>
  <tr>
   <td>{{jsxref("Operators/new","new")}}&nbsp;(without argument list)</td>
   <td>right-to-left</td>
   <td><code>new …</code></td>
  </tr>
  <tr>
   <td rowspan="2">16</td>
   <td>{{jsxref("Operators/Arithmetic_Operators","Postfix Increment","#Increment")}}</td>
   <td>n/a</td>
   <td><code>… ++</code></td>
  </tr>
  <tr>
   <td>{{jsxref("Operators/Arithmetic_Operators","Postfix Decrement","#Decrement")}}</td>
   <td>n/a</td>
   <td><code>… --</code></td>
  </tr>
  <tr>
   <td rowspan="9">15</td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT" title="JavaScript/Reference/Operators/Logical_Operators">Logical NOT</a></td>
   <td>right-to-left</td>
   <td><code>! …</code></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitwise NOT</a></td>
   <td>right-to-left</td>
   <td><code>~ …</code></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus" title="JavaScript/Reference/Operators/Arithmetic_Operators">Unary Plus</a></td>
   <td>right-to-left</td>
   <td><code>+ …</code></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation" title="JavaScript/Reference/Operators/Arithmetic_Operators">Unary Negation</a></td>
   <td>right-to-left</td>
   <td><code>- …</code></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment" title="JavaScript/Reference/Operators/Arithmetic_Operators">Prefix Increment</a></td>
   <td>right-to-left</td>
   <td><code>++ …</code></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement" title="JavaScript/Reference/Operators/Arithmetic_Operators">Prefix Decrement</a></td>
   <td>right-to-left</td>
   <td><code>-- …</code></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof" title="JavaScript/Reference/Operators/Special_Operators/typeof_Operator">typeof</a></td>
   <td>right-to-left</td>
   <td><code>typeof …</code></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/void" title="JavaScript/Reference/Operators/Special_Operators/void_Operator">void</a></td>
   <td>right-to-left</td>
   <td><code>void …</code></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="JavaScript/Reference/Operators/Special_Operators/delete_Operator">delete</a></td>
   <td>right-to-left</td>
   <td><code>delete …</code></td>
  </tr>
  <tr>
   <td rowspan="4">14</td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation" title="JavaScript/Reference/Operators/Arithmetic_Operators">Exponentiation</a></td>
   <td>right-to-left</td>
   <td><code>… ** …</code></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Multiplication" title="JavaScript/Reference/Operators/Arithmetic_Operators">Multiplication</a></td>
   <td>left-to-right</td>
   <td><code>… *&nbsp;…</code></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Division" title="JavaScript/Reference/Operators/Arithmetic_Operators">Division</a></td>
   <td>left-to-right</td>
   <td><code>… /&nbsp;…</code></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder" title="JavaScript/Reference/Operators/Arithmetic_Operators">Remainder</a></td>
   <td>left-to-right</td>
   <td><code>… %&nbsp;…</code></td>
  </tr>
  <tr>
   <td rowspan="2">13</td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition" title="JavaScript/Reference/Operators/Arithmetic_Operators">Addition</a></td>
   <td>left-to-right</td>
   <td><code>… +&nbsp;…</code></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Subtraction" title="JavaScript/Reference/Operators/Arithmetic_Operators">Subtraction</a></td>
   <td>left-to-right</td>
   <td><code>… -&nbsp;…</code></td>
  </tr>
  <tr>
   <td rowspan="3">12</td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitwise Left Shift</a></td>
   <td>left-to-right</td>
   <td><code>… &lt;&lt;&nbsp;…</code></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitwise Right Shift</a></td>
   <td>left-to-right</td>
   <td><code>… &gt;&gt;&nbsp;…</code></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitwise Unsigned Right Shift</a></td>
   <td>left-to-right</td>
   <td><code>… &gt;&gt;&gt;&nbsp;…</code></td>
  </tr>
  <tr>
   <td rowspan="6">11</td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Less Than</a></td>
   <td>left-to-right</td>
   <td><code>… &lt;&nbsp;…</code></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than__or_equal_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Less Than Or Equal</a></td>
   <td>left-to-right</td>
   <td><code>… &lt;=&nbsp;…</code></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Greater Than</a></td>
   <td>left-to-right</td>
   <td><code>… &gt;&nbsp;…</code></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_or_equal_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Greater Than Or Equal</a></td>
   <td>left-to-right</td>
   <td><code>… &gt;=&nbsp;…</code></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/in" title="JavaScript/Reference/Operators/Special_Operators/in_Operator">in</a></td>
   <td>left-to-right</td>
   <td><code>… in&nbsp;…</code></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/instanceof" title="JavaScript/Reference/Operators/Special_Operators/instanceof_Operator">instanceof</a></td>
   <td>left-to-right</td>
   <td><code>… instanceof&nbsp;…</code></td>
  </tr>
  <tr>
   <td rowspan="4">10</td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality" title="JavaScript/Reference/Operators/Comparison_Operators">Equality</a></td>
   <td>left-to-right</td>
   <td><code>… ==&nbsp;…</code></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality" title="JavaScript/Reference/Operators/Comparison_Operators">Inequality</a></td>
   <td>left-to-right</td>
   <td><code>… !=&nbsp;…</code></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity" title="JavaScript/Reference/Operators/Comparison_Operators">Strict Equality</a></td>
   <td>left-to-right</td>
   <td><code>… ===&nbsp;…</code></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Nonidentity" title="JavaScript/Reference/Operators/Comparison_Operators">Strict Inequality</a></td>
   <td>left-to-right</td>
   <td><code>… !==&nbsp;…</code></td>
  </tr>
  <tr>
   <td>9</td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitwise AND</a></td>
   <td>left-to-right</td>
   <td><code>… &amp;&nbsp;…</code></td>
  </tr>
  <tr>
   <td>8</td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitwise XOR</a></td>
   <td>left-to-right</td>
   <td><code>… ^&nbsp;…</code></td>
  </tr>
  <tr>
   <td>7</td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitwise OR</a></td>
   <td>left-to-right</td>
   <td><code>… |&nbsp;…</code></td>
  </tr>
  <tr>
   <td>6</td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND" title="JavaScript/Reference/Operators/Logical_Operators">Logical AND</a></td>
   <td>left-to-right</td>
   <td><code>… &amp;&amp;&nbsp;…</code></td>
  </tr>
  <tr>
   <td>5</td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR" title="JavaScript/Reference/Operators/Logical_Operators">Logical OR</a></td>
   <td>left-to-right</td>
   <td><code>… ||&nbsp;…</code></td>
  </tr>
  <tr>
   <td>4</td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator" title="JavaScript/Reference/Operators/Special_Operators/Conditional_Operator">Conditional</a></td>
   <td>right-to-left</td>
   <td><code>… ? … : …</code></td>
  </tr>
  <tr>
   <td rowspan="13">3</td>
   <td rowspan="13"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators" title="JavaScript/Reference/Operators/Assignment_Operators">Assignment</a></td>
   <td rowspan="13">right-to-left</td>
   <td><code>… =&nbsp;…</code></td>
  </tr>
  <tr>
   <td><code>… +=&nbsp;…</code></td>
  </tr>
  <tr>
   <td><code>… -=&nbsp;…</code></td>
  </tr>
  <tr>
   <td><code>… **=&nbsp;…</code></td>
  </tr>
  <tr>
   <td><code>… *=&nbsp;…</code></td>
  </tr>
  <tr>
   <td><code>… /=&nbsp;…</code></td>
  </tr>
  <tr>
   <td><code>… %=&nbsp;…</code></td>
  </tr>
  <tr>
   <td><code>… &lt;&lt;=&nbsp;…</code></td>
  </tr>
  <tr>
   <td><code>… &gt;&gt;=&nbsp;…</code></td>
  </tr>
  <tr>
   <td><code>… &gt;&gt;&gt;=&nbsp;…</code></td>
  </tr>
  <tr>
   <td><code>… &amp;=&nbsp;…</code></td>
  </tr>
  <tr>
   <td><code>… ^=&nbsp;…</code></td>
  </tr>
  <tr>
   <td><code>… |=&nbsp;…</code></td>
  </tr>
  <tr>
   <td rowspan="2">2</td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield" title="JavaScript/Reference/Operators/yield">yield</a></td>
   <td>right-to-left</td>
   <td><code>yield&nbsp;…</code></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield*" title="JavaScript/Reference/Operators/yield">yield*</a></td>
   <td>right-to-left</td>
   <td><code>yield*&nbsp;…</code></td>
  </tr>
  <tr>
   <td>1</td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="JavaScript/Reference/Operators/Spread_operator">Spread</a></td>
   <td>n/a</td>
   <td><code>...</code>&nbsp;…</td>
  </tr>
  <tr>
   <td>0</td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator" title="JavaScript/Reference/Operators/Comma_Operator">Comma / Sequence</a></td>
   <td>left-to-right</td>
   <td><code>… ,&nbsp;…</code></td>
  </tr>
 </tbody>
</table>

Revert to this revision