What is the difference between pre and post increment in Javascript?
The most common and known form of increment is the post:
for (var i = 0; i < 10; i++){
console.log(i);
}
However, next I see the pre-decrement:
for (var i = 0; i < 10; ++i){
console.log(i);
}
However, the results are the same for this example.
What are the differences between pre and post increment/decrement of a variable in JavaScript?
What gains can these differences bring?
4 answers
Pre-increment
See the example below: in pre-increment, first the variable c is incremented, and only then assigned to d:
var c, d;
c=6;
console.log("Pre-incremento\n");
console.log("Numero sem incremento: %d\n", c); // 6
d=++c; // O VALOR É INCREMENTADO, E SÓ DEPOIS PASSADO PARA 'd'
console.log("Valor de 'c':%d\nValor de 'd':%d\n", c, d); // c = 7, d = 7
In this example, c, which is worth 6 is first incremented and becomes worth 7. Only after that, the variable – which is already worth 7 – is assigned to ‘d’, which is also worth 7.
Post-Increment
See in the example that first the variable is assigned, and only then incremented:
var c, d;
c=6;
console.log("Pos-incremento\n");
console.log("Numero sem incremento: %d\n", c); // 6
d=c++;// O VALOR É PASSADO PARA 'd', E DEPOIS INCREMENTADO
console.log("Valor de 'c':%d\nValor de 'd':%d\n", c, d); // c = 7, d = 6
In this example, c, which is worth 6, has its value assigned to d, which is worth 6 as well. Only after this operation does c have its value incremented, then worth 7.
The same rule applies to decrements
Pre-decrement
var c, d;
c=6;
console.log("Pre-decremento");
console.log("Numero sem incremento: %d", c); // 6
d=--c; // O VALOR É DECREMENTADO, E SÓ DEPOIS PASSADO PARA 'd'
console.log("Valor de 'c':%d\nValor de 'd':%d\n", c, d); // c = 5, d = 5
Post-decrement
var c, d;
c=6;
console.log("Pos-decremento");
console.log("Numero sem incremento: %d", c); // 6
d=c--; // O VALOR É PASSADO PARA 'd', E DEPOIS DECREMENTADO
console.log("Valor de 'c':%d\nValor de 'd':%d\n", c, d); // c = 5, d = 6
Therefore
In your pre or post increment example will always result in same result, as there is no assignment of the value of i to another variable, you are just returning the value of i after the increment operation, be it pre or post.
This way your example works just like:
c = 6;
c++; // o valor de 'c' é 7
console.log(c); // retornará 7
Or
c = 6;
++c; // o valor de 'c' é 7
console.log(c); // retornará 7
The behavior of these increment operators is related to something I already mentioned in my answer a How does this if/else com " work?"e":"?.
Imagine a line containing only this:
i;
We say it does nothing and it does nothing, right? But this is valid in the language, so somehow it is interpreted according to the rules of the language (leaving aside that there may be optimizers in the middle of the way by simply discarding that line of code). The language interprets i as a expression, and expressions always result in something. In the case of our line above, assuming that i does not exist, the result of the expression would be undefined.
Maybe it's already clear where I'm going: i++ and ++i are also expressions (composed of the expression i and one of the operators ++ – they are two, one used as a prefix, and the other as a suffix). And so, they result in a value, which can be used in another expression that encompasses this, as an assignment:
var i = 0;
var x = i++;
var y = ++i;
And the difference between the operators is precisely in the behavior of the expression result: while i++ returns the value of i before increment, ++i first increments i, and then returns its value. So, in my example above, the value of x will be 0, and the value of y will be 2.
Picking up your examples:
for (var i = 0; i < 10; i++){
And
for (var i = 0; i < 10; ++i){
The result of the expressions i++ and ++i is different, but is not used. What is used, and only in the next line, is i. And the effect of the two variants on i at that moment (next line) is equivalent.
You will only notice difference when you make use of the increment result, example:
var i = 1;
i++;
console.log(i == 2); // true
// é o mesmo que
var i = 1;
++i;
console.log(i == 2); // true
//No exemplo abaixo não
var i = 1;
console.log(i++ == 2); // false
var i = 1;
console.log(++i == 2); // true
When used in a loop, as in your example, there is no difference, since i++ returns i and adds 1, and ++i adds 1 to the value of i and returns it, so in the first iteration, the two will have the same value.
As for optimization , pós-incremento makes use of a temporary variable to store the value of i before increment, while pré-incremento adds the value the original variable, however this is a premature optimization and according to this Article , statistically insignificant.
1-I believe that using " FOR " will be a bit difficult to understand the work of increment. Try while (gets clearer)
2-it is better to use the increment in a part variable, following example:
{
int i = 0;
int var = 0;
while (i < 10) {
//var += ++i;
var += i++;
System.out.println("i= " + i + " | var= "+var);
}
Changing the increment to " var " you may notice that even with var antes before the print method the printed value will be [var = 0] q means that the variable changes after the loop is executed. Falow...Valews!