# Operator Precedence

Question

What is the result of 2 + 3 * 4?

## Operator Precedence¶

##### The order that things are done.¶

Let's look at 2 + 3 * 4. If we put it in JavaScript we get:

 ```1 2 3 4 5 6``` ``````// Operator precedence let results; results = 2 + 3 * 4; document.write(results); ``````
```

// Operator precedence
var results;

results = 2 + 3 * 4;

document.write(results);

```
• Is that what you expected? Or did you expect `20`?
• We get `14` because JavaScript did the `(3 * 4)` first to get `12` and then added the `2` for `14` .
• If you expected `20`, then you did the `(2 + 3)` first for `5` and then multiplied by `4` to get `20`.
• Why did JavaScript do it the first way?
• Because of Operator Precedence. JavaScript has been told the order to do things when you have a group of things to do.
• What if we want `20`? Then we can change the order that JavaScript will use. We change the order with parentheses.
 ```1 2 3 4 5 6``` ``````// Changing precedence with () let results; results = (2 + 3) * 4; document.write(results); ``````
```

// Changing precedence with ()
var results;

results = (2 + 3) * 4;

document.write(results);

```
• JavaScript will do things in parentheses first, always!
• This table shows the order that JavaScript will perform the operators that we know up to now.
• The operators that JavaScript will do first are at the top, and the last things are at the bottom.
• If operators are in the same cell, then they have no precedence and will be performed from left to right.

## Operator Precedence table¶

Operators Precedence
`.` Highest
`()`
`++ --`
`typeof`
`* / %`
`+ -`
`< <= > >=`
`== != === !==`
`= += -= *= /=` Lowest
 ```1 2 3 4 5 6``` ``````// Addition and subtraction let test; test = 2 + 4 + 6 - 10 + 12; document.write(test); ``````
```

var test;

test = 2 + 4 + 6 - 10 + 12;

document.write(test);

```
##### By putting parentheses at different places, we'll see if we can change the output.¶
 ```1 2 3 4 5 6``` ``````// Changing precedence with () let test; test = (2 + 4) + 6 - 10 + 12; document.write(test); ``````
```

// Changing precedence with ()
var test;

test = (2 + 4) + 6 - 10 + 12;

document.write(test);

```
##### Still `14`, how about this:¶
 ```1 2 3 4 5 6``` ``````// Changing precedence with () let test; test = 2 + (4 + 6) - 10 + 12; document.write(test); ``````
```

// Changing precedence with ()
var test;

test = 2 + (4 + 6) - 10 + 12;

document.write(test);

```
##### `14` again, can we get a different result?¶
 ```1 2 3 4 5 6``` ``````// Changing precedence with () let test; test = 2 + 4 + (6 - 10) + 12; document.write(test); ``````
```

// Changing precedence with ()
var test;

test = 2 + 4 + (6 - 10) + 12;

document.write(test);

```
##### Hmm, maybe not. Let's try one more thing:¶
 ```1 2 3 4 5 6``` ``````// Changing precedence with () let test; test = 2 + 4 + 6 - (10 + 12); document.write(test); ``````
```

// Changing precedence with ()
var test;

test = 2 + 4 + 6 - (10 + 12);

document.write(test);

```
##### Whoa! That's different.¶

Could that be right? It sure is, even with just addition and subtraction, we have to be careful with operator precedence.

##### Now let's do some more complicated math.¶
 ```1 2 3 4 5 6``` ``````// Precedence with more operators let results; results = 2 + 3 * 4 + 2 / 3 * 6; document.write(results); ``````
```

// Precedence with more operators
var results;

results = 2 + 3 * 4 + 2 / 3 * 6;

document.write(results);

```
##### How'd it get `18`?¶

Add some parentheses to see if we can see the order that JavaScript used.

 ```1 2 3 4 5 6``` ``````// Changing precedence with () let results; results = 2 + (3 * 4) + ((2 / 3) * 6); document.write(results); ``````
```

// Changing precedence with ()
var results;

results = 2 + (3 * 4) + ((2 / 3) * 6);

document.write(results);

```
##### Let's trace through each step¶
```2 + (3 * 4) + ((2 / 3) * 6)
2 + (12) + ((0.666666666666667) * 6)
2 + 12 + (0.666666666666667 * 6)
2 + 12 + (4)
2 + 12 + 4
18
```
##### That makes sense now.¶

With something like this we can have lots of different outputs depending on where we put the parentheses. Let's trace through a few and then code them.

```2 + 3 * 4 + 2 / 3 * 6
(2 + 3) * (4 + 2) / (3 * 6)
(5) * (6) / (18)
5 * 6 / 18
(5 * 6) / 18
30 / 18
1.6666666666666667
```
##### Code Sample¶
 ```1 2 3 4 5 6``` ``````// Changing precedence with () let results; results = (2 + 3) * (4 + 2) / (3 * 6); document.write(results); ``````
```

// Changing precedence with ()
var results;

results = (2 + 3) * (4 + 2) / (3 * 6);

document.write(results);

```

Let's trace through each step

```2 + 3 * 4 + 2 / 3 * 6
2 + ((3 * 4) + 2) / 3 * 6
2 + ((12) + 2) / 3 * 6
2 + (12 + 2) / 3 * 6
2 + 14 / 3 * 6
2 + (14 / 3) * 6
2 + (4.66666666666667 * 6)
2 + (28)
2 + 28
30
```
##### Code Sample.¶
 ```1 2 3 4 5 6``` ``````// Changing precedence with () let results; results = 2 + ((3 * 4) + 2) / 3 * 6; document.write(results); ``````
```

// Changing precedence with ()
var results;

results = 2 + ((3 * 4) + 2) / 3 * 6;

document.write(results);

```

Warning

Always use parentheses when doing math with more than two parts. Test Your Code Very Carefully!

Labs

1. Lab10: Operator Precedence
• unit02/labs/lab-10-operatorPrecedence.html