# Some Gotchas in Arithmetic Expression Evaluation : JavaScript

## Solve a small problem in JavaScript

This post is just for recollecting some of the basics of JavaScript. Let’s start with a small JavaScript code. Here is the code –– Solve it with out using the console.

Take your own time to come up with an answer before moving to the next section.

## Analyzing the problem

If your answer is `a = 3 and b = 5`, this post is written for you. Open your favorite browser and fire up the console. Put the above code in the console and see the values of `a` and `b` now.

Stunned ? Yeah, The values of `a` and `b` are `a = 0 and b = 5` now. Honestly I also got it wrong initially. I did ask this question to some of my friends ( who are in JavaScript circle ), and all of them gave me wrong answer.

## Some flashback

So, here is how I arrived this to particular question. Last week I was trying to write the code for an interview problem in JavaScript and it’s a very common one –– How to swap values of 2 variables with out using a 3rd variable.

Let the variables be `a = 5` and `b = 3`. Swap the values of `a` and `b` with out using any 3rd variable .

Solution is simple . Just do the following arithmetic operations

``````a = a + b
b = a - b
a = a - b
``````

This will do the job.

What I was trying is to write the entire expression in one single line. I wrote it like below.

Code 1 :

Cool .. I thought it’s done.

But I got surpriced when I tried it in the console. I was expecting final values should be `a = 3 and b = 5` but the output was different. I got `a = 0 and b =5`.

WTF ? Let me change the code a bit. I modified the code like this

Code 2 :

This time I got the correct results `a = -3 and b = 5`. So why the hell it didn’t work for the first expression ?

## The answer is :

We’re evaluating it wrongly. I mean we are not doing the way JavaScript engine does. I went to the EcmaScript specification and read the section for “Arithmetic Expression”.

Expressions : Any valid unit code that resolves to some value.

Two things to note :

• Assignment operators are right to left associative. That means for the expression `a = b = 5`, the value `5` will be assigned to variable `b` and then assigned to variable `b`.
• Arithmetic and multiplicative operators are left to right associative. For the expression `c = a + b`, the value of `a` will be computed first, then goes to `b` and computes it’s value.

For our problem, if I draw the parse tree roughly, it will be like below.

``````   =
/   \
a     -
/   \
a     =
/   \
b     -
/   \
=      b
/   \
a     +
/   \
a     b
``````

Ideally parse tree doesn’t contain the `=` operator. I made it like this to understand how the parser start evaluating the expression.

In the above parse tree, all the `=` operators are evaluated from right-to left ( that means the right node will be evaluated first and the value will be assigned to the left node ). On the other hand, arithmetic/multiplicative expressions are evaluated from left to right ( that means the values will be assigned from left and the arithmetic/multiplicative operation will be carried out ).

We can identify sub-expressions in our code. Basically, we can extract the expressions containing `=` to sub-expressions. Hence the above parse tree can be re-drawn like below.

``````   =
/   \
a     -
/   \
a     X
``````

Where `X` is the Sub-Expression 1 given below :

``````         =
/   \
b     -
/   \
Y     b
``````

Where `Y` is the Sub-Expression 2 given below :

``````         =
/   \
a     +
/   \
a     b
``````

Let’s see how JavaScript parser evaluate the value of `a` finally.

### Steps :

• Parser takes the main expression `a = a - X` and evaluated from left to right. At first, parser finds the variable`a` and finds it’s value. Now the parser moves to the next variable `X` and try to calculate it’s value. Since `X` is an expression, it need to be evaluated to form a primitive value.

Note: To get the value, parser internally calls the GetValue of each operands

So, for the parser, the expression becomes like this :

Which is :

• Now it need to evaluate the expression `X` where `b = Y - b`. Here the first operand `Y` itself a sub-expression, so parser has to evaluate it first before calculating the value of the second operand `b`.

• Let’s evaluate the expression `Y` which is `a = a + b`. This is straightforward and contains no sub expression , hence evaluated like this.

This equals to :

Finally the value of expression `Y` becomes `8`.

• Coming back to step 2 where expression `X` needs to be completed. expression `X` is

Becomes like this :

Which is :

Finally the value of `b` and expression `X` becomes `5`.

• So now all the sub expressions are evaluated , the main expression can be completed now.

The main expression was :

That means final value of `a = 5 - 5` which is `0`.

• Finally the values of `a` and `b` will become `a = 0 and b = 5`

Now we’re in the same direction with JS engine. We can apply what we learned for the Code 2 also.

## Conclusion

I didn’t want to write this much long. All I wanted to recollect some of those basic stuff. Thanks for reading !!

References :