142

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)?

1
  • 4
    Might be useful for you to know that ++i is often referred to as PREFIX notation and i++ as POSTFIX notation. It works the same in many other languages.
    – CodeSmith
    Dec 6, 2017 at 12:13

8 Answers 8

260

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.

4
  • 12
    most of the time, ++i is ever so slightly faster. this may be system-dependent, but in theory it should. jsperf.com/plusplusi-vs-iplusplus
    – aelgoa
    Feb 24, 2013 at 8:14
  • 9
    @aelgoa: Most of the time the difference is within the margin error, and the rest of the time there is no consistent result. If you don't use the value of the expression, theoretically there should be no difference at all, as the compiler should optimise it to the same operation.
    – Guffa
    Feb 24, 2013 at 12:08
  • 1
    @aelgoa +1, as this has nearly full coverage in other languages, ++i is always a best practice unless a particular language has explicitly worse performance. I've heard people argue it is negligible, but not always. For instance with server-side javascript not just generating a page, you may well be looping quickly over a one liner millions of times. This can cut your per-loop overhead by ~1/2 which can matter on one-liner loops quite a lot. Jun 19, 2014 at 12:04
  • 8
    Guffa is correct here. jsperf.com/ppi-vs-ipp-forloop when I run this test and it shows i++ being faster in a for loop, but not by enough to be significant. While ++i may be faster in other languages, I think it's safe to say javascript optimizes the operation to be the same.
    – Eric Barr
    Sep 7, 2014 at 15:49
73

++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.

3
  • if you're using the result as an array index, you can also offset it by 1 initially, for prefixing =] Jun 19, 2014 at 12:05
  • 1
    I think this is the best answer. clear and easy to understand
    – tim
    Jan 16, 2022 at 8:57
  • I was super confused the first time I entered in i++ into a recursive function and it became and infinite loop XD. This is a good explanation Mar 27 at 18:04
14

I 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.

2
  • True, but do that in reverse: console.log("i--"); for (i=10; i--;) { console.log(i); } console.log("--i"); for (i=10; --i;) { console.log(i); }
    – Cody
    Nov 13, 2015 at 18:47
  • 2
    Why? The ability to use ++i in a for loop would def be desirable behavior. Mar 7, 2016 at 16:37
11

One 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.

10

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.

9

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
7
var i = 0;
console.log(i++); // 0
console.log(++i); // 2
1
  • 3
    It would be better to use two variables here to illustrate the difference. Examples should not do more than one thing.
    – Agamemnus
    Sep 21, 2014 at 1:04
6

++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);

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