Bucles y Repeticiones
¡Repetir código manualmente es tedioso. Los bucles lo hacen automáticamente!
¿Por Qué Usar Bucles?
Sin bucle:
javascript
console.log("Item 1");console.log("Item 2");console.log("Item 3");// ... ¿y si fueran 1000?Con bucle:
javascript
for (let i = 1; i <= 1000; i++) { console.log(`Item ${i}`);}for - Cuando Sabes Cuántas Veces
javascript
for (let i = 0; i < 5; i++) { console.log(i);}// Salida: 0, 1, 2, 3, 4Estructura:
javascript
for (inicialización; condición; incremento) { // código repetido}- Inicialización:
let i = 0- valor inicial - Condición:
i < 5- continúa mientras sea true - Incremento:
i++- cambia i después de cada iteración
Ejemplos Comunes
javascript
// Contar hasta 10for (let i = 1; i <= 10; i++) { console.log(i);} // Contar hacia atrásfor (let i = 10; i >= 1; i--) { console.log(i);} // Saltar de 2 en 2for (let i = 0; i <= 10; i += 2) { console.log(i); // 0, 2, 4, 6, 8, 10}while - Mientras Algo Sea Verdadero
javascript
let contador = 0; while (contador < 5) { console.log(contador); contador++;}Usa while cuando no sabes exactamente cuántas veces:
javascript
let contraseña = ""; while (contraseña !== "secreto") { contraseña = prompt("Ingresa la contraseña:");} alert("¡Contraseña correcta!");do...while - Ejecuta Al Menos Una Vez
javascript
let numero; do { numero = Number(prompt("Ingresa un número mayor que 10:"));} while (numero <= 10); console.log(`Ingresaste ${numero}`);Diferencia: do...while siempre ejecuta una vez, después verifica.
Iterando Sobre Arrays
for clásico
javascript
const frutas = ["manzana", "banana", "naranja"]; for (let i = 0; i < frutas.length; i++) { console.log(frutas[i]);}for...of (moderno) ✅ Recomendado
javascript
const frutas = ["manzana", "banana", "naranja"]; for (const fruta of frutas) { console.log(fruta);}forEach (método)
javascript
const frutas = ["manzana", "banana", "naranja"]; frutas.forEach(function(fruta) { console.log(fruta);}); // Con arrow functionfrutas.forEach(fruta => console.log(fruta));break y continue
break - Sale del bucle
javascript
for (let i = 1; i <= 10; i++) { if (i === 5) { break; // sale cuando i es 5 } console.log(i);}// Salida: 1, 2, 3, 4continue - Salta a la siguiente iteración
javascript
for (let i = 1; i <= 5; i++) { if (i === 3) { continue; // salta el 3 } console.log(i);}// Salida: 1, 2, 4, 5Bucles Anidados
javascript
// Tabla de multiplicarfor (let i = 1; i <= 5; i++) { for (let j = 1; j <= 5; j++) { console.log(`${i} x ${j} = ${i * j}`); } console.log("---");}Ejercicio Práctico: Juego de Adivinar
javascript
const secreto = Math.floor(Math.random() * 100) + 1;let intentos = 0;let intento; while (intento !== secreto) { intento = Number(prompt("Adivina un número (1-100):")); intentos++; if (intento < secreto) { alert("¡Más alto!"); } else if (intento > secreto) { alert("¡Más bajo!"); }} alert(`¡Felicitaciones! Lo adivinaste en ${intentos} intentos!`);Resumen
- ✅
forcuando sabes cuántas veces - ✅
whilecuando no sabes cuántas veces - ✅
for...ofpara iterar arrays - ✅
breakpara salir,continuepara saltar - ✅ ¡Evita bucles infinitos!
¡En la próxima lección, aprenderemos funciones para organizar código! 🚀