Search code examples
javascriptfunctionoperator-precedence

Why operator with lower precedence in JavaScript is being executed first?

I am running a line of code that has a function call and console.log in it. According to the precedence table, The function invocation () operator's value is 19 while the grouping operator has the highest precedence (20). So, is not it supposed to do whatever inside the grouping first?

function fn() {
  console.log("foo");
}

fn() + (console.log("bar"))

This prints foo on the first line and then bar.

While according to this I am supposed to see:

bar

foo

What am I missing here?

Solution

  • The JS engine evaluates '+' operator from left to right.

    Building the syntax tree the fn() is the left side node and the other statement is the right node. The interpreter evaluates the left node and puts it into the stack, then the right node and puts the result on the stack then performs the + operation to the two topmost elements on the stack.