Tutorial: bucles en JavaScript - repite tareas sin volverte loco

Si alguna vez copiaste y pegaste la misma línea de código diez veces cambiando solo un número, felicidades: acabas de reinventar (mal) el bucle. Hoy vamos a hacerlo bien.

Paso 1: el bucle for

for (let i = 1; i <= 5; i++) {
  console.log(`Repetición número ${i}`);
}

Un for tiene tres partes separadas por punto y coma: dónde empieza (let i = 1), hasta cuándo continúa (i <= 5) y qué cambia en cada vuelta (i++, que suma 1). El resultado: cinco líneas impresas sin escribir console.log cinco veces.

Paso 2: recorre un array con for

const nombres = ['Ana', 'Luis', 'Sofía'];

for (let i = 0; i < nombres.length; i++) {
  console.log(`Hola, ${nombres[i]}!`);
}

nombres.length te da el tamaño del array, así el bucle se detiene exactamente donde debe, sin que tengas que contar a mano (ni arriesgarte a un "undefined" vergonzoso).

Paso 3: el bucle while

let intentos = 0;

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

while repite el bloque mientras la condición sea verdadera. Es perfecto cuando no sabes de antemano cuántas veces se va a repetir (por ejemplo, "hasta que el usuario adivine el número").

Cuidado con esto

// while (true) { console.log('esto nunca para'); }

Si olvidas actualizar la variable que controla la condición, tu bucle nunca termina y tu navegador se congela. A todos nos ha pasado al menos una vez (bueno, técnicamente al menos una vez por semana).

¿Qué acabas de aprender?

• Cómo repetir código con for y con while.
• Cómo recorrer un array usando su .length.
• Por qué un bucle infinito es un problema, no una característica.