Tema 8 · Control de Flujo

Bucles: for, while y do...while

Aprende a ejecutar instrucciones repetitivas de forma eficiente con for, while, do...while, for...of y a controlar el flujo con break y continue.

Estructura Switch y Casos Múltiples Funciones y Funciones Flecha (Arrow)

¿Por qué usamos Bucles en Programación?

Los bucles (o ciclos) permiten ejecutar un bloque de código múltiples veces de forma automática mientras se cumpla una condición determinada, ahorrando cientos de líneas de código repetitivo.

Estructuras de Bucle en JavaScript

Bucle Sintaxis Momento de Evaluación
for for (let i = 0; i < 5; i++) { ... } Evalúa la condición antes de cada iteración; ideal cuando conoces de antemano el número exacto de vueltas.
while while (condicion) { ... } Evalúa la condición antes de entrar; si es falsa desde el principio, el bucle nunca se ejecuta.
do...while do { ... } while (condicion); Garantiza que el bloque se ejecute al menos una vez, ya que la condición se evalúa al final de la vuelta.
for...of for (const item of array) { ... } Sintaxis moderna de ES6 para recorrer directamente los elementos de una colección o array.

Control con break y continue

  • break: Rompe el bucle de inmediato y salta al código que esté fuera del ciclo.
  • continue: Interrumpe únicamente la vuelta actual y salta de inmediato a la siguiente iteración.

⚡ Generador de Filas y Tablas de Multiplicar

Observa cómo un bucle for genera dinámicamente una tabla de multiplicar completa en microsegundos:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Bucles en JavaScript</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-loop { max-width: 480px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    input[type="number"] { width: 100%; box-sizing: border-box; padding: 8px 10px; margin: 8px 0 14px 0; border: 1px solid #cbd5e1; border-radius: 6px; }
    .lista-resultados { background: #f1f5f9; border-radius: 6px; padding: 12px 20px; font-family: monospace; font-size: 0.95rem; }
  </style>
</head>
<body>

  <div class="card-loop">
    <h3 style="margin-top: 0; color: #0f172a;">Generador con Bucle for</h3>

    <label for="numero-tabla">Número base:</label>
    <input type="number" id="numero-tabla" min="1" max="20" value="7">

    <button onclick="generarTabla()" style="background: #0284c7; color: white; border: none; padding: 9px 16px; border-radius: 6px; cursor: pointer; font-weight: bold; width: 100%;">
      Calcular con Bucle &raquo;
    </button>

    <div style="margin-top: 15px;">
      <strong>Resultado del ciclo:</strong>
      <div id="salida-bucle" class="lista-resultados"></div>
    </div>

    <script>
      function generarTabla() {
        const base = Number(document.getElementById('numero-tabla').value);
        let lineasHtml = "";

        // Bucle for tradicional de 1 a 10
        for (let i = 1; i <= 10; i++) {
          const resultado = base * i;
          lineasHtml += `${base} &times; ${i} = <strong>${resultado}</strong><br>`;
        }

        document.getElementById('salida-bucle').innerHTML = lineasHtml;
      }

      generarTabla();
    </script>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de JavaScript ES6+ y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno Full-Stack Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.