Ciclos

javascript ciclos

Los ciclos nos permiten repetir una acción varias veces sin tener que escribir el mismo código.

Son herramientas fundamentales que nos ayudan a automatizar tareas repetitivas de forma eficiente.

Analogía

Imagina una máquina en una fábrica de botellas. La máquina realiza el mismo proceso una y otra vez:

  1. Toma el plástico
  2. Lo moldea
  3. Lo enfría

La máquina repite estos pasos miles de veces sin detenerse, produciendo botellas idénticas de manera eficiente.

Los ciclos en programación funcionan igual: ejecutan el mismo conjunto de instrucciones múltiples veces.

En JavaScript existen tres formas básicas de usarlos:

  • while: Se repite mientras una condición sea true.
  • do...while: Se ejecuta al menos una vez, luego se repite mientras una condición siga siendo true.
  • for: Se usa cuando sabemos cuántas veces queremos repetir algo.

🔄 Ciclos while: Repetición condicional

🔬 Anatomía

La anatomía de un ciclo while es la siguiente:

while (condicion) {
// Instrucciones a repetir mientras
// la condición sea verdadera
}
  • condición: Es una expresión que se evalúa a verdadero o falso
  • {}: Contiene el código que se repetirá

Podríamos leerlo como: Mientras condición sea verdadera, haz {instrucciones}.

🔍 Control de calidad

Analogía

Piensa en una máquina de control de calidad que inspecciona productos.

Mientras encuentre defectos en las piezas, seguirá rechazándolas y revisando la siguiente.

Solo cuando una pieza pasa el control, la máquina detiene su ciclo de inspección.

let piezaDefectuosa = true;
let intentos = 0;
while (piezaDefectuosa && intentos < 3) {
console.log(`Revisando pieza #${intentos + 1}`);
piezaDefectuosa = Math.random() < 0.5; // 50% de probabilidad de defecto
intentos++;
}
console.log(piezaDefectuosa ? "Lote rechazado" : "Pieza aprobada");

Terminal window
Revisando pieza #1
Revisando pieza #2
Pieza aprobada
INFO

Math.random() es una función que nos ayuda a generar un número aleatorio entre el 0 y el 1.

Viene por defecto en JavaScript, como console.log() y otras utilidades.

✅ Ciclos do...while: Ejecución garantizada

🔬 Anatomía

La anatomía de un ciclo do...while es la siguiente:

do {
// Instrucciones que se ejecutan al menos una vez
// y se repiten si la condición es verdadera
} while (condicion);
  • do: Hace referencia a que la acción se ejecuta al menos una vez
  • {}: Contiene las instrucciones que se ejecutarán
  • while (condicion): Define si el ciclo continúa

Podríamos leerlo como: Haz {instrucciones} y mientras condición se cumpla.

🧪 Pruebas de producto

Analogía

Imagina una máquina de pruebas que siempre realiza al menos una verificación completa del producto.

Solo después de completar la primera prueba, decide si debe continuar con más ciclos de prueba.

let pruebaPasada;
let intentos = 0;
do {
console.log(`Ejecutando prueba #${++intentos}`);
pruebaPasada = Math.random() >= 0.3; // 70% de probabilidad de éxito
console.log(pruebaPasada ? "✅ Prueba exitosa" : "❌ Prueba fallida");
} while (!pruebaPasada && intentos < 3);

Terminal window
Ejecutando prueba #1
❌ Prueba fallida
Ejecutando prueba #2
✅ Prueba exitosa

Diferencia clave con while:
El do...while se ejecuta al menos una vez, incluso si la condición ya es false en la primera iteración.

🔢 Ciclos for: Iteración controlada

🔬 Anatomía

La anatomía de un ciclo for es la siguiente:

for (inicializacion; condicion; actualizacion) {
// Instrucciones a repetir mientras
// la condición sea verdadera
}
  • inicializacion: Crea el estado inicial de una variable
  • condicion: Se evalúa antes de ejecutar las instrucciones
  • actualizacion: Cambia el estado de la variable al completar las instrucciones
  • {}: Contiene el código que se repetirá

Podríamos leerlo como: Para inicializacion, mientras condicion sea verdadera, haz {instrucciones} y luego actualizacion.

📦 Empacado automático

Analogía

Como una máquina empacadora programada para colocar exactamente 5 productos en cada caja.

La máquina tiene un contador interno que sabe exactamente cuántas veces debe repetir la operación antes de pasar a la siguiente caja.

const PRODUCTOS_POR_CAJA = 5;
let productosEmpacados = 0;
for (let i = 0; i < PRODUCTOS_POR_CAJA; i++) {
console.log(`Empacando producto #${i + 1} en la caja`);
productosEmpacados++;
}
console.log(`✅ Caja completa con ${productosEmpacados} productos`);

Terminal window
Empacando producto #1 en la caja
Empacando producto #2 en la caja
Empacando producto #3 en la caja
Empacando producto #4 en la caja
Empacando producto #5 en la caja
✅ Caja completa con 5 productos
INFO

Cuando utilizamos for, la variable i es una variable auxiliar que se crea solo para el ciclo.

En este ejemplo:

  • El ciclo crea una variable auxiliar llamada i que comienza en 0.
  • Realiza una evaluación para saber si i es menor que 5
  • Ejecuta las instrucciones en caso de que sea true.
  • Incrementa en 1 (i++) después de cada ejecución
INFO

Cuando usamos ciclos, le llamamos iteración a cada repetición o vuelta que da el ciclo. Por ejemplo, si un ciclo se ejecuta 5 veces, decimos que realizó 5 iteraciones.


📝 Resumen
Tipo de ciclo ¿Cuándo usarlo? ¿Se ejecuta al menos una vez?
while Para repetir algo hasta que se cumpla una condición. ❌ No necesariamente
do...while Para garantizar que algo se ejecute al menos una vez antes de verificar una condición. ✅ Sí, siempre una vez
for Para repetir algo un número específico de veces. ❌ No necesariamente


☝️🤓
🏋️‍♂️ Ejercicio

Usa un ciclo for para imprimir números del 10 al 100 en incrementos de 10.

// Rellena los espacios con la información correcta
for (____; ____; ____) {
console.log(i);
}

🏋️‍♂️ Ejercicio

Crea un ciclo while que pida números al usuario hasta que ingrese un número mayor a 100.

let numero = ____; // Inicializa con prompt() para pedir un valor
// Condición: mientras el número sea menor o igual a 100
while (____) {
// Por ejemplo: numero <= 100
// Pide un nuevo número al usuario
numero = ____; // Sobreescribe con prompt()
}
alert("¡Número válido!");

🏋️‍♂️ Ejercicio

Crea un ciclo do...while para un juego de adivinanzas que siempre dé al menos un intento al usuario.

let respuesta;
do {
respuesta = prompt(___); // "Tu adivinanza va aquí"
} while (respuesta !== ___); // La respuesta a la adivinanza va aquí
alert("¡Correcto! La respuesta es ___."); // La respuesta correcta va aquí también

🚀 Extra

Investiga sobre aplicaciones prácticas de los ciclos en el mundo real:

  • Encuentra tres ejemplos de tareas cotidianas que podrías automatizar usando ciclos en JavaScript.

    Pista: Piensa en tareas simples como contar números, sumar valores o mostrar mensajes repetitivos.

  • ¿Cómo se utilizan los ciclos para crear animaciones en páginas web?

    Pista: Busca información sobre cómo las animaciones utilizan ciclos para actualizar la pantalla muchas veces por segundo.

  • ¿De qué manera los videojuegos utilizan ciclos para funcionar?

    Pista: Investiga sobre el “game loop” (ciclo de juego) y cómo permite que los juegos se actualicen constantemente.

Comentarios