The Difference between ++num vs num++

Question

After reading these two posts:

• ++someVariable Vs. someVariable++ in Javascript
• http://community.sitepoint.com/t/variable-vs-variable/6371

I am still confused on the following code:

var num = 0;

num++ // returns 0

++num // returns 1

Why dose num++ return 0?

I understand that it assigns first, then adds one, but I still don't understand why it doesn't display the 1.

var num = 0;

num++ // returns 0

num // returns 1

I am really confused with the following example:

Example:

var num = 0;

num++
// assigns then increments

// So if it assigns the num = 0, then increments to 1, Where is one being 
//stored? Is it assigned anywhere?

Or does it assign the expression.

(I imagine the expression is this: num = num + 1;)

This is probably my best guess but it still isn't 100% clear to me, I still don't understand why num++ displays/returns 0 instead of having the expression being evaluated and returning 1.

Answer 1

Maybe looking at the specification helps.

Postfix increment operator (num++)

The production PostfixExpression : LeftHandSideExpression [no LineTerminator here] ++ is evaluated as follows:

1. Let lhs be the result of evaluating LeftHandSideExpression.

That simply means we are looking at what's before the ++, e.g. num in num++.

2. Throw a SyntaxError exception if the following conditions are all true: [left out for brevity]

This step makes sure that lhs really refers to a variable. The postfix operator only works on variables, using e.g. a literal, 1++, would be a syntax error.

3. Let oldValue be ToNumber(GetValue(lhs)).

Get the value of the variable represented by lhs and store it in oldValue. Imagine it to be something like var oldValue = num;. If num = 0 then oldValue = 0 as well.

4. Let newValue be the result of adding the value 1 to oldValue, using the same rules as for the + operator (see 11.6.3).

Simply add 1 to oldValue and store the result in newValue. Something like newValue = oldValue + 1. In our case newValue would be 1.

5. Call PutValue(lhs, newValue).

This assigns the new value to lhs again. The equivalent is num = newValue;. So num is 1 now.

6. Return oldValue.

Return the value of oldValue which is still 0.

 

So again, in pseudo JavaScript code, num++ is equivalent to:

var oldValue = num;           // remember current value
var newValue = oldValue + 1;  // add one to current value
num = newValue;               // sore new value
return oldValue;              // return old value

---

Prefix increment operator (++num)

The algorithm is exactly the same as for the postfix operator, with one difference: In the last step, newValue is returned instead of oldValue:

6. Return newValue.

Answer 2

Take the following example:

var num = 0;
var result = 0;

The following:

result = num++; 

Is equal to saying:

result = num;
num = num + 1;

On the other hand, this:

result = ++num;

Is more equitable with this:

num = num + 1;
result = num;

The two statements are kinda like shorthand for doing common operations.

Answer 3

When you type num++ as a statement, JavaScript will evaluate num first -- which is why it's showing the zero -- then increment. That's why it's called the post-increment operator.

If you were to do this, you'll see what's happening more clearly:

var num = 0;
num++;        // Outputs 0 (current value, set in previous step), then increments
num;          // Outputs 1 (current value, incremented in previous step)

With the pre-increment, the incrementation happens first, so you'd get:

var num = 0;
++num;        // Outputs 1
num;          // Outputs 1