Saltar al contenidoPedro Farbo
Lección 11 / 1640 min

Bucles y Repeticiones

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, 4

Estructura:

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, 4

continue - 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, 5

Bucles 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

  • for cuando sabes cuántas veces
  • while cuando no sabes cuántas veces
  • for...of para iterar arrays
  • break para salir, continue para saltar
  • ✅ ¡Evita bucles infinitos!

¡En la próxima lección, aprenderemos funciones para organizar código! 🚀

¿Te gustó el contenido? ¡Tu contribución ayuda a mantener todo online y gratuito!

PIX:0737160d-e98f-4a65-8392-5dba70e7ff3e