Cómo detener un ciclo for en JavaScript con break

Resumen: en este tutorial, aprenderás cómo usar la declaración break de JavaScript para terminar un bucle en el momento que lo requieras.

La declaración de label o etiqueta

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

label: statement;

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

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 el break o continue.

¿Para que sirve break 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, label es opcional si usas la instrucción break en un ciclo o un switch. Sin embargo, si usas la declaración de break con una declaración de label, debes especificarla.

Este tutorial se enfoca en cómo usar la instrucción break para terminar el ciclo cuando así lo requieras.

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 for. Si el valor actual de i es 2, la sentencia if ejecuta la sentencia break que termina el ciclo.

Este diagrama de flujo ilustra cómo funciona la instrucción break en un bucle for:

Uso de la sentencia 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 usas una declaración de interrupción dentro de un bucle interno, solo termina el bucle 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, debes usar 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 outer. Dentro del ciclo interno, especificamos la etiqueta externa en la instrucción break. La instrucción break para terminar el bucle anidado si la suma de i y j es 4.

Uso de la declaración de break 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 cuando lo requieras. 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 while. Por lo tanto, solo imprime tres números.

El siguiente diagrama de flujo ilustra cómo funciona la instrucción break en un bucle while:

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

El siguiente diagrama de flujo muestra cómo funciona la instrucción break en un ciclo do while:

Resumen

• Utiliza la instrucción break para terminar un bucle que incluye for, while y do...while cuando lo requieras.
• Cuando se usa en un ciclo anidado, la declaración de interrupción finaliza el ciclo adjunto. Para terminar el ciclo anidado, usa una declaración de label.