Prefix vs. Postfix in incrementation. Do you know the difference?

Introduction

In JavaScript the increment (++) operator adds 1 to its operand and returns a value. It can be used as prefix (++x) or postfix (x++). But is there any difference between them? And why everyone use postfix i++ in for loops?
 

Differences

When we use postfix (so for example x++), operator first returns old value, and then increments x. When we use prefix (so for example ++x), operator first increments x, and then returns new value.
 

Let’s see it on the picture below:

It is worth noting that the value of x is incremented by 1 in each case, regardless of whether we used prefix or postfix. The main difference is in the value returned by the expression.
 

Let’s look at the code.

// --- POSTFIX ++ ---
let x = 1;
let result = x++;

result // 1 <- Because postfix returns OLD value first
x // 2

// --- ++ PREFIX ---
let x = 1;
let result = ++x;

result // 2 <- Because prefix first changes value, and then returns NEW value
x // 2

 

Decrementation

Of course, the same rules apply to decrement operator (--):

// --- POSTFIX -- ---
let x = 1;

let result = x--;

result // 1 <- Because postfix returns OLD value first
x // 0

// --- -- PREFIX ---
let x = 1;
let result = --x;

result // 0 <- Because prefix first changes value, and then returns NEW value
x // 0

 

For loops

If you have ever seen for loop, I bet you’ve seen something like this:

for (let i = 0; i < 5; i++) { // <- i++ is POSTFIX incrementation
  console.log(i);
}

 
Will there be any difference if we use the prefix version?

for (let i = 0; i < 5; ++i) { // <- would it be the same with ++i ??
  console.log(i);
}

Let’s find out. We will print out the value of i in both cases.

// POSTFIX

for (let i = 0; i < 5; i++) {
  console.log(i);
}

// 0
// 1
// 2
// 3
// 4

// PREFIX

for (let i = 0; i < 5; ++i) {
  console.log(i);
}

// 0
// 1
// 2
// 3
// 4

 
In both cases, the results are the same because the third value in the brackets of the for loop (the result returned by our incrementation) doesn't really matter. The value returned by the incrementation is not used by the loop. What truly matters is the value of the i variable, and in both cases, the i variable is incremented by 1.
 

So should we use prefix or postfix?

Which one is better? If we don’t use the result of incrementation (so the value returned by the whole expression) and all we need is to add 1 to some variable, it doesn’t really matter which version we use. Prefix ++x and postfix x++ will give us the same result which is variable increased by 1.
 
But when we’re using the result of the whole expression, we should be careful and choose a proper version that fits to our needs.
 

Summary

That’s all! I hope everything is now clear and understandable to you! Happy coding!