Learning Plan 3 : Math and Operators

What is the result of 2+3*4?

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: