What is Operator Precedence in JavaScript?

Operator precedence in javascript means which operator gets called first in a single line of code.  Order in which operator gets called is from highest precedence to lowest precedence i.e operator with higher precedence is evaluated first.

Here is table of Operator precedence from Highest to Lowest.

Source: MDN (Mozilla Developer Network)

Let’s evaluate the following code with the help of Operator precedence table.

let a = 3 + 4 * 5;

console.log(a);
// 23

If you check the table, we see that multiplication has precedence of 15 and addition has precedence of 13. Since multiplication has higher precedence, it will be called first which gives us 20. And after that addition operator is called which gives us 23.

let a  =  3 + 4 * 5
       =  3 + 20
       =  23

Let’s try another example.

let b = (3 + 4) * 5;

console.log(b);
// 35

Since parenthesis (grouping) has the highest precedence, it gets called first and also the addition operator inside the parenthesis. After that multiplication operator gets called. Even though addition operator has lower precedence than multiplication, it gets called before multiplication because it is inside the bracket.

let b  = (3 + 4) * 5
       =  7 * 5
       =  35

However, remember that operators inside the parenthesis does not always get called first.

let a = true, b = 2, c = 3;

let x = a || (b * c);

console.log(x);
// true

Associativity

Now how about if the operators have same precedence?

Notice that addition and subtraction has same precedence.If they were both in a single line of code which operator would be called first?

let sum = 3 – 4 + 5;

In what order will the value of variable sum be evaluated?

In our example above, addition and subtraction have left associativity. So left gets evaluated first and then right.

let sum = 3 – 4 + 5
        = –1 + 5
        =  4

You can interpret this being called as

let sum = (3 – 4) + 5

Let’s try another example. What will be the value of variable i, j and k ?

let i = 3, j = 4, k = 5;

i = j = k;

Let’s check the associativity of assignment operator. It is right associativity so right will get processed first and then left.

In our example above, j is first set to the value of k which is 5 and then i is set to the returned value of j.

let i = 3, j = 4, k = 5

i = j = k;

i =  j = 5;

i = j

i = 5;

You can interpret this as

i = ( j = k )

console.log(i);
// 5

console.log(j);
// 5

console.log(k);
// 5

Summary

If there are operators with different precedence. Operator with greater precedence gets evaluated first. Associativity does not matter.

If there is only one operator, associativity does not matter.

If there are operators with equal precedence, associativity matters. Based on operator associativity, order of evaluation can be left to right or right to left.

Operators with same precedence has same associativity.