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 lafor
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
- Uso
for
bucle aiterate
;
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).

- 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
For…of
bucle iterando sobre unarray
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 enfrontendLanguages
. - 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 unSet
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 unnew 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)
.

For…of
bucle iterando sobre unMap
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
yinner
y ambos se inicializan con el valor zero. - Ambas variables se incrementan en 2 después de cada iteración
- La
outer
yinner
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.