208

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?

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
Derek Adair
  • 21,846
  • 31
  • 97
  • 134
  • 1
    See also the language-agnostic [Difference between i++ and ++i in a loop?](http://stackoverflow.com/q/484462/1048572) – Bergi Oct 11 '16 at 18:58
  • I was thinking about this yesterday reading [this response](https://stackoverflow.com/a/3458154/393280) to the question about [bad assumptions in C/C++](https://stackoverflow.com/q/3457967/393280). 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 '19 at 21:00
  • [The previous comment](https://stackoverflow.com/q/3469885/393280#comment103574142_3469885) is actually a copy of [an answer (a non-answer, rather) I posted in 2010](https://stackoverflow.com/a/3469966/393280). I have deleted the answer, but [Jon Skeet](https://stackoverflow.com/users/22656/jon-skeet) [had replied](https://stackoverflow.com/a/3469966/393280#comment3620204_3469966) with: "Looking at ECMA-262, it seems reasonably well-specified." – palswim Oct 30 '19 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 – shieldgenerator7 May 03 '22 at 22:47

7 Answers7

362

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]
Jon Skeet
  • 1,421,763
  • 867
  • 9,128
  • 9,194
  • 25
    Curses, I nearly beat you to an answer had I not stopped to load up a practical jsfiddle answer. ;-) – Chris Aug 12 '10 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 '14 at 04: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. – Jean Jimenez Jul 19 '16 at 14:23
  • 5
    @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 '16 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. – Jean Jimenez Jul 19 '16 at 14:31
  • @JeanJimenez: They both increment `x` (which is why `x` ends up as 12 afterwards if it starts off as 10), and in both cases the value of the expression is the value of `x` *before* that increment. (But the second `x++` is evaluated *after* the first increment takes place, of course...) – Jon Skeet Jul 19 '16 at 14:33
  • I um, have been working with JS for many years, and I uh... never knew ++variable was a thing. I cannot think of a single time I've seen it used until I read an article on functional programming and saw it in a loop comparison example. So great question :D – danjah Sep 12 '16 at 23:01
  • Additional info for i++ vs. ++i in loops @ https://stackoverflow.com/questions/29885719/i-vs-i-in-a-javascript-for-loop – gdibble Oct 03 '19 at 21:29
  • I highly recommend to only use this syntax as a standalone statement. If you use it inside other expressions it just causes confusion and makes it hard to read. – shieldgenerator7 May 03 '22 at 22:46
82
  • ++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.

Justin Force
  • 6,203
  • 5
  • 29
  • 39
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.

Chris
  • 27,210
  • 6
  • 71
  • 92
11

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!

unclexo
  • 3,691
  • 2
  • 18
  • 26
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

The Code Guy
  • 311
  • 5
  • 10
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
Clifford Fajardo
  • 1,357
  • 1
  • 17
  • 28
-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.

Michel
  • 259
  • 2
  • 3