Bucles

⏱ 40 minutos
📶 Nivel: principiante
🧩 Incluye ejercicio

💡 🎯 Al terminar esta lección podrás…

Repetir tareas con for, while y do…while.
Recorrer arrays y textos con for…of.
Controlar el flujo con break y continue.
Aplicar los patrones de acumular, contar, buscar y construir.

1.Por qué repetir

Muchas tareas consisten en hacer lo mismo varias veces: mostrar los números del 1 al 100, recorrer una lista de productos, sumar todos los precios, buscar un nombre. Escribir cada repetición a mano sería largo, aburrido y propenso a errores. Los bucles le piden a la computadora que repita un bloque de código mientras se cumpla una condición.

Bucle	Úsalo cuando…
`for`	Sabes cuántas veces repetir
`while`	Repites mientras una condición sea verdadera
`do…while`	Quieres ejecutar al menos una vez
`for…of`	Recorres los elementos de un array o texto
`for…in`	Recorres las claves de un objeto
`forEach`, `map`…	Recorres arrays con funciones (lección 6)

2.El bucle for

Anatomía de un for

for (let i = 0; i < 5; i++) {
  console.log("Vuelta", i);
}
//   ① inicio     ② condición   ③ avance

for (

let i = 0① inicio

;

i < 5② condición

;

i++③ avance

) { … }④ cuerpo

Inicio: se ejecuta una sola vez al principio (let i = 0).
Condición: se evalúa antes de cada vuelta; si es falsa, el bucle termina.
Cuerpo: el código entre llaves se ejecuta.
Avance: se ejecuta al final de cada vuelta (i++). Luego se vuelve a la condición.

▶ Cuenta y suma

Código (edítalo y pulsa Ejecutar)

<script>
  // contar del 1 al 5
  for (let i = 1; i <= 5; i++) {
    console.log("Número", i);
  }

  // sumar los números del 1 al 100
  let suma = 0;
  for (let n = 1; n <= 100; n++) {
    suma += n;
  }
  console.log("La suma del 1 al 100 es", suma);

  // cuenta regresiva
  for (let i = 3; i >= 1; i--) {
    console.log(i + "...");
  }
  console.log("¡Despegue!");
</script>

Página (resultado)

Consola

💡 Consejo · Sigue el bucle con papel

Si no entiendes un bucle, haz una tabla de seguimiento: una columna por variable y una fila por vuelta. Anota cuánto valen i y suma en cada vuelta. En poco tiempo lo harás de cabeza.

3.while y do…while

Repetir mientras se cumpla una condición

let intentos = 0;
while (intentos < 3) {
  console.log("Intento", intentos + 1);
  intentos++;
}

let n = 10;
do {
  console.log("Este se ejecuta una vez aunque n sea 10");
} while (n < 5);

while evalúa la condición primero: si desde el inicio es falsa, no entra nunca. do…while ejecuta primero y evalúa después: entra siempre al menos una vez.

▶ Dividir hasta llegar a 1

Código (edítalo y pulsa Ejecutar)

<script>
  let numero = 100;
  let pasos = 0;

  while (numero > 1) {
    numero = numero / 2;
    pasos++;
    console.log("Paso", pasos, "→", numero);
  }
  console.log("Se necesitaron", pasos, "pasos");
</script>

Página (resultado)

Consola

⚠️ Importante · Bucles infinitos

Si la condición nunca se vuelve falsa, el bucle no termina y la página se congela. Siempre asegúrate de que algo dentro del bucle (un contador, una lectura) acabará haciendo falsa la condición. Si pasa en tu navegador, cierra la pestaña. En los editores de este curso, recarga la página.

4.for…of: recorrer elementos

Cuando tienes un array o un texto, for…of te entrega cada elemento directamente, sin contadores:

▶ Recorrer listas y textos

Código (edítalo y pulsa Ejecutar)

<script>
  const frutas = ["manzana", "pera", "mango"];
  for (const fruta of frutas) {
    console.log("Me gusta la", fruta);
  }

  for (const letra of "Hola") {
    console.log(letra);
  }

  // Con el índice: entries()
  for (const [i, fruta] of frutas.entries()) {
    console.log(i + 1 + ".", fruta);
  }
</script>

Página (resultado)

Consola

for…in: las claves de un objeto

const persona = { nombre: "Ana", edad: 30, ciudad: "Lima" };
for (const clave in persona) {
  console.log(clave, "=", persona[clave]);
}

📌 Nota · for…of y for…in no son lo mismo

for…of recorre valores (arrays, textos); for…in recorre claves (objetos). Usar for…in con arrays da los índices como texto y puede incluir propiedades inesperadas: evítalo con arrays.

5.break y continue

Instrucción	Qué hace
`break`	Sale del bucle por completo
`continue`	Salta a la siguiente vuelta, ignorando el resto de esta

▶ Saltar y salir

Código (edítalo y pulsa Ejecutar)

<script>
  // continue: ignorar los múltiplos de 3
  for (let i = 1; i <= 10; i++) {
    if (i % 3 === 0) continue;
    console.log(i);
  }

  console.log("---");

  // break: buscar el primer número divisible entre 7
  for (let i = 20; i < 100; i++) {
    if (i % 7 === 0) {
      console.log("El primero es", i);
      break;
    }
  }
</script>

Página (resultado)

Consola

6.Bucles anidados

Un bucle dentro de otro repite el interior por cada vuelta del exterior. Sirve para tablas, cuadrículas y combinaciones:

▶ Tabla de multiplicar y dibujo

Código (edítalo y pulsa Ejecutar)

<script>
  // tablas del 1 al 3, hasta el 5
  for (let tabla = 1; tabla <= 3; tabla++) {
    for (let n = 1; n <= 5; n++) {
      console.log(tabla + " × " + n + " = " + tabla * n);
    }
    console.log("---");
  }

  // un triángulo de estrellas
  for (let fila = 1; fila <= 4; fila++) {
    console.log("*".repeat(fila));
  }
</script>

Página (resultado)

Consola

💡 Consejo · Cuidado con el coste

Un bucle dentro de otro con 1000 vueltas cada uno hace un millón de operaciones. Es normal con pocos datos, pero ten presente cómo crece cuando manejes listas enormes.

7.Patrones que usarás siempre

Patrón	Idea	Ejemplo
Acumular	Una variable que va sumando o juntando	`total += precio`
Contar	Aumentar un contador cuando algo se cumple	`if (n % 2 === 0) pares++`
Buscar	Recorrer hasta encontrar y salir con `break`/`return`	`if (x === buscado) return i`
Máximo / mínimo	Recordar el mejor valor visto	`if (n > mayor) mayor = n`
Construir	Ir armando un array o texto nuevo	`resultado.push(n * 2)`

▶ Los cinco patrones

Código (edítalo y pulsa Ejecutar)

<script>
  const numeros = [4, 9, 2, 7, 12, 5];

  let total = 0, pares = 0, mayor = numeros[0], dobles = [];
  for (const n of numeros) {
    total += n;                      // acumular
    if (n % 2 === 0) pares++;        // contar
    if (n > mayor) mayor = n;        // máximo
    dobles.push(n * 2);              // construir
  }
  console.log({ total, pares, mayor, dobles });

  // buscar (con función y return)
  function posicion(lista, buscado) {
    for (let i = 0; i < lista.length; i++) {
      if (lista[i] === buscado) return i;
    }
    return -1;
  }
  console.log(posicion(numeros, 7), posicion(numeros, 99));
</script>

Página (resultado)

Consola

8.Errores frecuentes

Bucle infinito: la condición nunca se vuelve falsa (se olvidó i++).
Error «por uno» (off-by-one): usar < cuando debía ser <=, o empezar en 1 en lugar de 0.
Modificar la lista que se recorre (añadir o quitar elementos dentro del bucle).
Usar var en un for: la variable «se escapa» del bucle. Usa let.
Confundir for…of con for…in.
Declarar la variable acumuladora dentro del bucle: se reinicia en cada vuelta.
Olvidar break y seguir recorriendo cuando ya se encontró lo buscado.

📒 Apuntes para llevar

Los bucles repiten un bloque de código mientras se cumpla una condición.
for (inicio; condición; avance) es ideal si sabes cuántas vueltas dar; while repite mientras la condición sea verdadera; do…while entra al menos una vez.
for…of recorre los valores de un array o texto; for…in recorre las claves de un objeto.
break sale del bucle y continue salta a la siguiente vuelta.
Un bucle puede contener otro: el interior se repite por cada vuelta del exterior.
Cinco patrones: acumular, contar, buscar, máximo/mínimo y construir.
Evita los bucles infinitos y los errores «por uno» revisando siempre la condición y el avance.
Declara las variables acumuladoras fuera del bucle.

9.Glosario

Término	Significado
Bucle	Estructura que repite un bloque de código.
Iteración	Cada vuelta de un bucle.
Contador	Variable que cuenta las vueltas (`i`).
Acumulador	Variable que va guardando un resultado parcial (`suma`).
Bucle infinito	Bucle cuya condición nunca se vuelve falsa.
`break` / `continue`	Salir del bucle / saltar a la siguiente vuelta.
Error por uno	Fallo de un elemento de más o de menos en los límites.
Anidado	Un bucle colocado dentro de otro.

🧠 Comprueba lo aprendido

Elige una respuesta en cada pregunta. Verás al instante si acertaste y por qué.

¿Cuántas veces se ejecuta el cuerpo de for (let i = 0; i < 4; i++)?

Con i valiendo 0, 1, 2 y 3: cuatro veces.

¿Qué diferencia hay entre while y do…while?

do…while evalúa la condición después del cuerpo.

Quieres recorrer los valores de un array. ¿Cuál es la mejor opción?

for…of entrega cada elemento directamente.

¿Qué hace continue dentro de un bucle?

continue omite lo que queda de la vuelta actual.

Un bucle while (x < 10) no modifica nunca x dentro del cuerpo. ¿Qué ocurre?

Tu progreso se guarda en este navegador y se refleja en el índice del curso.

💡 🚀 ¡Ahora te toca!

La práctica fija lo aprendido. Pasa al ejercicio de esta lección.

Ir al ejercicio