Uso de break y continue en bucles - Bucles infinitos - Decremento en bucles - Condicionales en bucles - Curso de JavaScript de cero a máster - Capítulo 24


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.

Código JavaScript 

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;
	}
}

Resultado en el navegador

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.

El bucle while con break de JavaScript

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:

Código JavaScript 

let i = 0;

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

Resultado en el navegador

Se ejecuta el bucle. Primero se incrementa el valor de la varable 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.

El bucle while con continue de JavaScript

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:

Código JavaScript 

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.

Código JavaScript 

let i = 15;

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

Resultado en el navegador

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.

El bucle while con decremento

Ejercicios de JavaScript

  1. 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í: Haz click aquí.

Capítulos

    Suscríbete a mi canal de YouTube para apoyarme

    Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

    Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

    No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.

    Comentarios

    Si te quedan dudas sobre el temario, sobre JavaScript, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.