Northcentral Technical College Introduction To Programming
10-152-310
Introduction to Programming with JavaScript NTC 10-152-310

Learning Plan 3 Operator Precedence

# Operator Precedence

#### File: /Learning Plan 3/operatorPrecedence.html

> What is the result of 2+3*4?

### The order that things are done.

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

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

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

Operators | Precedence
`.` | Highest
`()` |
`++ --` |
`typeof` |
`* / %` |
`+ -` |
`< <= > >=` |
`== != === !==` |
`= += -= *= /=` | Lowest

- Let's look at some examples. First just addition and subtraction

- By putting parentheses at different places we'll see if we can change the output.

- Still `14`, how about this:

- `14` again, can we get a different result?

- Hmm, maybe not. Let's try one more thing:

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

- How'd it get `18`? Add some parentheses to see if we can see the order that JavaScript used.

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

        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.

- Very different results! What the conclusion? It's this:

Always use parentheses when doing math with more than two parts.

- And:

Test Your Code!

### Practice Makes Permanence

> This should be fun! 3.2 Lab 3