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:
- Toma el plástico
- Lo moldea
- 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 seatrue
.do...while
: Se ejecuta al menos una vez, luego se repite mientras una condición siga siendotrue
.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");
Revisando pieza #1Revisando pieza #2Pieza aprobada
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ánwhile (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);
Ejecutando prueba #1❌ Prueba fallidaEjecutando 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 variablecondicion
: Se evalúa antes de ejecutar las instruccionesactualizacion
: 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`);
Empacando producto #1 en la cajaEmpacando producto #2 en la cajaEmpacando producto #3 en la cajaEmpacando producto #4 en la cajaEmpacando producto #5 en la caja✅ Caja completa con 5 productos
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 en0
. - Realiza una evaluación para saber si
i
es menor que5
- Ejecuta las instrucciones en caso de que sea
true
. - Incrementa en
1
(i++
) después de cada ejecución
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 correctafor (____; ____; ____) { 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 100while (____) { // 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.