Bucles en JavaScript: for, while y for...of explicados con ejemplos

En el artículo de arrays ya viste de pasada cómo recorrer una lista con for, for...of y forEach. Pero los bucles van mucho más allá de los arrays: son la herramienta que usa JavaScript para repetir una acción sin que tengas que copiar y pegar la misma línea diez, cien o mil veces. En este artículo nos detenemos en los bucles en sí — qué tipos existen, cómo funciona cada uno por dentro y cuándo conviene usar uno u otro — para que la próxima vez que necesites repetir algo, elijas la herramienta correcta a la primera.

Si ya sabes guardar datos en variables, hacer que tu código tome decisiones con condicionales y organizar código en funciones, esto es el siguiente paso natural: repetir ese código las veces que haga falta, sin repetirlo tú a mano.

Qué es un bucle y por qué lo necesitas

Un bucle es una instrucción que repite un bloque de código mientras se cumpla una condición, o una vez por cada elemento de una colección. En vez de escribir console.log() cinco veces para mostrar cinco mensajes, usas un bucle y le dices a JavaScript "repite esto cinco veces" (o "repite esto mientras se cumpla tal cosa").

JavaScript tiene varias formas de escribir un bucle: for, while, do...while, for...of y for...in. No son cinco herramientas a elegir al azar — cada una está pensada para una situación concreta, y en este artículo vas a ver cuál usar en cada caso.

El bucle for: la estructura básica

El bucle for es el más usado cuando sabes (o puedes calcular) cuántas veces quieres repetir algo. Su sintaxis tiene tres partes separadas por punto y coma:

for (let i = 0; i < 5; i++) {
console.log(i);
}
// 0, 1, 2, 3, 4

Las tres partes se ejecutan en este orden:

1. Inicialización (let i = 0): se ejecuta una sola vez, antes de empezar.
2. Condición (i < 5): se comprueba antes de cada vuelta. Si es true, el bucle sigue; si es false, se detiene.
3. Actualización (i++): se ejecuta al final de cada vuelta, normalmente para acercar la condición a false.

Es el bucle que ya viste de pasada en el artículo de arrays para recorrerlos por índice:

const colores = ["rojo", "verde", "azul"];

for (let i = 0; i < colores.length; i++) {
console.log(colores[i]);
}

while: repetir mientras se cumpla una condición

El bucle while es más simple que for: solo tiene una condición, y repite el bloque mientras esa condición sea true. Lo normal es usarlo cuando no sabes de antemano cuántas vueltas vas a necesitar.

let intentos = 0;

while (intentos < 3) {
console.log("Intento número " + (intentos + 1));
intentos++;
}

Fíjate en que aquí tú eres responsable de actualizar intentos dentro del bloque. Si se te olvida, la condición nunca pasa a false y el bucle no termina nunca — esto se llama bucle infinito, y es uno de los errores más comunes al empezar (lo vemos con detalle más abajo).

do...while: cuando necesitas ejecutarlo al menos una vez

do...while es casi idéntico a while, con una diferencia clave: la condición se comprueba después de ejecutar el bloque, no antes. Esto garantiza que el código dentro se ejecute al menos una vez, aunque la condición sea false desde el principio.

let numero;

do {
numero = Math.floor(Math.random() * 10);
console.log("Número generado: " + numero);
} while (numero !== 7);

En la práctica vas a usar while mucho más que do...while — este último aparece sobre todo cuando necesitas ejecutar algo una primera vez sí o sí antes de poder evaluar si debe repetirse.

for...of: la forma moderna de recorrer iterables

for...of recorre directamente los valores de cualquier iterable — un array, un string, un Map, un Set — sin que tengas que gestionar un índice a mano:

const colores = ["rojo", "verde", "azul"];

for (const color of colores) {
console.log(color);
}
// rojo, verde, azul

También funciona con strings, recorriendo carácter a carácter:

for (const letra of "Hola") {
console.log(letra);
}
// H, o, l, a

Para arrays, for...of suele ser más legible que for con índice. Es, junto con forEach (que ya viste en el artículo de arrays), la forma más habitual de recorrer una lista en código moderno.

for...in: para las propiedades de un objeto (no para arrays)

for...in recorre las propiedades de un objeto, no sus valores:

const persona = { nombre: "Ana", edad: 28, ciudad: "Madrid" };

for (const clave in persona) {
console.log(clave + ": " + persona[clave]);
}
// nombre: Ana
// edad: 28
// ciudad: Madrid

Es tentador usarlo también para recorrer arrays, porque "parece" que funciona. El problema es que recorre todas las propiedades del array, incluidas las que tú mismo hayas añadido a mano, no solo sus índices numéricos. La documentación oficial de MDN lo dice sin rodeos: es mejor usar un bucle for tradicional (o for...of) con arrays, porque for...in itera sobre las propiedades definidas por el usuario además de los elementos del array. Resumiendo: for...in para objetos, for...of (o forEach) para arrays.

¿Qué bucle usar en cada caso?

Bucle	Cuándo usarlo
for	Sabes (o puedes calcular) cuántas vueltas necesitas, o usas un índice
while	No sabes de antemano cuántas vueltas vas a necesitar
do...while	Necesitas ejecutar el bloque al menos una vez antes de comprobar la condición
for...of	Quieres recorrer los valores de un array, string u otro iterable
for...in	Quieres recorrer las propiedades de un objeto (no de un array)

break y continue: controlar el flujo del bucle

Dentro de cualquier bucle puedes usar dos instrucciones para cambiar su comportamiento normal:

• break termina el bucle inmediatamente, aunque la condición siga siendo true.
• continue salta el resto del bloque actual y pasa directamente a la siguiente vuelta.

const numeros = [4, 9, 15, 23, 8];

for (const numero of numeros) {
if (numero > 20) {
break; // para el bucle en cuanto encuentra uno mayor que 20
}
if (numero % 2 !== 0) {
continue; // se salta los impares
}
console.log(numero); // solo imprime pares menores o iguales a 20
}
// 4, 8

Son especialmente útiles cuando buscas algo dentro de una lista y, en cuanto lo encuentras, no tiene sentido seguir comprobando el resto.

Juntando todo en un ejemplo pequeño

const notas = [4, 7, 9, 3, 6, 8];
let suma = 0;
let aprobados = 0;

for (const nota of notas) {
if (nota < 5) {
continue;
}
suma += nota;
aprobados++;
}

console.log("Aprobados: " + aprobados);
console.log("Media de los aprobados: " + (suma / aprobados).toFixed(2));

Prueba a pegar este ejemplo en la consola del navegador (F12 → Console) y cambia los valores del array. Intenta modificarlo para que también calcule la nota más alta, antes de seguir leyendo.

Errores típicos al empezar

• Crear un bucle infinito. Si usas while o do...while, comprueba que algo dentro del bloque cambie la variable de la condición. Si la pestaña se queda congelada, probablemente tienes un bucle infinito.
• Off-by-one: empezar o terminar un índice mal. for (let i = 0; i <= array.length; i++) se pasa un elemento de más y da undefined en la última vuelta; con índices que empiezan en 0, la condición correcta es i < length, no i <= length.
• Usar for...in para recorrer arrays. Como has visto, puede darte sorpresas. Usa for...of o forEach.
• Olvidar que continue no detiene el bucle, solo salta esa vuelta. Si lo que quieres es parar del todo, la instrucción que necesitas es break.
• Modificar el array que estás recorriendo con for...of mientras lo recorres. Añadir o quitar elementos en mitad de la vuelta puede dar resultados inesperados; si necesitas hacerlo, es más seguro crear un array nuevo con map o filter (los vimos en el artículo de arrays)..

En resumen

• for es el bucle más habitual cuando sabes cuántas veces quieres repetir algo (o tienes un índice).
• while repite mientras se cumpla una condición; úsalo cuando no sabes de antemano cuántas vueltas vas a necesitar.
• do...while es como while, pero garantiza que el bloque se ejecute al menos una vez.
• for...of recorre los valores de un iterable (arrays, strings...) sin que tengas que gestionar un índice.
• for...in recorre las propiedades de un objeto; evítalo con arrays.
• break termina el bucle; continue salta solo la vuelta actual.

Con esto ya tienes las piezas básicas para repetir código sin copiarlo y pegarlo a mano, y para elegir el bucle correcto según la situación en vez de usar siempre el primero que se te ocurra.

El siguiente paso natural desde aquí son los objetos, la otra gran forma de agrupar datos en JavaScript — y vas a recorrerlos precisamente con estos mismos bucles.

Mientras tanto, si vas a apoyarte en un asistente de IA mientras practicas esto, te interesa cómo usarla sin dejar de aprender de verdad.