Bucles: while y for

Usualmente necesitamos repetir acciones.

Por ejemplo, mostrar los elementos de una lista uno tras otro o simplemente ejecutar el mismo código para cada número del 1 al 10.

Los Bucles son una forma de repetir el mismo código varias veces.

Un pequeño anuncio para lectores avanzados.

Este artículo cubre solamente los bucles básicos: while, do..while y for(..;..;..).

Si llegó a este artículo buscando otro tipo de bucles, aquí están los enlaces:

Vea for…in para bucles sobre propiedades de objetos.
Vea for…of e iterables para bucles sobre arrays y objetos iterables.

De otra manera, por favor continúe leyendo.

El bucle “while”

El bucle while (mientras) tiene la siguiente sintaxis:

          while (condition) {
  // código
  // llamado "cuerpo del bucle"
}
        

Mientras la condición condition sea verdadera, el código del cuerpo del bucle será ejecutado.

Por ejemplo, el bucle debajo imprime i mientras se cumpla i < 3:

let i = 0;
while (i < 3) { // muestra 0, luego 1, luego 2
  alert( i );
  i++;
}

Cada ejecución del cuerpo del bucle se llama iteración. El bucle en el ejemplo de arriba realiza 3 iteraciones.

Si faltara i++ en el ejemplo de arriba, el bucle sería repetido (en teoría) eternamente. En la práctica, el navegador tiene maneras de detener tales bucles desmedidos; y en el JavaScript del lado del servidor, podemos eliminar el proceso.

Cualquier expresión o variable puede usarse como condición del bucle, no solo las comparaciones: El while evaluará y transformará la condición a un booleano.

Por ejemplo, una manera más corta de escribir while (i != 0) es while (i):

let i = 3;
while (i) { // cuando i sea 0, la condición se volverá falsa y el bucle se detendrá
  alert( i );
  i--;
}

Si el cuerpo del bucle tiene una sola sentencia, podemos omitir las llaves {…}:

let i = 3;
while (i) alert(i--);

El bucle “do…while”

La comprobación de la condición puede ser movida debajo del cuerpo del bucle usando la sintaxis do..while:

          do {
  // cuerpo del bucle
} while (condition);
        

El bucle primero ejecuta el cuerpo, luego comprueba la condición, y, mientras sea un valor verdadero, la ejecuta una y otra vez.

Por ejemplo:

let i = 0;
do {
  alert( i );
  i++;
} while (i < 3);

Esta sintaxis solo debe ser usada cuando quieres que el cuerpo del bucle sea ejecutado al menos una vez sin importar que la condición sea verdadera. Usualmente, se prefiere la otra forma: while(…) {…}.

El bucle “for”

El bucle for es más complejo, pero también el más usado.

Se ve así:

          for (begin; condition; step) { // (comienzo, condición, paso)
  // ... cuerpo del bucle ...
}
        

Aprendamos el significado de cada parte con un ejemplo. El bucle debajo corre alert(i) para i desde 0 hasta (pero no incluyendo) 3:

for (let i = 0; i < 3; i++) { // muestra 0, luego 1, luego 2
  alert(i);
}

Vamos a examinar la declaración for parte por parte:

parte
comienzo	`let i = 0`	Se ejecuta una vez al comienzo del bucle.
condición	`i < 3`	Comprobada antes de cada iteración del bucle. Si es falsa, el bucle finaliza.
cuerpo	`alert(i)`	Se ejecuta una y otra vez mientras la condición sea verdadera.
paso	`i++`	Se ejecuta después del cuerpo en cada iteración.

El algoritmo general del bucle funciona de esta forma:

          Se ejecuta comenzar
→ (si condición → ejecutar cuerpo y ejecutar paso)
→ (si condición → ejecutar cuerpo y ejecutar paso)
→ (si condición → ejecutar cuerpo y ejecutar paso)
→ ...
        

Si eres nuevo en bucles, te podría ayudar regresar al ejemplo y reproducir cómo se ejecuta paso por paso en una pedazo de papel.

Esto es lo que sucede exactamente en nuestro caso:

          // for (let i = 0; i < 3; i++) alert(i)

// se ejecuta comenzar
let i = 0
// si condición → ejecutar cuerpo y ejecutar paso
if (i < 3) { alert(i); i++ }
// si condición → ejecutar cuerpo y ejecutar paso
if (i < 3) { alert(i); i++ }
// si condición → ejecutar cuerpo y ejecutar paso
if (i < 3) { alert(i); i++ }
// ...finaliza, porque ahora i == 3
        

Aquí, la variable “counter” i es declarada en el bucle. Esto es llamado una declaración de variable “en línea”. Dichas variables son visibles solo dentro del bucle.

for (let i = 0; i < 3; i++) {
  alert(i); // 0, 1, 2
}
alert(i); // error, no existe dicha variable

En vez de definir una variable, podemos usar una que ya exista:

let i = 0;

for (i = 0; i < 3; i++) { // usa una variable existente
  alert(i); // 0, 1, 2
}

alert(i); // 3, visible, porque fue declarada fuera del bucle

Omitiendo partes

Cualquier parte de for puede ser omitida.

Por ejemplo, podemos quitar comienzo si no necesitamos realizar nada al inicio del bucle.

Como aquí: