++someVariable vs. someVariable++ in JavaScript
Solution 1
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]
Solution 2
-
++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.
Solution 3
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.
Solution 4
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!
Solution 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
Related videos on Youtube
Comments
-
Derek Adair over 2 years
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 over 7 yearsSee also the language-agnostic Difference between i++ and ++i in a loop?
-
palswim over 4 yearsI 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 over 4 yearsThe 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."
-
shieldgenerator7 about 2 years@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
-
-
Chris over 13 yearsCurses, I nearly beat you to an answer had I not stopped to load up a practical jsfiddle answer. ;-)
-
Keavon about 10 yearsWhat would this look like if you used
+ 1
instead of++
? Is there a way to increment before or after when adding numbers? -
Jean Jimenez almost 8 yearsI 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.
-
Jon Skeet almost 8 years@JeanJimenez: Well it produces the result I expect. For example, if
x
starts off as 10, the value ofr1
is 21, which is 10+11. The value of the firstx++
expression is 10 andx
is incremented to 11. The value of the secondx++
expression is 11 andx
is incremented to 12. -
Jean Jimenez almost 8 yearsDear @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.
-
Jon Skeet almost 8 years@JeanJimenez: They both increment
x
(which is whyx
ends up as 12 afterwards if it starts off as 10), and in both cases the value of the expression is the value ofx
before that increment. (But the secondx++
is evaluated after the first increment takes place, of course...) -
danjah over 7 yearsI 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
-
gdibble over 4 years💭 Additional info for i++ vs. ++i in loops @ stackoverflow.com/questions/29885719/…
-
shieldgenerator7 about 2 yearsI 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.