In javascript I have seen i++ used in many cases, and I understand that it adds one to the preceding value:
for (var i=1; i<=10; i++) { console.log(i); }But what happens when I do this:
++i; And is it any different using the -- operator (besides of course that it's subtraction rather than addition)?
8 Answers
The difference between i++ and ++i is the value of the expression.
The value i++ is the value of i before the increment. The value of ++i is the value of i after the increment.
Example:
var i = 42; alert(i++); // shows 42 alert(i); // shows 43 i = 42; alert(++i); // shows 43 alert(i); // shows 43 The i-- and --i operators works the same way.
++variable increments the variable, returning the new value.
variable++ increments the variable, but returns the old value.
--variable decrements the variable, returning the new value.
variable-- decrements the variable, but returns the old value.
For example:
a = 5; b = 5; c = ++a; d = b++; a is 6, b is 6, c is 6 and d is 5.
If you're not using the result, the prefix operators work equally to the postfix operators.
2I thought for completeness I would add an answer specific to the first of the OP's question:
One of your example shows the i++ / ++i being used in a for loop :
for (i=1; i<=10; i++) { alert(i); } you will get 1-10 in your alerts no matter which you use. Example:
console.log("i++"); for (i=1; i<=10; i++) { console.log(i); } console.log("++i"); for (i=1; i<=10; ++i) { console.log(i); }Paste those into a console window and you can see that they both have the same output.
2One case all these answers fail to mention is what happens when i++ and ++i are used in operations with other numbers. While the whole “i++ is before, ++i is after” concept is easy to grasp when the expression is by itself, it gets much more confusing when you start combining statements. See Examples C and D below.
// Example A var i = 42; var a = i++; // equivalent to `var a = i; i = i+1;` console.log(a); // 42 console.log(i); // 43 // Example B var i = 42; var b = ++i; // equivalent to `i = i+1; var b = i;` console.log(b); // 43 console.log(i); // 43 // Example C var i = 42; var c = i++ * 2; // equivalent to `var c = i*2; i = i+1;` console.log(c); // 84 console.log(i); // 43 // Example D var i = 42; var d = ++i * 2; // equivalent to `i = i+1; var d = i*2;` console.log(d); // 86 console.log(i); // 43 Notice that in Example C, the i++ is not evaluated until after multiplication and the assignment of c. This counters the misconception that “i++ should be evaluated first in the order of operations.” So in other words the statement i++ * 2 actually calculates i * 2 before it increments i.
i++ = Use the value of i in statement then increase it by 1
++i = Increase the value of i by 1 then use in statement.
It determines whether the increment happens before or after the value of the variable is used.
var j = 2; console.log(j++); // 2 console.log(j); // 3 var k = 2; console.log(++k); // 3 console.log(k); // 3 var i = 0; console.log(i++); // 0 console.log(++i); // 2 ++variable : Increment variable before using variable
variable++ : Increment variable after using variable
I figured it could be useful to include an answer with a snippet to confirm how they behave in a for loop.
Just to verify in your browser that there's really no difference when using a ++i versus a i++ in the for loop declaration.
And throwing --i versus i-- while we're at it.
console.log("-- with looping --"); console.log("using ++i in a for loop"); for (var i=1; i<=3; ++i) { console.log(i); } console.log("using i++ in a for loop"); for (var i=1; i<=3; i++) { console.log(i); } console.log("using --i in a for loop"); for (var i=3; i>=1; --i) { console.log(i); } console.log("using i-- in a for loop"); for (var i=3; i>=1; i--) { console.log(i); } console.log("-- without looping --"); var i = 1; console.log("i: "+ i); console.log("i++: "+ i++); console.log("i: "+ i); console.log("++i: "+ ++i); console.log("i: "+ i); console.log("--i: "+ --i); console.log("i: "+ i); console.log("i--: "+ i--); console.log("i: "+ i);
