Al trabajar con bucles en JavaScript, a veces necesitamos detener la ejecución antes de que termine o saltarnos ciertas iteraciones. Para esto, existen dos instrucciones especiales: break y continue. No son obligatorias, pero es importante conocerlas porque aparecen con frecuencia en el código de otros programadores.
La Instrucción break
break se usa para salir completamente de un bucle. En cuanto se ejecuta, el programa deja de iterar y continúa con el código que se encuentra después del bucle.
⏬ Ejemplo: Detener un recorrido de un array
Supongamos que tenemos una lista de palabras y queremos detenernos cuando encontremos la palabra "stop":
const words = ['one', 'two', 'three', 'four', 'stop', 'five'];
for (const word of words) {
if (word === 'stop') {
break; // Sale del bucle inmediatamente
}
console.log(word);
}
⏬ Salida en la consola:
one
two
three
four
Cuando el bucle encuentra "stop", deja de ejecutarse y no imprime "five".
Alternativa sin break: Usar un while
El mismo comportamiento se puede lograr con un while, que es más adecuado cuando no sabemos cuántas iteraciones serán necesarias:
const words = ['one', 'two', 'three', 'four', 'stop', 'five'];
let i = 0;
while (words[i] !== 'stop') {
console.log(words[i]);
i += 1;
}
Este bucle se ejecuta mientras el elemento actual no sea "stop".
Cuidado con los bucle infinitos
while nunca se vuelve falsa, el bucle no se detendrá, causando un bucle infinito.
let i = 0;
// ¡Este código nunca terminará por sí solo!
while (true) {
console.log(i);
i += 1;
}
Para evitar esto, siempre hay que asegurarse de que la condición de salida se cumpla en algún momento.
La Instrucción continue
continue omite la iteración actual y pasa a la siguiente. En otras palabras, en lugar de salir completamente del bucle (como break), simplemente salta el resto del código en la iteración actual y pasa a la siguiente.
⏬ Ejemplo: Filtrar elementos de un array
Veamos un caso donde queremos eliminar null de un array y conservar los demás valores:
const myCompact = (array) => {
const result = [];
for (const item of array) {
if (item === null) {
continue; // Salta esta iteración y pasa al siguiente elemento
}
result.push(item);
}
return result;
};
console.log(myCompact([1, null, 2, 3, null, 4]));
⏬ Salida en la consola:
[1, 2, 3, 4]
Cuando el bucle encuentra un null, la instrucción continue hace que el programa salte al siguiente elemento sin ejecutar result.push(item).
Alternativa sin continue: usar una condición
El mismo código se puede escribir de forma más sencilla sin continue:
const myCompact = (array) => {
const result = [];
for (const item of array) {
if (item !== null) {
result.push(item);
}
}
return result;
};
Al evitar continue, reducimos una línea de código y el flujo de ejecución es más claro.
¿Cuándo Usar break y continue?
Si bien break y continue pueden hacer que el código sea más flexible, a menudo es posible escribir la misma lógica sin ellas, de una forma más clara. En la práctica:
| Caso | Uso recomendado |
|---|---|
| Necesitas detener un bucle cuando se cumple una condición. | Usa break. |
| Quieres saltar una iteración sin salir del bucle. | Usa continue. |
| Buscas una alternativa más clara sin romper el flujo del código. | Considera reescribir el bucle sin break ni continue. |
Resumen
- La instrucción
breakdetiene un bucle inmediatamente y continúa con el código siguiente. - La instrucción
continueomite la iteración actual y pasa a la siguiente sin detener el bucle. - Cuando no conocemos de antemano la cantidad de iteraciones, un
whilepuede ser más adecuado que unfor. - Los bucles infinitos pueden ocurrir si no se define correctamente una condición de salida en un
while. - A menudo, es posible escribir el código sin
breakycontinue, haciéndolo más simple y fácil de entender.
Materiales adicionales
Para acceder completo a curso necesitas un plan básico
El plan básico te dará acceso completo a todos los cursos, ejercicios y lecciones de Códica, proyectos y acceso de por vida a la teoría de las lecciones completadas. La suscripción se puede cancelar en cualquier momento.
