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 que se utiliza para realizar tareas repetidas en función de una determinada condición. Por otro lado, 'iterar' es un término genérico que significa repetir en el contexto del bucle. Un ciclo continuará iterando 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 suelen utilizar bucles?

Realiza tareas repetitivas: Puede usar bucles para ejecutar instrucciones hasta que se cumplan ciertas condiciones.
Iterar sobre objetos o matrices: Con los bucles, puede iterar sobre las propiedades de un objeto o elementos de una matriz, lo que le permite 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. Explorémoslos en detalle y demostremos cómo funciona cada uno.

`For` loop

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

for (initialization; condition; finalExpression) {

  // code

}

La initialization expresión viene antes de que se ejecute el primer bucle. Esta expresión normalmente inicializa uno o más contadores.
A condition expresión se comprueba cada vez antes de la for carreras de bucle. El código en el ciclo o declaración se ejecuta cada vez que la expresión se evalúa como verdadera. Por otro lado, el bucle se detiene cuando la expresión se evalúa como falsa. Sin embargo, si se omite la expresión, la expresión se evaluará como verdadera automáticamente.
La finalExpression se ejecuta después de cada iteración del bucle. La expresión se usa principalmente para incrementar un contador.

Puede usar {}, sentencia de bloque, para agrupar y ejecutar varias sentencias. Si desea salir del ciclo antes de que la expresión de la condición se evalúe como falsa, use la instrucción break.

Ejemplos de `for` bucles con código

Utilice la herramienta 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 cero (sea i=0).
La condición es i debería ser menor que 7 (i=7).
El ciclo repetirá repetidamente 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).

Utilice la herramienta break instrucción para salir del bucle antes de que la condición se evalúe como falsa;

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

  if (i === 9) {

    break;

  }

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

}

El bloque de código itera 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).

La sentencia if evalúa si el valor de i=9. Si la condición es verdadera, el break se ejecuta la instrucción y el ciclo termina.

(Imagen)

`For…of` loop

La for…of el bucle itera sobre objetos iterables como Map, Array, Arguments y Set. Este ciclo invoca un gancho de iteración personalizado con declaraciones que se ejecutan para 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

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 itera 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.

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 itera sobre el objeto de elementos.
El bucle asigna el elemento actual a n antes de ejecutar console.log(n) .

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 para crear un nuevo objeto Map.
Una variable m se declara.
Usar .set() método, sumamos cinco pares clave-valor.
A for…of el bucle itera sobre los elementos del objeto Map m.

`For…in` loop

A for…in loop se utiliza para iterar 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 iterar 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 iterar 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.

While

La while bucle evalúa un 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 de la declaración en el ciclo. Puede ejecutar múltiples instrucciones usando {} o bloquear instrucciones.

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 valor cero (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` Loop

A do…while el ciclo itera hasta que una condición específica se evalúa como false.

La estructura general de un do…while declaración es;

do

  statement

while (condition);

La declaración se ejecuta una vez, pero antes de verificar la condición. La instrucción se ejecutará si el condition is true. Sin embargo, si el evaluado condition is false, la ejecución se detendrá y el control pasará a la sentencia después de la do..while. Código en un do…while Se garantiza que el bucle se ejecutará al menos una vez, incluso si la condición se evalúa como 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.

Nested Loop

Un bucle anidado es una situación en la que tenemos un bucle dentro de otro 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 cero.
Ambas variables se incrementan en 2 después de cada iteración
La outer y inner los bucles iteran tres veces cada uno.

Loop control statements

Loop control Las declaraciones, a veces conocidas como "sentencias de salto", interrumpen el flujo normal de un programa. Break y continue son ejemplos de sentencias de control de bucle.

romper declaraciones

Break Las declaraciones terminan un ciclo inmediatamente, 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 declaraciones

Continue Las declaraciones se utilizan para omitir un determinado bloque de código y llevar a cabo la iteración del nuevo ciclo.

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

  if (n === 5) {

    continue;

  }

  console.log(n);

}

El código renderizado aparecerá como;

Conclusión

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.