Las sentencias break
y continue
del lenguaje JS te ayudan a manipular el funcionamiento por defecto de las estructuras iterativas, interrumpiendo el bucle o saltándose alguno de ellos a elección.
¿Qué te vas a encontrar en esta entrada?
Tabla de contenidos
break
Esta instrucción se utiliza para interrumpir la ejecución de un bucle. Esta sentencia se utiliza en la estructura iterativa switch
.
Otro de los usos de la sentencia break
es cuando tienes una estructura for
y por alguna razón quieres salir del bucle.
for (var i = 0; i <= 500; i++) { if (i > 100) { break; } document.write("Iteración: " + i); }
Este código es una tontería, pero ilustra el funcionamiento break
dentro de un bucle.
La sentencia break
puede ser útil en algunos casos, pero su uso no es aconsejado porque complica bastante su mantenimiento.
Otro ejemplo con un uso más lógico que el anterior podría ser este:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Tabla del 5</title> </head> <body> <div id="tabla"></div> <!-- Escribir resultado --> <script> for (var i = 0; i <= 10; i++) { var resultado = i * 5; document.getElementById('tabla').innerHTML += `5 * ${i} = ${resultado} </br>`; if (i != 10){ // Si no preguntaria por 5 * 11 sin mostrarlo var confirmacion = confirm('¿Quieres continuar multiplicando? | La siguiente será 5 * '+ (i+1)); } if (!confirmacion) { // Recoge si el usuario a pulsado cancelar break; } } </script> </body> </html>
Este código muestra por pantalla la tabla de multiplicar del 5, preguntando al usuario donde quiere parar. Es un despropósito de algoritmo, pero muestra la función del break
.
El resultado se imprime en un elemento div
con un id = "tabla"
. Desde JavaScript para imprimir algo en pantalla normalmente se utiliza el método getElementById('id_elemento')
para referirnos a él, y la propiedad innerHTML
contine el texto o expresión que queremos mostrar. Lo verás en próximas entradas con más detalle.
continue
La sentencia continue
corta la ejecución de la iteración que se está ejecutando en ese mismo momento y salta a la iteración siguiente, por lo que es útil si quieres que algún valor no se muestre, añada o cuente para el calculo.
Imagina que no quieres sumar los números impares del 1 al 100, sólo quieres sumar los números pares. Con la sentencia continue
lo puedes hacer así:
... <body> <div id="suma"></div> <!-- Escribir resultado --> <script> var suma = 0; // Inicializamos la suma a 0 for (var i = 1; i <= 100; i++) { if (i%2 != 0) { // Si es impar entra en el if continue; } suma += i; } document.getElementById('suma').innerHTML = `La suma de los número pares del 1 al 100 es de: ${suma}`; </script> </body> ...
A través de la expresión (i % 2 != 0)
, si el módulo de la variable i
entre 2
, no es igual a 0
(si el módulo de un número dividido entre 2 es diferente de 0, quiere decir que no es divisible, por lo tanto es impar), se controla si el índice del for
es par o impar.
Igual que en el caso de la sentencia break
, la instrucción continue
tampoco es aconsejable por su difícil mantenimiento. En el caso anterior, podrías hacer el mismo ejemplo sin la sentencia continue
.
Está sería la forma:
... <body> <div id="suma"></div> <!-- Escribir resultado --> <script> var suma = 0; // Inicializamos la suma a 0 for (var i = 1; i <= 100; i++) { if (i%2 != 0) { // Si es par entra en el if suma += i; } } document.getElementById('suma').innerHTML = `La suma de los número pares del 1 al 100 es de: ${suma}`; </script> </body> ...
Simplemente cambiando la condición negativa a positiva de entrada en el if
de ésta, (i % 2 != 0)
a ésta (i % 2 == 0)
. Y poniendo en el mismo lugar, la instrucción suma += i
, donde estaba continue
.
Lo que se hace en este ejemplo es incrementar la suma sólo si es par y si es impar no.
Deja una respuesta