Skip to content

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);
  • 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);
  • 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
Addition and subtraction
1
2
3
4
5
6
// Addition and subtraction
let 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);
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);
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);
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);
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);
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);
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);

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);

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