Ciclos: for, while y do-while

¿Por qué necesitamos los ciclos?

Imagina que necesitas mostrar los números del 1 al 100 en la consola. Sin ciclos, tendrías que escribir console.log(1), console.log(2), y así sucesivamente hasta 100. Los ciclos nos permiten automatizar esta tarea repetitiva con solo unas pocas líneas de código.

• Repetir acciones sin código duplicado
• Recorrer arrays y objetos
• Automatizar tareas repetitivas
• Procesar datos de manera eficiente

El ciclo for

El ciclo for es el más utilizado cuando conoces de antemano cuántas veces necesitas repetir algo. Su sintaxis tiene tres partes: inicialización, condición y actualización.

for (inicialización; condición; actualización) {

  // código a ejecutar en cada iteración

}

Veamos un ejemplo práctico donde mostramos los números del 1 al 5:

for (let i = 1; i <= 5; i++) {

  console.log("Número: " + i);

}



// Resultado:

// Número: 1

// Número: 2

// Número: 3

// Número: 4

// Número: 5

Desglose del ciclo for

1. inicialización: let i = 1 - Se ejecuta una sola vez al inicio, aquí declaramos e inicializamos el contador.
2. condición: i <= 5 - Se evalúa antes de cada iteración. Si es verdadera, el bucle continúa.
3. actualización: i++ - Se ejecuta al final de cada iteración, incrementando el contador.
4. código: El bloque entre llaves se ejecuta mientras la condición sea verdadera.

Recorrer un array con for

Una de las aplicaciones más comunes del ciclo for es recorrer los elementos de un array:

const frutas = ["manzana", "plátano", "naranja", "uva"];



for (let i = 0; i < frutas.length; i++) {

  console.log("Fruta " + (i + 1) + ": " + frutas[i]);

}



// Resultado:

// Fruta 1: manzana

// Fruta 2: plátano

// Fruta 3: naranja

// Fruta 4: uva

El ciclo while

El ciclo while se usa cuando no sabes exactamente cuántas veces necesitas repetir algo, pero tienes una condición que debe cumplirse para continuar.

while (condición) {

  // código a ejecutar

  // IMPORTANTE: algo debe cambiar para que la condición se vuelva falsa

}

Veamos un ejemplo donde simulamos un juego donde el jugador debe adivinar un número:

const numeroSecreto = 7;

let intento = 0;

let adivinado = false;



while (!adivinado) {

  intento++;

  const miIntento = Math.floor(Math.random() * 10) + 1;

  

  if (miIntento === numeroSecreto) {

    console.log("¡Adivinaste en el intento " + intento + "!");

    adivinado = true;

  } else {

    console.log("Intento " + intento + ": No era " + miIntento);

  }

}



// Posible resultado:

// Intento 1: No era 3

// Intento 2: No era 8

// Intento 3: No era 5

// ¡Adivinaste en el intento 4!

// ❌ ESTO CREARÁ UN BUCLE INFINITO - NO EJECUTAR

while (true) {

  console.log("Esto nunca se detiene");

}



// ✅ FORMA CORRECTA

let contador = 0;

while (contador < 5) {

  console.log(contador);

  contador++; // Esto eventualmente hará que contador < 5 sea falso

}

El ciclo do-while

El do-while es similar al while, pero con una diferencia crucial: el código dentro del bloque se ejecuta al menos una vez antes de verificar la condición.

do {

  // código a ejecutar

  // se ejecuta AL MENOS una vez

} while (condición);



// Nota el punto y coma al final, es obligatorio

Veamos un ejemplo práctico: un menú que siempre se muestra al menos una vez:

let opcion;



do {

  console.log("===== MENÚ PRINCIPAL =====");

  console.log("1. Ver perfil");

  console.log("2. Editar información");

  console.log("3. Salir");

  console.log("=========================");

  

  opcion = 3; // Simulando que el usuario eligió 3

  

  switch(opcion) {

    case 1:

      console.log("Mostrando perfil...");

      break;

    case 2:

      console.log("Editando información...");

      break;

    case 3:

      console.log("¡Hasta luego!");

      break;

    default:

      console.log("Opción no válida");

  }

  

} while (opcion !== 3);



console.log("Menú cerrado correctamente");



// Aunque opcion es 3 desde el inicio, el menú se muestra una vez

Comparando los tres ciclos

Ahora que conoces los tres tipos de ciclos, es importante saber cuándo usar cada uno:

Ejemplo comparativo

// Misma tarea: mostrar números del 1 al 3



// Con for

for (let i = 1; i <= 3; i++) {

  console.log("for: " + i);

}



// Con while

let j = 1;

while (j <= 3) {

  console.log("while: " + j);

  j++;

}



// Con do-while

let k = 1;

do {

  console.log("do-while: " + k);

  k++;

} while (k <= 3);



// Los tres producen el mismo resultado

Ejemplo práctico: Calculadora de factorial

Vamos a crear un programa que calcule el factorial de un número usando un ciclo for. El factorial de 5 es: 5 × 4 × 3 × 2 × 1 = 120.

function calcularFactorial(numero) {

  if (numero < 0) {

    return "El factorial no existe para números negativos";

  }

  

  if (numero === 0 || numero === 1) {

    return 1;

  }

  

  let factorial = 1;

  

  for (let i = 2; i <= numero; i++) {

    factorial = factorial * i;

  }

  

  return factorial;

}



console.log("Factorial de 5: " + calcularFactorial(5)); // 120

console.log("Factorial de 0: " + calcularFactorial(0)); // 1

console.log("Factorial de 7: " + calcularFactorial(7)); // 5040

Controlando los ciclos: break y continue

JavaScript nos ofrece dos palabras clave para controlar el flujo de los ciclos:

• break: Sale del ciclo inmediatamente
• continue: Salta a la siguiente iteración

// Ejemplo de break: buscar un elemento

const numeros = [10, 25, 30, 45, 50, 65, 80];

const objetivo = 45;



for (let i = 0; i < numeros.length; i++) {

  console.log("Buscando en posición " + i + "...");

  

  if (numeros[i] === objetivo) {

    console.log("¡Encontrado! " + objetivo + " está en la posición " + i);

    break; // Salimos del ciclo, no necesitamos seguir buscando

  }

}



console.log("--- Ahora con continue ---\n");



// Ejemplo de continue: mostrar solo números impares

for (let i = 1; i <= 10; i++) {

  if (i % 2 === 0) {

    continue; // Saltamos los números pares

  }

  console.log("Número impar: " + i);

}



// Resultado:

// Buscando en posición 0...

// Buscando en posición 1...

// Buscando en posición 2...

// Buscando en posición 3...

// ¡Encontrado! 45 está en la posición 3



// Número impar: 1

// Número impar: 3

// Número impar: 5

// Número impar: 7

// Número impar: 9

"La diferencia entre un programador principiante y uno avanzado a menudo se ve en cómo manejan los casos límite: un programador avanzado siempre piensa en qué pasa si el array está vacío, si el número es negativo, o si el usuario introduce datos inesperados."

// Generar una tabla de multiplicar 1-3

for (let i = 1; i <= 3; i++) {

  console.log("\nTabla del " + i + ":");

  

  for (let j = 1; j <= 5; j++) {

    console.log(i + " x " + j + " = " + (i * j));

  }

}



// Resultado:

// Tabla del 1:

// 1 x 1 = 1

// 1 x 2 = 2

// 1 x 3 = 3

// 1 x 4 = 4

// 1 x 5 = 5



// Tabla del 2:

// 2 x 1 = 2

// ... y así sucesivamente

Resumen

Los ciclos son herramientas esenciales que te permiten automatizar tareas repetitivas. Aquí tienes las claves finales:

1. Usa for cuando sepas exactamente cuántas veces necesitas repetir algo
2. Usa while cuando no sepas cuántas veces se repetirá, pero tengas una condición clara
3. Usa do-while cuando necesites ejecutar el código al menos una vez
4. Siempre asegúrate de que tus ciclos tengan una forma de terminar
5. Utiliza break y continue para controlarlos mejor

Practica de portfolio

Convierte esta leccion en evidencia real: arma una entrega pequena que puedas mostrar en una entrevista, en LinkedIn o en tu portfolio. Trabaja con un caso propio o con una empresa ficticia, pero deja claro el problema, la decision y el resultado.

• Entregable: una captura, documento, repositorio o tablero con el resultado final.


• Checklist: objetivo, pasos seguidos, criterio de calidad y mejora pendiente.


• Mini-rubrica: si otra persona lo revisa, debe entender que hiciste, por que y como repetirlo.

Aplicación práctica en un caso real

Aplicar Ciclos: for, while y do-while dentro del contexto de JavaScript Esencial: Domina los Cimientos del Lenguaje con criterio práctico, evitando quedarse en una definición aislada. Para que esta lección sea útil, imagina un escenario concreto: tienes que usar este tema para mejorar un proceso, tomar una decisión, crear un entregable o explicar una recomendación a otra persona. La pregunta no es solo “qué significa”, sino “qué haría diferente después de entenderlo”.

Un buen uso empieza por delimitar el problema. Define qué resultado quieres lograr, qué información tienes disponible, qué restricciones existen y cómo sabrás si la decisión fue correcta. Esta forma de pensar evita respuestas genéricas y convierte el aprendizaje en una herramienta de trabajo.

Marco de decisión

Antes de avanzar, revisa tres niveles: primero, el objetivo operativo; segundo, los recursos disponibles; tercero, el riesgo de equivocarte. En JavaScript Esencial: Domina los Cimientos del Lenguaje, muchas decisiones fallan porque se copia una táctica sin entender el contexto. El marco correcto te obliga a adaptar, no solo repetir.

• Objetivo: qué resultado medible o visible quieres conseguir.
• Contexto: quién usará esto, con qué nivel de experiencia y bajo qué restricciones.
• Acción: cuál es el siguiente paso mínimo que puedes ejecutar hoy.
• Señal: qué evidencia vas a observar para decidir si funcionó.

Ejemplo guiado

Supón que debes implementar esta idea en una pequeña empresa o proyecto personal. En vez de intentar una versión perfecta, prepara una versión mínima: una plantilla, una prueba, una lista de control, una automatización simple, una página, un mensaje o una medición inicial. Luego pide feedback o compara el resultado contra una métrica.

Si el resultado mejora, documenta el proceso. Si no mejora, identifica si falló la hipótesis, la ejecución o la medición. Esta distinción es clave: muchas personas abandonan una buena idea por una mala primera ejecución, o escalan una mala idea porque miraron la métrica equivocada.

Errores frecuentes

• Confundir actividad con avance: hacer muchas tareas sin saber qué resultado persiguen.
• Copiar ejemplos sin adaptarlos al cliente, audiencia, equipo o nivel técnico real.
• No dejar evidencia: si no registras decisiones y resultados, no aprendes del proceso.
• Querer automatizar o escalar antes de validar que el enfoque básico funciona.

Ejercicio práctico

1. Escribe el objetivo de esta lección en una frase aplicada a tu caso.
2. Define un entregable pequeño que puedas crear en menos de una hora.
3. Lista tres criterios para evaluar si ese entregable está bien hecho.
4. Ejecuta una versión inicial y anota qué cambiarías en una segunda iteración.

Checklist de salida

• Puedo explicar el concepto con mis propias palabras.
• Tengo un ejemplo aplicado, no solo una definición.
• Sé qué error debo evitar primero.
• Tengo una acción concreta para practicar esta semana.