Javascript - Comportamentos diferentes para incremento de valores com ++ antes e depois da variável

Hoje vamos tratar de algo que aparentemente é muito bobo mas que na verdade não o é e costuma trazer grandes problemas quando utilizado de maneira errada: o incremento em variáveis.

O incremento está presente em inúmeras linguagens de programação. Os exemplos que apresentarei aqui são baseados em Javascript, porém eles são válidos também para PHP e outros.

Acredito que todos sabem que para incrementar ou decrementar (adicionar ou subtrair) uma unidade a uma variável, ao invés de fazer isso:

$a = $a + 1

Podemos fazer isso:

$a++

ou isso:

++$a

Bem, acredito que todos sabem deste truque, mesmo porque é a primeira coisa que aprendemos quando iniciamos na arte de programar, porém você sabe qual a diferença entre ambos?

Vamos rodar um javascript bem simples para exemplificar o que acontece:

$a = 0;
$b = 0;

$a++;
++$b;

console.log($a);
console.log($b);

É provável que você obtenha como resultado:

1
1

Bem, até ai parece que não existem diferenças, correto? Iniciei as duas variáveis, $a e $b com 0 (zero), as incrementei de maneiras diferentes e o resultado foi o mesmo.

Então vamos modificar um pouquinho nosso script:

$a = 0;
$b = 0;

console.log($a++);
console.log(++$b);

É provável que você obtenha como resultado:

0
1

Obs! Agora imprimi as variáveis exatamente no momento em que as incremento. Algo acontece mas exatamente o que?

Vamos alterar pela ultima vez nosso script:

$a = 0;
$b = 0;

console.log($a++);
console.log(++$b);

console.log($a);
console.log($b);

É provável que você obtenha como resultado:

0
1
1
1

Agora sim podemos compreender o que está acontecendo, certo?

As duas formas de incremento ($a++ e ++$b) atuam, em essência, da mesma forma, porém sua implementação é diferente. Como pode ser visto no ultimo exemplo ao utilizar ++ depois da variável o interpretador do javascript retorna primeiro o valor atual da variável para somente depois incrementá-la, já colocando ++ antes da variável o interpretador primeiro incrementa o valor da variável, para somente depois retorná-la.

Esta pequena diferença poderá modificar todo o comportamento de suas aplicações, como por exemplo na paginação de resultados ou criação de indices.

Fique atento a esta característica e boa sorte!