211

In JavaScript you can use ++ operator before (pre-increment) or after the variable name (post-increment). What, if any, are the differences between these ways of incrementing a variable?

5
  • 1
    See also the language-agnostic Difference between i++ and ++i in a loop?
    – Bergi
    Oct 11, 2016 at 18:58
  • I was thinking about this yesterday reading this response to the question about bad assumptions in C/C++. In all cases, can we guarantee that Javascript behaves this way? Or do you think it's bad practice to use the increment statement within a more complex statement at all?
    – palswim
    Oct 30, 2019 at 21:00
  • The previous comment is actually a copy of an answer (a non-answer, rather) I posted in 2010. I have deleted the answer, but Jon Skeet had replied with: "Looking at ECMA-262, it seems reasonably well-specified."
    – palswim
    Oct 30, 2019 at 21:02
  • @palswim It's better to use them as standalone statements, and not within a more complex statement. Keeping it by itself improves readability and reduces confusion May 3, 2022 at 22:47
  • 1
    This SO page makes things extremely unnecessarily complicated. i++ returns the value of i and increment it by one, ++i increment i by one and returns the incremented value. If i has 5, i++ will return 5 but then i will have 6, and ++i will return 6 and i will have 6.
    – Yuval A.
    Dec 19, 2023 at 19:50

7 Answers 7

367

Same as in other languages:

  • ++x (pre-increment) means "increment the variable; the value of the expression is the final value"
  • x++ (post-increment) means "remember the original value, then increment the variable; the value of the expression is the original value"

Now when used as a standalone statement, they mean the same thing:

x++;
++x;

The difference comes when you use the value of the expression elsewhere. For example:

x = 0;
y = array[x++]; // This will get array[0]

x = 0;
y = array[++x]; // This will get array[1]
9
  • 25
    Curses, I nearly beat you to an answer had I not stopped to load up a practical jsfiddle answer. ;-)
    – Chris
    Aug 12, 2010 at 16:34
  • 2
    What would this look like if you used + 1 instead of ++? Is there a way to increment before or after when adding numbers?
    – Keavon
    Apr 20, 2014 at 4:38
  • 1
    I would like to know why if you do this operation const r1 =(x++)+(x++); it does not produce the expected result according to your example. Jul 19, 2016 at 14:23
  • 6
    @JeanJimenez: Well it produces the result I expect. For example, if x starts off as 10, the value of r1 is 21, which is 10+11. The value of the first x++ expression is 10 and x is incremented to 11. The value of the second x++ expression is 11 and x is incremented to 12.
    – Jon Skeet
    Jul 19, 2016 at 14:25
  • Dear @JonSkeet thanks for that super-fast response, I’m new to learning JavaScript and my confusion is regarding why one increments and the another doesn't. Jul 19, 2016 at 14:31
83
  • ++x increments the value, then evaluates and stores it.
  • x++ evaluates the value, then increments and stores it.
var n = 0, m = 0;

alert(n++); /* Shows 0, then stores n = 1 */
alert(++m); /* Shows 1, then stores m = 1 */

Note that there are slight performance benefits to using ++x where possible, because you read the variable, modify it, then evaluate and store it. Versus the x++ operator where you read the value, evaluate it, modify it, then store it.

12

As I understand them if you use them standalone they do the same thing. If you try to output the result of them as an expression then they may differ. Try alert(i++) as compared to alert(++i) to see the difference. i++ evaluates to i before the addition and ++i does the addition before evaluating.

See http://jsfiddle.net/xaDC4/ for an example.

12

I've an explanation of understanding post-increment and pre-increment. So I'm putting it here.

Lets assign 0 to x

let x = 0;

Lets start with post-increment

console.log(x++); // Outputs 0

Why?

Lets break the x++ expression down

x = x;
x = x + 1;

First statement returns the value of x which is 0

And later when you use x variable anywhere, then the second statement is executed

Second statement returns the value of this x + 1 expression which is (0 + 1) = 1

Keep in mind the value of x at this state which is 1

Now lets start with pre-increment

console.log(++x); // Outputs 2

Why?

Lets break the ++x expression down

x = x + 1;
x = x;

First statement returns the value of this x + 1 expression which is (1 + 1) = 2

Second statement returns the value of x which is 2 so x = 2 thus it returns 2

Hope this would help you understand what post-increment and pre-increment are!

5
var a = 1;
var b = ++a;
alert('a:' + a + ';b:' + b); //a:2;b:2

var c = 1;
var d = c++;
alert('c:' + c + ';d:' + d); //c:2;d:1

jsfiddle

2
var x = 0, y = 0;

//post-increment: i++ returns value then adds one to it
console.log('x++ will log: ', x++); //0
console.log('x after x++ : ', x);    //1

//pre-increment: adds one to the value, then returns it
console.log('++y will log: ', ++y); //1
console.log('y after ++y : ', y);   //1
-1

It is clearer and faster to use ++i if possible :

  • ++i guarantees that you are using a value of i that will remains the same unless you change i
  • i++ allows to use a value of i which will change in the "near future", it is not desirable if possible

Of course, it's not really much faster, only a little.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.