Javascript Order of Operations
Tags: javascript
Published: 2020-07-23 19:03:00

If you're from the US, you may be familiar with the old saying, <b>Please Excuse My Dear Aunt Sally</b> or <b>PEMDAS</b>. It represents the order of operations or operator precedence of mathematic equations.

<ol>
<li>Parentheses</li>
<li>Exponents</li>
<li>Multiplication/Division</li>
<li>Addition/Subtraction</li>
</ol>

Programming languages have expanded version on these rules, but they follow a similar pattern. Just without the famous phrase. 

If you've ever declared a variable, then you've already interacted with Javascripts operator precedence. You can look at the [operator precedence table at MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table). This table is broken down into sections with a number tied to each operators precedence. The important part to grasp is: <b>the larger number is parsed first</b>.

___

<h2>Let's look at some examples</h2>

```javascript
 const a = 5 + 6 * 3;
```

How many operators do you see in the example above? There are two obvious operators (<b>+</b> & <b>*</b>) but there's a third less obvious operator: the assignment operator <b>=</b>. 

The order of operations in this line of code is pretty easy to follow. 

<ol>
<li>There's a declaration of a variable named `a`.</li>
<li>`a` points to a math equation.</li>
<li>JS calculates the equation:
  <ol>
  <li> 6 * 3 happens. <i>Multiplication part of PEMDAS, or 
     precedence power 15 on the table.</i></li>
  <li>5 + 18 happens. <i>Addition part of PEMDAS, or precedence 
     power 14.</i>
  </ol></li>
<li>The assignment operator, with precedence power of 3, resolves assigning a value of 23 to our variable `a`.</li>
</ol>

___


I'll add a comparative operator <i>(precedence power: 12)</i> in the next example, as well as some parentheses <i>(power: 21)</i>. I'll also introduce associativity. From the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Precedence_And_Associativity):

>The difference in associativity comes into play when there are multiple operators of the same precedence.

```javascript
const b = (16 - 2) + 4 > 1 + 5;
```

I'll briefly cover what happens in less detail. Pay attention to step two where we encounter associativity. 
<ol>
<li>Parentheses has the highest precedence: 16 - 2.</li>
<li>Addition and subtraction both go next, in their associative order: left-to-right
<ol>
<li> 14 + 4 </li>
<li> 1 + 5 </li>
</ol>
</li>
<li>Now our logical operator: 18 > 6</li>
<li>Finally, b is assigned the value of true. 18 is greater than 6.</li>
</ol>

___

The above examples don't stray too far from math, and should be easy to understand. There are plenty of edge cases involving operator precedence, probably lots that I haven't even encountered yet. 

One tricky example is declaring variables in succession. This just involves an understanding of associativity. 

```javascript
const first = second = 10;
console.log(first, second); // #=> output: 10, 10
```

The assignment operator resolves from right to left, so the first line could be rewritten as: `const first = (second = 10)`.

___ 

I have a lot to learn about operator precedence, but I hope that this post clearly explains some javascript fundamentals for someone trying to learn.