Bucles

Aprende a repetir acciones en JavaScript con for, while, do...while, for...of y for...in. Con ejemplos prácticos y cuándo usar cada uno.

Los bucles ejecutan un bloque de código repetidamente hasta que se cumple una condición. Sin ellos, recorrer una lista de 1000 elementos requeriría escribir 1000 líneas.


for clásico

El más controlado: defines inicio, condición de parada e incremento en una línea:

for (inicialización; condición; incremento) {
  // cuerpo del bucle
}
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

Recorrer un array por índice:

const frutas = ['manzana', 'pera', 'naranja'];

for (let i = 0; i < frutas.length; i++) {
  console.log(`${i}: ${frutas[i]}`);
}
// 0: manzana
// 1: pera
// 2: naranja

for…of — para iterar valores

El más limpio para recorrer arrays, strings y otros iterables. Da acceso al valor directamente:

const frutas = ['manzana', 'pera', 'naranja'];

for (const fruta of frutas) {
  console.log(fruta);
}
// manzana
// pera
// naranja

También funciona con strings:

for (const letra of 'hola') {
  console.log(letra); // h, o, l, a
}

En la mayoría de casos, for...of es la opción preferida para arrays. Es más legible que el for clásico cuando no necesitas el índice.


for…in — para iterar propiedades de objetos

Da acceso a las claves de un objeto:

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

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

Evita usar for...in en arrays — está diseñado para objetos. Puede dar resultados inesperados si el array tiene propiedades adicionales.


while — cuando no sabes cuántas veces

El bucle while repite mientras la condición sea verdadera. Úsalo cuando el número de iteraciones depende de algo que no puedes calcular antes de empezar:

while (condición) {
  // cuerpo
}
let intentos = 0;
const maxIntentos = 3;

while (intentos < maxIntentos) {
  console.log(`Intento ${intentos + 1}`);
  intentos++;
}

Cuidado con los bucles infinitos

Si la condición nunca se vuelve falsa, el bucle no termina y bloquea el programa:

// ❌ Bucle infinito — nunca se actualiza 'i'
let i = 0;
while (i < 5) {
  console.log(i);
  // falta: i++
}

do…while — ejecutar al menos una vez

Como while, pero el cuerpo se ejecuta antes de comprobar la condición. Garantiza al menos una iteración:

let numero;

do {
  numero = Math.floor(Math.random() * 10);
  console.log(`Número generado: ${numero}`);
} while (numero !== 5);

console.log('¡Salió el 5!');

break y continue

break — salir del bucle

const numeros = [1, 3, 7, 4, 9, 2];

for (const num of numeros) {
  if (num % 2 === 0) {
    console.log(`Primer par encontrado: ${num}`);
    break; // sale del bucle inmediatamente
  }
}
// → 'Primer par encontrado: 4'

continue — saltar esta iteración

for (let i = 0; i < 6; i++) {
  if (i % 2 === 0) continue; // salta los pares
  console.log(i); // 1, 3, 5
}

¿Qué bucle usar?

SituaciónBucle
Recorrer un arrayfor...of
Recorrer propiedades de un objetofor...in
Necesito el índicefor clásico
Repetir mientras se cumpla algowhile
Ejecutar al menos una vezdo...while

En la práctica, for...of cubre el 80% de los casos. Los métodos de array como forEach, map y filter (que veremos en la lección de Arrays) cubren casi todo el resto.

En la siguiente lección aprendemos las funciones: el bloque fundamental para organizar y reutilizar código.