Operadores de Incremento y Decremento en JavaScript

Los operadores de incremento ( + + ) y decremento ( - - ), se emplean para aumentar o disminuir en una unidad una variable numérica respectivamente.

<!doctype html>
<html>
<head>
<title>Incremento y Decremento</title>
</head>
<body>
  <script type="text/javascript">
   var aNum = 4;
 ++aNum;
 alert(aNum);
  </script>
</body>
</html>

Corra el script y verá como nuestra variable ahora vale (5).

Pre-Incremento y Post-Incremento

Dependiendo la posición en la que coloquemos el operador de incremento, el aumento de la unidad, se realiza antes o después de que el interprete incorpore el valor de la variable.

El operador de post-incremento, es el de mayor frecuencia, ya que se acopla mejor a la estructura de bucles. (Aprenderemos sobre bucles mas adelante).

Pre-Incremento

Veamos el siguiente código para ejemplificar el Pre-incremento

La variable valorInicial es declarada con un valor de 4 en la primera linea.
En la segunda linea se realiza un pre-incremento.
Esto quiere decir que primero se incrementa el valor en una unidad, con lo que pasa a valer 5.
Después se realiza la asignación a valorfinal, con lo cual también pasa a valer 5.

Corra el código y verá como es verdad que ambos valores valen 8, sin embargo lo importante es que entienda el orden en el que se dan las asignaciones.

<!doctype html>
<html>
<head>
<title>Pre-Incremento</title>
</head>
<body>
  <script type="text/javascript">
   var valorInicial = 4;
 var valorFinal = ++valorInicial;

 alert("valorInicial: " + valorInicial);
 alert("valorFinal: " + valorFinal);

  </script>
</body>
</html>

Post-Incremento

Ahora veamos como funciona el post-incremento.

La primera linea funciona igual que la anterior, declarando una variable y su valor.
La diferencia está en la segunda línea donde declaramos el operador de post-incremento
Lo que sucede primero es la asignación a valorFinal, con lo que pasa a valer 4
Después de esto se realiza el incremento, con lo que valorInicial pasa a valer
Pero valorFinal ya no se modifica.

<!doctype html>
<html>
<head>
<title>Post-Incremento</title>
</head>
<body>
  <script type="text/javascript">
   var valorInicial = 4;
 var valorFinal = valorInicial++;

 alert("valorInicial: " + valorInicial);
 alert("valorFinal: " + valorFinal);

  </script>
</body>
</html>