Bucles en JavaScript

for clásico

El for clásico es el más flexible. Tiene tres partes: inicialización, condición y actualización. Se usa cuando necesitás el índice o control preciso sobre las iteraciones.

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

// Recorrer un array con índice
const frutas = ["manzana", "naranja", "uva"];
for (let i = 0; i < frutas.length; i++) {
    document.getElementById("lista").innerHTML +=
        `
${i + 1}. ${frutas[i]}
`;
}

// Contar hacia atrás
for (let i = 10; i >= 0; i--) {
    console.log(i);  // 10 9 8 7 ... 0
}

// Saltar de a dos
for (let i = 0; i <= 10; i += 2) {
    console.log(i);  // 0 2 4 6 8 10
}

for...of — recorrer arrays y strings

La forma más limpia de iterar sobre arrays, strings u otros objetos iterables. No necesitás el índice ni preocuparte por length.

const frutas = ["manzana", "naranja", "uva"];

// Iterar directamente
for (const fruta of frutas) {
    console.log(fruta);
}

// Con índice usando entries()
for (const [i, fruta] of frutas.entries()) {
    console.log(`${i + 1}. ${fruta}`);
}

// Recorrer un string carácter por carácter
for (const letra of "JavaScript") {
    console.log(letra);  // J a v a S c r i p t
}

while — repetir mientras se cumpla una condición

El while repite el bloque mientras la condición sea verdadera. Lo usás cuando no sabés de antemano cuántas veces va a repetirse.

let contador = 0;

while (contador < 5) {
    console.log("Contador: " + contador);
    contador++;  // IMPORTANTE: actualizar para no crear un bucle infinito
}

// Caso típico: reintentar hasta tener éxito
let intentos  = 0;
let conectado = false;

while (!conectado && intentos < 3) {
    intentos++;
    console.log(`Intento ${intentos}...`);
    conectado = intentos === 3;  // simulamos que al 3er intento funciona
}

console.log(conectado ? "Conectado" : "Falló la conexión");

do...while

Similar al while, pero el bloque se ejecuta al menos una vez antes de evaluar la condición.

let n = 0;

do {
    console.log("Ejecutando: " + n);
    n++;
} while (n < 3);
// Ejecutando: 0
// Ejecutando: 1
// Ejecutando: 2

// Útil para validar entrada — siempre pedís al menos una vez
let respuesta;
let intentos = 0;

do {
    intentos++;
    // En el navegador esto sería un prompt(), acá simulamos
    respuesta = intentos === 2 ? "sí" : "no válido";
    console.log(`Intento ${intentos}: "${respuesta}"`);
} while (respuesta !== "sí" && intentos < 5);

break y continue

// break — sale del bucle completamente
const numeros = [1, 3, 7, 2, 9, 4, 6];

for (const n of numeros) {
    if (n % 2 === 0) {
        console.log("Primer par encontrado: " + n);
        break;  // sale en cuanto encuentra el primero
    }
}

// continue — salta a la siguiente iteración
for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) continue;  // se saltan los pares
    console.log(i);  // 1 3 5 7 9
}

// break en while
let i = 0;
while (true) {          // condición siempre true
    if (i >= 5) break;  // el break es la única salida
    console.log(i);
    i++;
}

for...in — recorrer objetos

for...in itera sobre las claves de un objeto. No se usa para arrays — para eso está for...of.

const persona = {
    nombre: "Ana",
    edad:   28,
    ciudad: "Córdoba",
    activa: true,
};

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

// Obtener claves y valores como arrays
const claves  = Object.keys(persona);    // ["nombre", "edad", "ciudad", "activa"]
const valores = Object.values(persona);  // ["Ana", 28, "Córdoba", true]
const pares   = Object.entries(persona); // [["nombre","Ana"], ["edad",28], ...]

for (const [clave, valor] of Object.entries(persona)) {
    console.log(`${clave} → ${valor}`);
}

Cuándo usar cada uno

Ejemplo Completo — Análisis de ventas

Sistema que procesa un array de ventas usando distintos tipos de bucles:

const ventas = [
    { producto: "Laptop",   cantidad: 3,  precio: 1200 },
    { producto: "Mouse",    cantidad: 15, precio: 25   },
    { producto: "Teclado",  cantidad: 8,  precio: 75   },
    { producto: "Monitor",  cantidad: 5,  precio: 450  },
    { producto: "Auricular",cantidad: 12, precio: 60   },
];

// Calcular subtotales con for...of
let totalGeneral = 0;
for (const v of ventas) {
    const subtotal  = v.cantidad * v.precio;
    totalGeneral   += subtotal;
}

// Encontrar el más vendido con for clásico
let maxIdx = 0;
for (let i = 1; i < ventas.length; i++) {
    if (ventas[i].cantidad > ventas[maxIdx].cantidad) {
        maxIdx = i;
    }
}
const masVendido = ventas[maxIdx];

// Buscar el primero que supere $1000 de subtotal con break
let primerGrande = null;
for (const v of ventas) {
    if (v.cantidad * v.precio > 1000) {
        primerGrande = v;
        break;
    }
}

// Mostrar resultados
document.getElementById("total").innerHTML     = `$${totalGeneral}`;
document.getElementById("masVendido").innerHTML = masVendido.producto;
document.getElementById("primero").innerHTML    = primerGrande?.producto ?? "Ninguno";

Buenas Prácticas

• for...of para arrays — más limpio que el for clásico cuando no necesitás el índice
• for...in solo para objetos — nunca para arrays
• forEach cuando no necesitás salir antes — no soporta break; si necesitás romper el bucle, usá for...of
• Evitá modificar el array mientras lo iterás — puede causar comportamiento impredecible
• Siempre actualizá la variable en while — sin eso el bucle no termina nunca
• Preferí map/filter/reduce para transformar — son más declarativos y evitan efectos secundarios