JavaScript
break y continue
Diferencia break, continue, return y throw para detener bucles, saltar iteraciones y controlar búsquedas o procesos sin crear flujos confusos.
- Última actualización
- Actualizada
- Nivel
- Fundamentos
- Fundamentos de programación
JavaScript
Diferencia break, continue, return y throw para detener bucles, saltar iteraciones y controlar búsquedas o procesos sin crear flujos confusos.
break y continue cambian el recorrido normal de un bucle.
break termina el bucle por completo.continue termina únicamente la iteración actual y pasa a la siguiente.for (const product of products) {
if (product.id === targetId) {
selectedProduct = product;
break;
}
}for (const product of products) {
if (!product.isActive) {
continue;
}
displayProduct(product);
}break sale del bucle más cercano.
for (let number = 1; number <= 10; number++) {
if (number === 4) {
break;
}
console.log(number);
}Imprime:
1
2
3Cuando number llega a 4, el bucle termina y el programa continúa después de él.
console.log("Loop finished");let selectedUser = null;
for (const user of users) {
if (user.email === targetEmail) {
selectedUser = user;
break;
}
}Una vez encontrado el usuario, continuar no aporta nada.
let total = 0;
for (const item of items) {
if (total + item.price > budget) {
break;
}
total += item.price;
}while (true) {
const command = readCommand();
if (command === "exit") {
break;
}
executeCommand(command);
}break también detiene un switch.
switch (status) {
case "pending":
showPending();
break;
case "completed":
showCompleted();
break;
}Aunque la palabra es la misma, aquí no termina un bucle: termina la ejecución del switch.
continue omite el resto del bloque actual y avanza a la siguiente iteración.
for (let number = 1; number <= 5; number++) {
if (number === 3) {
continue;
}
console.log(number);
}Imprime:
1
2
4
5El bucle continúa; únicamente se omite el trabajo correspondiente a 3.
Sin continue:
for (const product of products) {
if (product.isActive) {
if (product.stock > 0) {
displayProduct(product);
}
}
}Con condiciones de descarte:
for (const product of products) {
if (!product.isActive) {
continue;
}
if (product.stock === 0) {
continue;
}
displayProduct(product);
}Cada condición explica por qué el elemento actual no debe continuar. El camino principal queda al final y con menos niveles.
En un while, debes asegurarte de actualizar las variables necesarias antes de usar continue.
let index = 0;
while (index < products.length) {
const product = products[index];
if (!product.isActive) {
continue; // index nunca aumenta.
}
index++;
}Si aparece un producto inactivo, el bucle queda atrapado en la misma posición.
Una versión correcta:
let index = 0;
while (index < products.length) {
const product = products[index];
index++;
if (!product.isActive) {
continue;
}
displayProduct(product);
}O utiliza for...of si no necesitas controlar el índice:
for (const product of products) {
if (!product.isActive) {
continue;
}
displayProduct(product);
}break y continue afectan al bucle más cercano.
for (const row of matrix) {
for (const value of row) {
if (value === target) {
break;
}
}
}El break termina solo el bucle interior. El bucle exterior continúa con la siguiente fila.
JavaScript permite asignar una etiqueta a una sentencia y utilizarla con break o continue.
outerLoop:
for (const row of matrix) {
for (const value of row) {
if (value === target) {
break outerLoop;
}
}
}Esto termina ambos bucles.
Las etiquetas son válidas, pero poco frecuentes. Si un algoritmo necesita varias etiquetas o saltos difíciles de seguir, probablemente convenga extraer una función.
function containsValue(matrix, target) {
for (const row of matrix) {
for (const value of row) {
if (value === target) {
return true;
}
}
}
return false;
}return comunica mejor que la función ya encontró la respuesta.
return termina la función completa.
function findUser(users, targetId) {
for (const user of users) {
if (user.id === targetId) {
return user;
}
}
return null;
}break solo termina el bucle y permite continuar dentro de la función.
function findUserAndLog(users, targetId) {
let result = null;
for (const user of users) {
if (user.id === targetId) {
result = user;
break;
}
}
console.log("Search completed");
return result;
}throw interrumpe la ejecución normal y genera un error.
for (const order of orders) {
if (!order.id) {
throw new Error("Order id is required");
}
}continue omite un elemento y sigue.break termina la repetición normalmente.return termina la función.throw termina el flujo normal con un error.Esto no es válido:
products.forEach((product) => {
if (!product.isActive) {
continue;
}
});El callback de forEach es una función separada; no es el cuerpo directo de un bucle.
Un return dentro del callback se comporta como un continue local:
products.forEach((product) => {
if (!product.isActive) {
return;
}
displayProduct(product);
});Pero forEach no puede detenerse con break.
Cuando necesitas detener la iteración, utiliza:
for...of.find para buscar un elemento.some para comprobar si alguno cumple.every para comprobar si todos cumplen.const hasInvalidProduct = products.some(
(product) => !product.id,
);function prepareProducts(products, limit) {
const result = [];
for (const product of products) {
if (!product.isActive) {
continue;
}
if (!product.id) {
throw new Error("An active product requires an id");
}
result.push({
id: product.id,
stock: product.stock,
});
if (result.length === limit) {
break;
}
}
return result;
}continue descarta productos inactivos.throw detecta un dato inválido.break detiene el proceso al alcanzar el límite.return entrega el resultado y termina la función.break termine varios bucles anidados.continue antes de actualizar el contador de un while.break o continue dentro de forEach.break cuando return comunica mejor que la función terminó.break también controla el fall-through de switch.break termina el bucle o switch más cercano.continue salta el resto de la iteración actual.while, la actualización debe seguir ocurriendo aunque exista continue.return termina una función, no solo un bucle.throw interrumpe el flujo mediante un error.forEach no permite break ni continue directos.¿Qué imprime este código?
for (let number = 1; number <= 6; number++) {
if (number === 2) {
continue;
}
if (number === 5) {
break;
}
console.log(number);
}1
3
42 se omite con continue. Al llegar a 5, break termina el bucle antes del console.log.
Diseño de decisiones reúne técnicas para mantener claros los condicionales y caminos de ejecución cuando las reglas crecen.