Bucles con while

¿Te imaginas escribir cien veces la misma línea para mostrar cien números? Los programadores somos demasiado vagos para eso. Por eso existen los bucles: una estructura de control que te permite repetir una tarea tantas veces como quieras.

En JavaScript hay varias formas de crear bucles y la más sencilla es while, que en inglés significa «mientras». Hace justo lo que dice su nombre: ejecuta un bloque de código mientras se cumpla una condición.

Es como remover el café mientras quede azúcar en el fondo: no decides de antemano cuántas vueltas dar, paras cuando la condición deja de cumplirse.

Sintaxis#

Si ya sabes escribir un if, ya sabes escribir un while: son casi idénticos. La diferencia es que el if ejecuta su código una sola vez y el while lo repite mientras la condición se cumpla.

while (condición) {  // código a ejecutar mientras se cumpla la condición}

Así es como lo recorre JavaScript:

1. Evalúa la condición que hay entre paréntesis.
2. Si es true, ejecuta el código que hay entre las llaves.
3. Vuelve al paso 1. Y así una y otra vez, hasta que la condición sea false.

¿Y si la condición es falsa desde el principio? Entonces el código de dentro no se ejecuta ni una sola vez.

Ejemplo de uso de while#

Vamos a programar la cuenta atrás de un cohete. Lo primero es una variable cuentaAtras con los segundos que faltan para el lanzamiento. Empezamos en 10:

let cuentaAtras = 10

Para quitarle un segundo usamos el operador de resta (-) y el de asignación (=). Le decimos: «tu nuevo valor es el que tenías menos uno».

let cuentaAtras = 10cuentaAtras = cuentaAtras - 1console.log(cuentaAtras) // -> 9

Ya tenemos las dos piezas. Solo falta meter esa resta dentro de un while para que se repita sola:

// iniciamos la variable fuera del buclelet cuentaAtras = 10// mientras la cuenta atrás sea mayor que 0while (cuentaAtras > 0) {  // mostramos el valor de la cuenta atrás en cada iteración  console.log(cuentaAtras)  // restamos 1 a la cuenta atrás  cuentaAtras = cuentaAtras - 1}console.log('¡Despegue! 🚀')

Si lo ejecutas en la consola verás los números del 10 al 1 y, después, el mensaje de despegue. Cuando cuentaAtras llega a 0, la condición cuentaAtras > 0 pasa a ser false y el bucle termina.

Cuidado con los bucles infinitos#

Los bucles while son muy potentes, pero tienen un peligro: si la condición nunca llega a ser false, el bucle no termina jamás.

while (true) {  console.log('¡Hola hasta el infinito!') // ⚠️ nunca para}

La condición es true, siempre va a ser true, y JavaScript ejecutará el código de las llaves una y otra vez sin descanso.

Saliendo de un bucle con break#

Puedes decidir tú cuándo salir de un bucle con la palabra reservada break. En cuanto JavaScript se la encuentra, abandona el bucle y continúa con el código que haya después.

Fíjate en el if que hemos añadido al final:

let cuentaAtras = 10while (cuentaAtras > 0) {  console.log(cuentaAtras)  cuentaAtras = cuentaAtras - 1  // si la cuenta atrás es 5, salimos del bucle  if (cuentaAtras === 5) {    break // <---- salimos del bucle  }}

¿Cuánto vale cuentaAtras cuando termina este código? El bucle iba restando tan tranquilo, pero le hemos dicho que al llegar a 5 saliese. Así que se queda en 5: lanzamiento abortado.

break es útil cuando quieres salir por una condición concreta y, justamente, para evitar bucles infinitos.

Saltando una iteración con continue#

Igual que puedes «romper» el bucle con break, puedes saltarte solo una vuelta con continue. Cuando JavaScript lo encuentra, deja lo que queda de esa iteración y pasa a la siguiente. El bucle sigue vivo.

let cuentaAtras = 10while (cuentaAtras > 0) {  cuentaAtras = cuentaAtras - 1  // si la cuenta atrás es un número par...  if (cuentaAtras % 2 === 0) {    continue // <---- saltamos a la siguiente iteración  }  console.log(cuentaAtras)}

¿Qué sale por consola? Cuando el número es par, el continue hace que JavaScript no llegue nunca al console.log de esa vuelta. Por eso solo verás los impares: 9, 7, 5, 3 y 1.

Anidación de bucles#

Dentro de un bucle puedes meter otro bucle. Imagina que, en cada segundo de la cuenta atrás, hay que revisar 3 cosas del cohete: el oxígeno, el combustible y la temperatura.

const NUMERO_REVISIONES = 3let cuentaAtras = 10// mientras la cuenta atrás sea mayor que 0while (cuentaAtras > 0) {  // mostramos el valor de la cuenta atrás  console.log(cuentaAtras)  // creamos una variable para contar las revisiones realizadas  // y la inicializamos a cero  let revisionesRealizadas = 0  // hasta que no hayamos realizado las 3 revisiones...  while (revisionesRealizadas < NUMERO_REVISIONES) {    // sumamos 1 a las revisiones realizadas    revisionesRealizadas = revisionesRealizadas + 1    console.log(revisionesRealizadas + ' revisiones realizadas...')  }  // ahora podemos restar 1 a la cuenta atrás  cuentaAtras = cuentaAtras - 1}

Por cada vuelta del bucle de fuera, el de dentro da sus tres vueltas completas. En total: 10 segundos y 30 revisiones.

Además del bucle anidado, en ese código hay otro detalle interesante: la variable revisionesRealizadas se crea dentro del bucle. Eso significa que se crea y se inicializa a 0 en cada iteración.

Y hay más. Las variables creadas con let y const dentro de un bucle solo existen dentro de ese bucle. Si intentas usarlas fuera, tendrás un error:

let cuentaAtras = 10while (cuentaAtras > 0) {  let revisionesRealizadas = 3  console.log(revisionesRealizadas)  cuentaAtras = cuentaAtras - 1}console.log(revisionesRealizadas) // ❌ ReferenceError

Pasa lo mismo con las demás estructuras de control, porque el alcance de las variables creadas con let y const es el bloque entre {} en el que se crean. No te preocupes: lo iremos viendo más adelante para que vayas practicando.

while (condition) {  // código a ejecutar mientras se cumpla la condición}

while {  // código a ejecutar mientras se cumpla la condición} (condition)