Cómo controlar los bucles con break, continue y condicionales en JavaScript

En este capítulo te voy a mostrar como utilizar condicionales dentro de bucles.
También va a ver el uso de break y continue además de ejemplos con bucles infinitos.

Condicionales dentro de bucles

En los bucles también puedes utilizar condicionales, esto te permitirá que ocurran cosas diferentes en determinadas iteraciones, de este modo podemos añadir mayor complejidad a los bucles.

Utilizar break para salir de un bucle

Los ejemplos los vamos a ver con el bucle while, pero los puedes aplicar también para el bucle for.

let i = 1;
while (i <= 10) {
	document.write("El valor del bucle es: " + i + "<br>");
	i++;
	if (i == 7){
		document.write("Se rompió la ejecución del bucle.");
		break;
	}
}

Como puedes ver, el bucle se ejecuta con normalidad hasta que llega a ser true la condición del if que contiene un break que rompe la ejecución del bucle antes de lo indicado en su condición de salida.

Utilizar continue para salir de un bucle

Palabra del lenguaje nº 41 encontrada.
continue nos permite omitir una o varias iteraciones en un bucle sin romper su ejecución.

Podemos utilizar continue para omitir alguna parte de la ejecución del bucle. Aquí tienes un ejemplo:

let i = 0;

while (i < 10) {
	i++;
	if (i >= 5 && i <=7) {
		continue;
	}
	document.write("El valor del bucle es: " + i + "<br>");
}

Se ejecuta el bucle. Primero se incrementa el valor de la variable i en 1, se lee el if, la condición da false, ya que i no es mayor o igual que 5 y menor o igual que 7. Se imprime el valor de i, vale 1 la primera vez que llega al document.write(). Ese es el primer valor que imprime en el documento.
En cuanto el valor de i cumple con la condición del if (la primera vez vale 5) se ejecuta este continue que está dentro. Este omite una iteración cada vez que se ejecuta. Puesto que el if da true cuando i vale 5, 6 y 7, se omiten estas tres ejecuciones y por lo tanto, no se llega a ejecutar el document.write() que está debajo del continue.

Bucles infinitos

Pasemos a hablar sobre los bucles infinitos.

¿Qué son los bucles infinitos?

Un bucle infinito es aquel que según su construcción, no puede terminarse y se ejecuta infinitamente.

¿Como se crea un bucle infinito?

Los bucles infinitos generalmente se crean por error, a no ser que queramos que algo se mantenga en constante ejecución y no finalice. Aquí un ejemplo:

let i = 1;

while (i <= 10) {
	document.write("El valor del bucle es: " + i + "<br>");
}

A este bucle le falta la expresión final (incremento/decremento). De esta forma, el valor inicial de i siempre será 1, de forma que la condición de salida del bucle nunca se cumple y se ejecutará infinitamente.

En el vídeo te muestro un entorno de pruebas con una aplicación web para que puedas probar estos bucles infinitos. Si lo pruebas en tu navegador directamente lo vas a dejar colgado al estar iterando constantemente.

Decrementar en bucles

Hasta ahora solo he utilizado el incremento para la expresión final. Puedes utilizar también el decremento para salir de un bucle.

let i = 15;

while (i >= 10) {
	document.write("El valor del bucle es: " + i + "<br>");
	i--;
}

Es lo mismo, solo que ahora, hay que hacer el cálculo al revés, el valor inicial de i es 15 y va restando hasta llegar a 10.

Ejercicios de JavaScript

59. Crea un bucle while con la condición de inicio en 10. Que la condición de salida sea menor o igual a 30 y que solo se ejecute hasta que la condición de inicio valga 20 (imprime estos valores en el documento con un document.write(), el valor 20 debe ser imprimido también).

La solución la encontrarás aquí: Soluciones de ejercicios de JavaScript.