Bucles en JS: for, while y do-while

Los bucles son la manera del código de decir: ‘esto me gusta, así que voy a hacerlo una y otra vez’.

En este capítulo, el primero del bloque de estructuras y funciones, vamos a presentar las estructuras de repetición, o bucles, que soporta JS:

• El bucle for
• Los bucles while y do-while

Las estructuras de repetición permiten repetir la ejecución de un mismo fragmento de código múltiples veces y son una estructura fundamental en cualquier lenguaje de programación desde los albores de la informática.

Índice

1. El bucle for
2. Los bucles while y do-while
1. while
2. do-while
3. Saltándose las reglas: break y continue
4. Errores típicos
5. Objetivos conseguidos
6. Próximos pasos

El bucle for

El bucle for es una estructura de repetición inicialmente concebida para ejecutar un bloque de código durante un número predeterminado de iteraciones.

// Inicializa i a valor 1 e itera
// mientras i sea menor o igual a 5, 
// incrementando i en 1 en cada iteración
for (let i = 1; i <= 5; i++) {
  console.log("Iteración " + i)
}

Salida esperada:

Iteración 1
Iteración 2
Iteración 3
Iteración 4
Iteración 5

Como puedes ver, el bucle for de JS es similar al del C/C++ o Java y tiene 3 partes:

• Una primera parte (en el ejemplo i = 1) que se ejecuta únicamente antes de la primera iteración, concebida para inicializar la variable que se utilizará como contador en en bucle.
• Una segunda parte (en el ejemplo i <= 5) que debe devolver un valor booleano: mientras este valor sea true el bucle continuará iterando. O dicho de otro modo, el bucle for finalizará cuando la condición establecida en esta expresión sea false.
• Una tercera parte (en el ejemplo i++) que se ejecuta al final de cada iteración del bucle, habitualmente utilizada para actualizar (incrementar o decrementar) el valor del contador del bucle.

En base a lo anterior, este ejemplo ilustra la forma en que JS evalúa y ejecuta cada una de las partes del bucle for:

let i = 1;

for (
  console.log('Inicialización');
  console.log('Evaluación: ' + (i < 3)) || i < 3;
  console.log('Incremento')
) {
  console.log('Iteración ' + i++);
}

Salida esperada:

Inicialización
Evaluación: true
Iteración 1
Incremento
Evaluación: true
Iteración 2
Incremento
Evaluación: false

Reconozco que el ejemplo es muy bizarro para un curso que promete ir directo a lo básico, pero sirve para ilustrar cómo funciona el bucle for y, además, el hecho de que es capaz de alojar cualquier expresión en su primera y tercera parte, y una expresión que devuelva un valor booleano en su segunda parte.

Bizarradas aparte, el uso del bucle for en el 99,999% de los casos que puedas encontrarte es similar al primer ejemplo mostrado: Un contador que se incrementa o decrementa mientras se itera en el bucle hasta alcanzar un determinado valor, momento en el que se sale de dicho bucle.

Los bucles while y do-while

A diferencia del bucle for que en esencia está concebido para iterar durante un número conocido de veces, los bucles while y do-while iteran en base a una condición booleana susceptible de cambiar durante dichas iteraciones.

while

Como hemos dicho, el bucle while itera en base a una condición booleana susceptible de cambiar durante las iteraciones del bucle.

En el caso del while, dicha condición se evalúa al principio del bucle, de modo que el código iterable en un bucle while se ejecuta 0 o más veces.

let i = 0

// Este bucle se ejecuta cero veces,
// puesto que su condición es false
while (false) {
  i++
  console.log("Bucle 1. Iteración " + i)
}

// Este bucle se ejecuta al menos una vez,
// ya que 0 < 3 se evalúa como true
i = 0
while (i < 3) {
  i++
  console.log("Bucle 2. Iteración " + i)
}

Salida esperada:

Bucle 2. Iteración 1
Bucle 2. Iteración 2
Bucle 2. Iteración 3

do-while

A diferencia del bucle while, el bucle do-while evalúa su condición de iteración al final del bucle, con lo ejecuta el bloque de código iterable al menos una vez.

let i = 0

// Ambos bucles ejecutan su código al menos una vez
do {
  i++
  console.log("Bucle 1. Iteración " + i)
}
while (false)

i = 0
do {
  i++
  console.log("Bucle 2. Iteración " + i)
}
while (i < 3)

Salida esperada:

Bucle 1. Iteración 1
Bucle 2. Iteración 1
Bucle 2. Iteración 2
Bucle 2. Iteración 3

Saltándose las reglas: break y continue

Hemos visto en las secciones anteriores cómo los distintos tipos de bucle definen unas reglas estrictas en cuanto a sus condiciones de iteración. Todo es maravilloso.

...O no, porque existen dos instrucciones, específicamente break y continue, que nos permiten alterar dichas reglas:

• La ejecución de break dentro del bloque de código iterable nos permite abandonar en bucle sin evaluar su condición de iteración
• La ejecución de continue dentro del bloque de código iterable finaliza la iteración actual y procede a evaluar y, si procede ejecutar, la siguiente iteración

// Este bucle for inhibe la ejecución
// del código iterable cuando i es 
// un número par (el resto de i/2 es cero)
for (let i = 1; i <= 4; i++) {
  if (i % 2 === 0) {
    console.log("Bucle 1. Iteración " + i + " no se ejecuta")
    continue
  }
  console.log("Bucle 1. Iteración " + i)
}

console.log()

// Este bucle while se ejecutaría infinitamente
// si no fuese por el break, que finalizará
// su ejecución cuando i sea múltiplo de 5
// (cuando el resto de i/5 sea cero)
let i = 0
while (true) {
  i++
  if (i % 5 === 0) {
    console.log("Bucle 2. Iteración " + i + " abandona el bucle")
    break
  }
  console.log("Bucle 2. Iteración " + i)
}

Salida esperada:

Bucle 1. Iteración 1
Bucle 1. Iteración 2 no se ejecuta
Bucle 1. Iteración 3
Bucle 1. Iteración 4 no se ejecuta

Bucle 2. Iteración 1
Bucle 2. Iteración 2
Bucle 2. Iteración 3
Bucle 2. Iteración 4
Bucle 2. Iteración 5 abandona el bucle

Errores típicos

Esta sección cubre los errores típicos vinculados al uso de bucles en general. Si eres un programador curtido puedes saltártela puesto que los errores de los bucles en JS son los mismos errores que puedes cometer con bucles en otros lenguajes de programación.

El principal y más temido error es el bucle infinito, que se produce cuando la condición de iteración de un bucle siempre es true y, por tanto, nunca se sale del bucle. Se evita poniendo especial atención al construir dicha condición de iteración, sin más.

El segundo error relativo a bucles, especialmente a los while es no considerar adecuadamente si el bucle debe ejecutarse o no al menos una vez, o sea, si debemos optar por un bucle while (se ejecuta cero o más veces) o do-while (se ejecuta al menos una vez). De nuevo hay que poner especial cuidado a la hora de analizar el problema para seleccionar el bucle adecuado.

Finalmente, en mi opinión el tercer error es abusar del uso de break y continue, que deben considerarse como las excepciones a la regla y, por tanto, deben usarse con cautela. Usarlos indiscriminadamente complica el código, ya que las reglas que rigen cuando se abandona un bucle se alteran considerablemente.

Objetivos conseguidos

En este capítulo has aprendido cuáles son las estructuras de iteración, o bucles, en JS y cuándo utilizar cada tipo:

• El bucle for debe usarse principalmente cuando el número de iteraciones es conocido.
• El bucle while debe usarse principalmente cuando el número de iteraciones es desconocido y el código iterable debe ejecutarse cero o más veces.
• El bucle do-while debe utilizarse como el bucle while, pero esta vez cuando el código iterable debe ejecutarse al menos una vez.

Has aprendido también que las reglas de ejecución del bucle pueden alterarse con el uso de los comandos break y continue, y finalmente has aprendido cuáles son los errores más típicos a la hora de utilizar bucles.

Próximos pasos

En el próximo capítulo de la unidad, Funciones y funciones flecha, aprenderemos la forma por excelencia de reutilizar código: la declaración de funciones.