Cómo detener un ciclo for en JavaScript con break

Estrada Web Group
Estrada Web Group
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:

Break en ciclo for de JavaScript

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:

break de JavaScript 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:

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.

 

Compartir artículo:

Más artículos geniales

Cómo filtrar elementos en un array con el método filter() en JavaScript

Cómo filtrar elementos en un array con el método filter() en JavaScript

Resumen: en este tutorial, aprenderás a usar el método filter() de Array en JavaScript para filtrar elementos en un arreglo.

Ver artículo completo
Curso gratuito de JavaScript

Curso gratuito de JavaScript

Tutorial para aprender JavaScript de forma sencilla viendo un concepto teórico, luego algunos ejemplos resueltos y por último y lo más importante, efectuar una serie de ejemplos tu solo. Este curso es complementario al curso gratuito de HTML5 y el curso de CSS3

Ver artículo completo
¿Cómo ejecutar una función despues de transcurrir x número de segundos con setTimeout de JavaScript?

¿Cómo ejecutar una función despues de transcurrir x número de segundos con setTimeout de JavaScript?

El método setTimeout() permite ejecutar una función en JavaScript después de pasar cierto tiempo establecido previamente, es decir manda llamar una función después de esperar un número específico de milisegundos.

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla