javascript i++ vs ++i

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

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.

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.

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.

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