Explicación de cada tipo de bucle de JavaScript: [con bloques de código y ejemplos]

JavaScript es uno de los lenguajes de programación más utilizados. Los desarrolladores que pretendan convertirse en ingenieros de JavaScript deben aprender los conceptos básicos de los bucles, sus tipos y cómo funcionan. 

Un bucle de JavaScript es una herramienta utilizada para realizar repeticiones.ated tareas basadas en una determinada condición. Por otro lado, 'iterate' es un término genérico que significa repetir en el contexto del bucle. Un bucle continuará iterandoate hasta que se cumpla una condición de parada. 

Para entenderlo mejor, puede considerarlo como un juego computarizado en el que se le indica que dé X pasos hacia el norte y luego Y pasos hacia la izquierda. 

Puedes representar take 7 steps northwards como; 

for (let step = 0; step < 7; step++) {

  // Runs 7 times, with values of steps 0 through 6.

  console.log("Walking northwards one step");

}

cuando se ejecute el bloque de código anterior, tendrá esto;

¿Por qué se utilizan los bucles?ally ¿usado?

• Realiza tareas repetitivas: Puede usar bucles para ejecutar instrucciones hasta que se cumplan ciertas condiciones. 
• Iterate sobre objetos o matrices: Con bucles, puedes iterarate sobre propiedades de un objeto o elementos de una matriz, permitiéndole realizar ciertas acciones para cada propiedad o elemento. 
• Filtrar datos: Puede usar un bucle para filtrar datos en función de condiciones específicas. 

Los bucles de JavaScript vienen en diferentes formas; For, While, Do...While, For...of y For...in. Exploremos en detalle y demostremosate cómo funciona cada uno. 

For loops

A for El bucle se repetirá hasta que se evalúe una condición específica.ates a verdadero. Un bucle for tiene tres expresiones opcionales, seguidas de un bloque de código. 

for (initialization; condition; finalExpression) {

  // code

}

• La initialization La expresión aparece antes de que se ejecute el primer bucle. Esta expresión sueleally Inicializa uno o más contadores. 
• A condition expresión se comprueba cada vez antes de la for se ejecuta el bucle. El código en el bucle o st.atement se ejecuta cada vez que la expresión evaluaates a verdadero. Por otro lado, el bucle se detiene cuando la expresión evaluaates a falso. Sin embargo, si se omite la expresión, la expresión evaluaráate a verdadero automáticoally. 
• La finalExpression se ejecuta después de cada iteración del bucle. La expresión se usa principalmente para incrementar un contador.

Puedes usar {}, bloquear statement, para agrupar y ejecutar múltiples statementos. Si desea salir del bucle antes de que se evalúe la expresión de condiciónates a falso, usa el punto de rupturaateambiente. 

Ejemplos de for bucles con código 

1. Uso for bucle a iterate;

for (let i = 0; i < 7; i++) {

  console.log(i);

}

En este bloque de código;

• La variable i se inicializa a zero (sea i=0). 
• La condición es i debería ser menor que 7 (i=7). 
• El bucle se repetiráateiterador diarioate si el valor de i es menor que 7 (i<7>. 
• La iteración sumará 1 al valor de i después de cada iteración (++1). 

2. Uso break statement para salir del bucle antes de la evaluación de la condiciónates a falso;

for (let i = 1; i < 11; i += 2) {

  if (i === 9) {

    break;

  }

  console.log('Total developers: ' + i);

}

• El iterador del bloque de código.ates de 1 a 10 (i<11).
• El bucle inicializa una variable. i con un valor de 1 (sea i = 1). 
• La condición de bucle seguirá ejecutándose si el valor de i es menor que 11 (i < 11). 
• El valor de i aumenta en 2 después de cada iteración (i += 2). 

el si stateevaluación del estadoates si el valor de i=9. Si la condición es verdadera, el break statement se ejecuta y el terminal del bucleates. 

(Imagen)

For…of loops

La for…of iterador de bucleates sobre objetos iterables como Map, Array, Arguments y Set. Este bucle invoca un gancho de iteración personalizado con statementos que se ejecutan por el valor de cada propiedad distinta. 

La estructura básica de un for…loop es;

for (variable of object)

  statement

Ejemplos de for…of bucle en acción

1. For…of bucle iterando sobre un array

const frontendLanguages = [ "HTML", "CSS", "JavaScript" , “React”];

for (let i of frontendLanguages) {

  console.log(i);

}

En este código;

• Definimos una matriz llamada frontendLanguages
• La matriz tiene tres elementos; "HTML", "CSS",  "JavaScript" and “React”. 
• La for…of loop procesoates sobre cada elemento en frontendLanguages.
• La i en el bloque de código toma el valor de cada elemento durante cada iteración y los valores impresos en la consola. 

2. For…of bucle iterando sobre un Set

const s = new Set();

s.add(2);

s.add("grey");

for (let n of s) {

  console.log(n);

}

En este bloque de código;

• Declaramos una variable s, que asignamos a un new Set utilizando el constructor Set().
• Se agregan dos elementos al código usando el método add()
• La for….of procesoates sobre el objeto de elementos.
• El bucle asigna el elemento actual a n antes de ejecutar console.log(n) . 

3. For…of bucle iterando sobre un Map

const m = new Map();

m.set(4, "rabbit");

m.set(6, "monkey");

m.set(8, "elephant");

m.set(10, "lion");

m.set(12, "leopard");

for (let n of m) {

  console.log(n);

}

En este bloque de código;

• Utilizamos Map() constructor a create un nuevo objeto de mapa.
• Una variable m se declara.
• Usar .set() método, sumamos cinco pares clave-valor.
• A for…of iterador de bucleates sobre elementos del objeto Mapa m. 

For…in loops

A for…in El bucle se utiliza para iterar.ate sobre las propiedades de un objeto. La estructura básica de un for…in el bucle es;

for (property in object) {

  // code

}

Puedes usar for…in bucle para iterarate Más de arrays y array-like objects. 

const shoppingList = { kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 };

for (const vegetable in shoppingList) {

  console.log(vegetable);

}

En este bloque de código;

• Introducimos un objeto JavaScript y lo nombramos shoppingList. 
• Usamos for loop para iterarate sobre cada propiedad en el shoppingList utilizando el operador in. 
• En cada iteración, el bucle asigna el nombre de la propiedad actual en el shoppingList. 

Aunque la

La while evaluación de bucleates una condition, si encuentra que es true, se ejecuta el bloque de código. Sin embargo, si el condition is false, el bucle finaliza y el bloque de código no se ejecutará.

Esta es la estructura básica de un while círculo;

while (condition)

    Statement

La condición de prueba debe ocurrir antes de la ejecución del st.atement en el bucle. Puedes ejecutar múltiples statementos usando {} o bloque statementos. 

Ejemplo de while bucle en acción

let n = 0;

while (n < 9) {

  console.log(n);

  n++;

}

En este código;

• Una variable n se inicializa con un zero valor (sea n=0).
• El ciclo se ejecutará mientras el valor de n es menor que 9 (n<9)
• El valor de n se muestra en la consola y aumenta en 1 después de cada iteración (n++)
• El código dejará de ejecutarse a las 8. 

Do … While Red ISTE Loop

A do…while iterador de bucleates hasta que se evalúe una condición específicaatepara false. 

La estructura general de un do…while statement es;

do

  statement

while (condition);

El stateEl proceso se ejecuta una vez pero antes de verificar la condición. el statement se ejecutará si el condition is true. Sin embargo, si la evaluaciónated condition is false, la ejecución se detendrá y el control pasará al statemento después del do..while. Código en un do…while Se garantiza que el bucle se ejecutará al menos una vez, incluso si la condición evalúa.atepara true. 

Ejemplo de do…while

let n = 0;

do {

  n += 1;

  console.log(n);

} while (n < 7);

En este código;

• Introducimos una variable n y establezca su valor inicial en 0 (sea n=0).
• nuestra variable n entra en un bucle do...while donde su valor se incrementa en 1 después de cada iteración (n+=1)
• El valor de n está registrado.
• El ciclo continuará ejecutándose mientras el valor de n es menor que 7 (n<7). 

Cuando ejecute este código, la consola mostrará valores de n que van del 1 al 7 mientras el ciclo se ejecuta 7 veces.

Bucle anidado

Un bucle anidado es una situación whereby tenemos un bucle dentro de un bucle. Por ejemplo, podemos tener un bucle for anidado dentro de otro bucle for. 

for (let outer = 0; outer < 5; outer += 2) {

  for (let inner = 0; inner < 6; inner += 2) {

    console.log(`${outer}-${inner}`);

  }

}

• Hay dos variables; outer y inner y ambos se inicializan con el valor zero.
• Ambas variables se incrementan en 2 después de cada iteración
• La outer y inner iterador de buclesate tres veces cada uno. 

Control de bucleatementos

Loop control statementos, a veces conocidos como “salto statements” interrumpen el flujo normal de un programa. Break y continue son ejemplos de st de control de bucleatementos.

romper statementos

Break stateterminación de mentosate un bucle inmediatoately, incluso si la condición no se ha cumplido. 

for (let n = 1; n <= 26; n++) {

  if (n === 13) {

    console.log("Loop stops here. We have reached the break statement");

    break;

  }

  console.log(n);

}

El código renderizado aparecerá como;

Continuar statementos

Continue stateLos comentarios se utilizan para omitir un determinado bloque de código y realizar una iteración para el nuevo bucle. 

for (let n = 0; n <= 10; n++) {

  if (n === 5) {

    continue;

  }

  console.log(n);

}

El código renderizado aparecerá como;

Para Concluir

Arriba están los bucles comunes que encontrará en JavaScript estándar y sus marcos/bibliotecas. Como se destaca, cada tipo de bucle tiene su caso de uso y diferentes comportamientos. Si elige el tipo de bucle incorrecto, es probable que tenga errores y que su código muestre un comportamiento inesperado. 

Si se trata de un Marco de JavaScript o biblioteca, consulte siempre su documentación y utilice los bucles integrados.