Cómo terminar un ciclo o bucle con break en JavaScript

Resumen: en este tutorial, aprenderás a usar la declaración de interrupción de JavaScript para terminar un ciclo prematuramente. Cuando tienes un ciclo o bucle y lo quieres concluir porque una condición se cumple puedes hacer uso de la instrucción break.

La declaración de label

En JavaScript, puedes etiquetar una declaración para su uso posterior. Aquí está la sintaxis de la declaración de la etiqueta:

label: statement;

En esta sintaxis, la etiqueta (label) puede ser cualquier identificador válido. Por ejemplo, a continuación, se muestra cómo etiquetar un bucle for usando la etiqueta externa:

outer: for (let i = 0; i < 5; i++) {
    console.log(i);
}

Una vez que defines una etiqueta, puedes hacer referencia a ella en la declaración de break o continue.

Introducción a la declaración de ruptura de JavaScript

La instrucción break finaliza un ciclo como for, do...while y while loop, un switch o una declaración label. Esta es la sintaxis de la instrucción break:

break [label];

En esta sintaxis, la etiqueta es opcional si usas la instrucción break en un ciclo o un switch. Sin embargo, si usas la declaración switch con una declaración de etiqueta, debes especificarla.

Este tutorial se enfoca en cómo usar la instrucción break para terminar el ciclo con anterioridad.

Usando la declaración break de JavaScript en un bucle for

La siguiente instrucción de bucle for genera cinco números del 0 al 4:

for (let i = 0; i < 5; i++) {
  console.log(i);
}

Resultado:

0
1
2
3
4

Para terminar el ciclo for antes de tiempo, puedes usar una instrucción break. Por ejemplo, lo siguiente ilustra cómo usar una instrucción break dentro de un bucle for:

for (let i = 0; i < 5; i++) {
  console.log(i);
  if (i == 2) {
    break;
  }
}

Resultado:

0
1
2

En este ejemplo, usamos una instrucción if dentro del bucle for. Si el valor actual de i es 2, la sentencia if ejecuta la sentencia break que termina el ciclo.

Uso de la instrucción break para terminar un bucle anidado

Un bucle anidado tiene un bucle dentro de otro. Por ejemplo, lo siguiente usa un bucle for anidado para generar un par de números del 1 al 3:

for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    console.log(i, j);
  }
}

Resultado:

1 1
1 2
1 3
2 1
2 2
2 3
3 1
3 2
3 3

Si usa una declaración break dentro de un ciclo interno, solo termina el ciclo que lo contiene. Por ejemplo:

for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    if (i + j == 4) {
      break;
    }
    console.log(i, j);
  }
}

Resultado:

1 1
1 2
2 1

En este ejemplo, si la suma de i y j es 4, la instrucción break finaliza el ciclo interno. Para terminar el ciclo anidado, usa una declaración de etiqueta. Por ejemplo:

outer: for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    if (i + j == 4) {
      break outer;
    }
    console.log(i, j);
  }
}

Resultado:

1 1
1 2

En este ejemplo, etiquetamos el bucle exterior con la etiqueta exterior. Dentro del ciclo interno, especificamos la etiqueta externa en la instrucción break. La instrucción break termina el bucle anidado si la suma de i y j es 4.

Uso de la declaración de interrupción de JavaScript en un ciclo while

Lo siguiente envía cinco números del 1 al 5 a la consola usando un bucle while:

let i = 0;

while (i < 5) {
  i++;
  console.log(i);
}

Resultado:

1
2
3
4
5

Al igual que un bucle for, la instrucción break finaliza un bucle while de forma anticipada. Por ejemplo:

let i = 0;

while (i < 5) {
  i++;
  console.log(i);
  if (i == 3) {
    break;
  }
}

Resultado:

1
2
3

En este ejemplo, cuando el valor actual de i es 3, la instrucción break finaliza el bucle. Por lo tanto, solo se imprimen tres números en la salida.

Uso de la declaración break de JavaScript en un bucle do...while

El siguiente ejemplo usa una instrucción do...while para enviar cinco números del 0 al 5 a la consola:

let i = 0;

do {
  i++;
  console.log(i);
} while (i < 5);

Resultado:

1
2
3
4
5

Al igual que un ciclo while, puedes usar una instrucción break para terminar un ciclo do...while. Por ejemplo:

let i = 0;

do {
  i++;
  console.log(i);
  if (i == 3) {
    break;
  }
} while (i < 5);

Resultado:

1
2
3

Resumen

• Utiliza la instrucción break para terminar un bucle que incluye for, while y do...while antes de tiempo.
• Cuando se usa en un ciclo anidado, la instrucción break finaliza el ciclo envolvente. Para terminar el ciclo anidado, usa una declaración de etiqueta.