Cómo romper un bucle en JavaScript

Javascript

En JavaScript tenemos a nuestra disposición una gran cantidad de bucles. En caso de que quieras parar la ejecución de un bucle cuando llegues a una determinada iteración, tendrás que usar las sentencias que JavaScript ofrece para tal fin. Estas sentencias son la sentencia break y la sentencia continue.

Vamos a partir del siguiente ejemplo, que es un bucle for de toda la vida:

const letras = ['a', 'b', 'c', 'd', 'e'];
for (let i = 0; i < letras.length; i++) {
  // Codigo
}

Sentencia break

La sentencia break sirve para romper un bucle, frenando su ejecución y saliendo del mismo, sin iteraciones adicionales.

Imagínate que quieres romper el bucle anterior y salir del mismo, tendrás que usar la sentencia break. En este ejemplo frenamos la ejecución del bucle y salimos del mismo cuando el bucle procesa la letra 'd', por lo que solo se mostrarán por pantalla las letras 'a', 'b' y 'c':

const letras = ['a', 'b', 'c', 'd', 'e'];
for (let i = 0; i < letras.length; i++) {
  if (letras[i] === 'd') {
    break;
  }
  console.log(letras[i]);
}

La sentencia break también puede ser usada en los bucles for of,  tal y como podemos ver en este ejemplo:

const letras = ['a', 'b', 'c', 'd', 'e'];
for (const letra of letras) {
  if (letra === 'd') {
    break;
  }
  console.log(letra)
}

Los bucles while también aceptan la sentencia break:

const letras = ['a', 'b', 'c', 'd', 'e'];
let i = 0
while (i < letras.length) {
  if (i === 'd') {
    break;
  }
  console.log(letras[i]);
  i++;
}

Sin embargo, la sentencia break no está disponible en el bucle forEach, por lo que no podrás usarla en este bucle.

Sentencia continue

La sentencia continue permite saltarse la iteración actual, continuando en la siguiente. Es decir; el bucle continuará ejecutándose normalmente a excepción iteración que se ejecuta en el presente.

Si quieres saltarte una iteración en el bucle de nuestro ejemplo pero continuar la ejecución del bucle, tendrás que usar la sentencia continue. En el ejemplo que veas a continuación, nos saltamos la iteración de la letra 'd' y continuamos en la letra 'e'. Se mostrarán por pantalla todas las letras a excepción de la 'd':

const letras = ['a', 'b', 'c', 'd', 'e'];
for (let i = 0; i < letras.length; i++) {
  if (letras[i] === 'd') {
    continue;
  }
  console.log(letras[i]);
}

La sentencia continue también puede ser usada en los bucles for of,  tal y como ves en este ejemplo:

const letras = ['a', 'b', 'c', 'd', 'e'];
for (const letra of letras) {
  if (letra === 'd') {
    continue;
  }
  console.log(letra)
}

Los bucles while también aceptan la sentencia continue:

const letras = ['a', 'b', 'c', 'd', 'e'];
let i = 0
while (i < letras.length) {
  if (i === 'd') {
    continue;
  }
  console.log(letras[i]);
  i++;
}

Sin embargo, al igual que ocurre con la sentencia break, la sentencia continue no está disponible en el bucle forEach.

Y esto ha sido todo.


Avatar de Edu Lazaro

Edu Lázaro: Ingeniero técnico en informática, actualmente trabajo como desarrollador web y programador de videojuegos.

👋 Hola! Soy Edu, me encanta crear cosas y he redactado esta guía. Si te ha resultado útil, el mayor favor que me podrías hacer es el de compatirla en Twitter 😊

Si quieres conocer mis proyectos, sígueme en Twitter.

3 comentarios en “Cómo romper un bucle en JavaScript

  1. Hola ! Muy bueno este articulo.
    Una pregunta. En este articulo explica como salir de bucle en un momento especifico, cierto.
    ¿Cómo romper el bucle en cualquier momento si se produce un evento onclick?

    Soy un aficionado, estoy aprendiendo ahora en mis ratos libre.
    Si estoy leyendo un array con un bucle for, ¿Cómo interrumpir la lectura del array en cualquier momento?
    Tu ayuda será muy valiosa para un juego educativo para niños que estoy tratando de realizar.
    Vivo en Santo Domingo Republica Dominicana. imparto clases de informática para niños.
    Saludos.

    1. Hola Eduardo, seria imposible corta un bucle de esa manera, ya que la petición del evento onClick no podría ejecutarse hasta que termine la sentencia que realizo el bucle. Si no estoy equivocado por tu pregunta creo que lo que necesitas investigar es el manejo de estado de una variable, fijate de leer algo React

  2. Hola, me encanta tu contenido, se aprende un montón.
    Tengo una duda, como seria la aplicación de la keyword break cuando tienes siclos anidados y quieres detener la ejecución de los ciclos cuando se cumpla x condición.

Responder a Dario Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

“- Hey, Doc. No tenemos suficiente carretera para ir a 140/h km. - ¿Carretera? A donde vamos, no necesitaremos carreteras.”