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