I have a very simple arithmetic operator but am at my wits end why it doesn't return 2. The code below returns 1. I thought that x++ equates to x = x + 1;

CODE

var x = 1;
document.write(x++);

However if I run the code as follows, it returns 2 as expected

CODE

var x = 1;
document.write(++x);

What am I doing wrong?

I have a very simple arithmetic operator but am at my wits end why it doesn't return 2. The code below returns 1. I thought that x++ equates to x = x + 1;

CODE

var x = 1;
document.write(x++);

However if I run the code as follows, it returns 2 as expected

CODE

var x = 1;
document.write(++x);

What am I doing wrong?

• javascript

• @Xander - I am aware they are to do with post increment and pre-increment however don't quite understand why do most articles often reference x++ as being the same as x = x+1? That makes no sense when they don't return the same values. – PeanutsMonkey Commented Jun 27, 2012 at 1:49
• It has the same effect of incrementing the number by 1. However, it doesn't have the same effect when used inside an expression. – nhahtdh Commented Jun 27, 2012 at 2:00
• @nhahtdh - Can you give an example? – PeanutsMonkey Commented Jun 27, 2012 at 2:04
• (x++) * (x++) compared to (x = x + 1) * (x = x + 1). – nhahtdh Commented Jun 27, 2012 at 2:28

3 Answers 3

PostIncrement(variable++) & PostDecrement(variable--)

When you use the ++ or -- operator after the variable, the variable's value is not incremented/decremented until after the expression is evaluated and the original value is returned. For example x++ translates to something similar to the following:

document.write(x);
x += 1;

PreIncrement(++variable) & PreDecrement(--variable)

When you use the ++ or -- operator prior to the variable, the variable's value is incremented/decremented before the expression is evaluated and the new value is returned. For example ++x translates to something similar to the following:

x += 1;
document.write(x);

The postincrement and preincrement operators are available in C, C++, C#, Java, javascript, php, and I am sure there are others languages. According to why-doesnt-ruby-support-i-or-i-increment-decrement-operators, Ruby does not have these operators.

I think of x++ and ++x (informally) as this:

x++:

function post_increment(x) {
  return x; // Pretend this return statement doesn't exit the function
  x = x + 1;
}

++x:

function pre_increment(x) {
  x = x + 1;
  return x;
}

The two operations do the same thing, but they return different values:

var x = 1;
var y = 1;

x++; // This returned 1
++y; // This returned 2

console.log(x == y); // true because both were incremented in the end

If you take a look at the javascript specification pages 70 and 71 you can see how it should be implemented:

Prefix:

1. Let expr be the result of evaluating UnaryExpression.
2. Throw a SyntaxError exception if the following conditions are all true:72 © Ecma International 2011
   • Type(expr) is Reference is true
   • IsStrictReference(expr) is true
   • Type(GetBase(expr)) is Environment Record
   • GetReferencedName(expr) is either "eval" or "arguments"
3. Let oldValue be ToNumber(GetValue(expr)).
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).
5. Call PutValue(expr, newValue).
6. Return newValue.

Or more simply:

1. Increment value
2. Return value

Postfix:

1. Let lhs be the result of evaluating LeftHandSideExpression.
2. Throw a SyntaxError exception if the following conditions are all true:
   • Type(lhs) is Reference is true
   • IsStrictReference(lhs) is true
   • Type(GetBase(lhs)) is Environment Record
   • GetReferencedName(lhs) is either "eval" or "arguments"
3. Let oldValue be ToNumber(GetValue(lhs)).
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).
5. Call PutValue(lhs, newValue).
6. Return oldValue.

Or more simply:

1. Assign value to temp
2. Increment value
3. Return temp