Los bucles de JavaScript son esenciales para manejar de manera eficiente tareas repetitivas. Ejecutan un bloque de código repetidamente siempre que una condición específica siga siendo verdadera. Estos bucles son herramientas poderosas para automatizar tareas y optimizar su código.

Por ejemplo, supongamos que queremos imprimir Hola Mundo 5 veces. Esto se puede hacer fácilmente usando JS Loop. En Loop, la declaración debe escribirse solo una vez y el bucle se ejecutará 5 veces como se muestra a continuación:

for (let i = 0; i < 5; i++) {  console.log('Hello World!'); }>

Hello World! Hello World! Hello World! Hello World! Hello World!>

Tabla de contenidos

• en bucle
• mientras bucle
• bucle hacer-mientras
• bucle for-in
• bucle for-of
• Declaración etiquetada
• Declaración de ruptura
• Continuar declaración
• Bucle infinito (error de bucle)

1. JavaScript para bucle

El JS para bucle proporciona una forma concisa de escribir la estructura del bucle. El bucle for contiene inicialización, condición e incremento/decremento en una línea, proporcionando así una estructura de bucle más corta y fácil de depurar.

Sintaxis

for (initialization; testing condition; increment/decrement) { statement(s) }>

Diagrama de flujo

• Condición de inicialización: Inicializa la variable y marca el inicio de un bucle for. Se puede utilizar una variable ya declarada o se puede declarar una variable, local para realizar un bucle únicamente.
• Condición de prueba: Se utiliza para probar la condición de salida de un bucle for. Debe devolver un valor booleano. También es un Bucle de control de entrada ya que la condición se verifica antes de la ejecución de las declaraciones del bucle.
• Ejecución de declaración: Una vez que se evalúa que la condición es verdadera, se ejecutan las declaraciones en el cuerpo del bucle.
• Incremento/ Disminución: Se utiliza para actualizar la variable para la siguiente iteración.
• Terminación del bucle: Cuando la condición se vuelve falsa, el bucle termina marcando el final de su ciclo de vida.

Ejemplo

// JavaScript program to illustrate for loop let x; // for loop begins when x = 2 // and runs till x <= 4 for (x = 2; x <= 4; x++) {  console.log('Value of x: ' + x); }>

Value of x: 2 Value of x: 3 Value of x: 4>

2. JavaScript mientras se realiza el bucle

El JS mientras bucle es una declaración de flujo de control que permite que el código se ejecute repetidamente según una condición booleana determinada. El bucle while puede considerarse como una declaración if que se repite.

Sintaxis

while (boolean condition) { loop statements... }>

Diagrama de flujo

• El bucle while comienza con la verificación de la condición. Si se evalúa como verdadero, entonces se ejecutan las declaraciones del cuerpo del bucle; de ​​lo contrario, se ejecuta la primera declaración que sigue al bucle. Por esta razón también se le llama Bucle de control de entrada
• Una vez que se evalúa que la condición es verdadera, se ejecutan las declaraciones en el cuerpo del bucle. Normalmente las declaraciones contienen un valor actualizado para la variable que se procesa para la siguiente iteración.
• Cuando la condición se vuelve falsa, el ciclo termina, lo que marca el final de su ciclo de vida.

Ejemplo

// JavaScript code to use while loop let val = 1; while (val < 6) {  console.log(val);   val += 1; }>

1 2 3 4 5>

3. Bucle hacer-mientras de JavaScript

El Bucle JS hacer-mientras es similar al bucle while con la única diferencia es que verifica la condición después de ejecutar las declaraciones y, por lo tanto, es un ejemplo de un Salga del circuito de control. Ejecuta el contenido del bucle al menos una vez en caso de que la condición sea falsa.

Sintaxis

do { Statements... } while (condition);>

Diagrama de flujo

• El ciclo do- while comienza con la ejecución de la(s) declaración(es). La primera vez no se comprueba ninguna condición.
• Después de la ejecución de las declaraciones y la actualización del valor de la variable, se verifica que la condición tenga un valor verdadero o falso. Si se evalúa como verdadero, comienza la siguiente iteración del ciclo.
• Cuando la condición se vuelve falsa, el ciclo termina, lo que marca el final de su ciclo de vida.
• Es importante tener en cuenta que el ciclo do- while ejecutará sus declaraciones al menos una vez antes de verificar cualquier condición y, por lo tanto, es un ejemplo del ciclo de control de salida.

Ejemplo

let test = 1; do {  console.log(test);  test++; } while(test <= 5)>

1 2 3 4 5>

4. Bucle for-in de JavaScript

JS para bucle de entrada se utiliza para iterar sobre las propiedades de un objeto. El bucle for-in itera sólo sobre aquellas claves de un objeto que tienen su propiedad enumerable establecida en verdadero.

Sintaxis

for(let variable_name in object_name) { // Statement }>

Ejemplo: Este ejemplo muestra el uso del bucle for-in.

let myObj = { x: 1, y: 2, z: 3 }; for (let key in myObj) {  console.log(key, myObj[key]); }>

x 1 y 2 z 3>

5. Bucle for-of de JavaScript

Bucle JS for-of se utiliza para iterar los objetos iterables, por ejemplo: matriz, objeto, conjunto y mapa. Itera directamente el valor del objeto iterable dado y tiene una sintaxis más concisa que el bucle for.

Sintaxis:

for(let variable_name of object_name) { // Statement }>

Ejemplo: Este ejemplo muestra el uso del bucle for-of.

let arr = [1, 2, 3, 4, 5]; for (let value of arr) {  console.log(value); }>

1 2 3 4 5>

6. Declaración etiquetada de JavaScript

Palabra clave de etiqueta JS no incluye una palabra clave ir. Los usuarios pueden utilizar la palabra clave continuar con la declaración de la etiqueta. Además, los usuarios pueden utilizar la palabra clave break para finalizar el bucle/bloque. También puede utilizar la palabra clave break sin definir la etiqueta, pero solo finaliza el bucle/bloque principal. Para terminar el bucle externo desde el bucle interno usando la palabra clave break, los usuarios deben definir la etiqueta.

Sintaxis

Label: statement (loop or block of code)>

Ejemplo

let sum = 0, a = 1;  // Label for outer loop  outerloop: while (true) {   a = 1;   // Label for inner loop   innerloop: while (a < 3) {   sum += a;   if (sum>12) { // Romper el bucle exterior del bucle interior romper el bucle exterior;   } console.log('suma = ' + suma);   a++;   } }>

sum = 1 sum = 3 sum = 4 sum = 6 sum = 7 sum = 9 sum = 10 sum = 12>

7. Declaración de interrupción de JavaScript

Declaración de ruptura JS se utiliza para finalizar la ejecución del bucle o instrucción de cambio cuando la condición es verdadera.

Sintaxis

break;>

Ejemplo

for (let i = 1; i < 6; i++) {  if (i == 4)   break;    console.log(i); }>

1 2 3>

8. Declaración de continuación de JavaScript

Declaración de continuación de JS se utiliza para romper la iteración del bucle y seguir con la siguiente iteración. La interrupción en la iteración es posible sólo cuando se va a producir la condición especificada. La principal diferencia entre la declaración de continuación y la de interrupción es que la declaración de interrupción sale completamente del ciclo, mientras que continuar se usa para interrumpir una declaración e iterar a la siguiente.

Sintaxis

continue;>

Ejemplo

for (let i = 0; i < 11; i++) {  if (i % 2 == 0)   continue;    console.log(i); }>

1 3 5 7 9>

9. Bucle infinito de JavaScript (error de bucle)

Uno de los errores más comunes al implementar cualquier tipo de bucle es que es posible que nunca salga, es decir, el bucle se ejecuta infinitas veces. Esto sucede cuando la condición falla por algún motivo.

Ejemplo: Este ejemplo muestra un bucle infinito.

// JavaScript program to illustrate infinite loop // Infinite loop because condition is not false // condition should have been i>0. for (sea i = 5; i != 0; i -= 2) { console.log(i); } sea x = 5; // Bucle infinito porque la declaración de actualización // no se proporciona while (x == 5) { console.log('En el bucle'); }>