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 lafor
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 aiterate
;
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 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
itera 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
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 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 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
yinner
y ambos se inicializan con el valor cero. - Ambas variables se incrementan en 2 después de cada iteración
- La
outer
yinner
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.