Marc Semper Lloret
← JavaScript: el lenguaje

Sesión 5 · Semana 2

Bucles

Hoy · Hoja de ruta

  1. 1. Aprende: Qué bucles existen y cuál corresponde a cada tipo de repetición.
  2. 2. Haz: Recorre una lista de productos y calcula totales y recuentos.
  3. 3. Comprueba: Ningún bucle se queda colgado y todos tratan bien la lista vacía.

Antes de empezar · 5 minutos, sin apuntes

  1. ¿Qué cosas repetirías en tu proyecto: mostrar productos, sumar precios, buscar uno?
  2. ¿Cuántas veces se repite cada una: un número fijo, o «hasta que…»?
  3. ¿Qué debería mostrar tu web si la lista está vacía?

Las tres formas, y cuándo se usa cada una

// Un número conocido de vueltas, con índice
for (let i = 0; i < 5; i++) {
  console.log(`Vuelta ${i}`);
}

// Recorrer los valores de una colección: el que más usarás
for (const producto of productos) {
  console.log(producto);
}

// Repetir mientras se cumpla algo, sin saber cuántas veces
let restante = 100;
while (restante > 0) {
  restante -= 30;
}
Bucle Úsalo cuando
for clásico Necesitas el índice, o vas de N en N
for...of Solo necesitas cada valor: el caso normal
while No sabes de antemano cuántas vueltas serán
for...in Casi nunca: recorre claves, y trae sorpresas en arrays

El acumulador

El patrón que más vas a repetir:

const precios = [89.9, 24.5, 199, 12.75];

let total = 0;
for (const precio of precios) {
  total += precio;
}
console.log(total.toFixed(2));   // "326.15"

El recuento con condición se escribe así:

let baratos = 0;
for (const precio of precios) {
  if (precio < 50) baratos++;
}

Un bucle infinito no es un error de sintaxis

El fichero está bien escrito, el navegador se queda bloqueado y no hay ningún mensaje rojo. Ocurre cuando la condición del while nunca llega a ser falsa, casi siempre porque se olvidó actualizar la variable de control.

Antes de ejecutar un while, responde a esto: ¿qué línea, dentro del bucle, acerca la condición a hacerse falsa? Si no la encuentras, todavía no ejecutes.

Salir antes: break y continue

for (const producto of productos) {
  if (producto.stock === 0) continue;   // salta este y sigue
  if (producto.precio > 500) break;     // deja de recorrer
  console.log(producto.nombre);
}

Úsalos con moderación: un bucle con cuatro break repartidos es más difícil de seguir que un bucle con una condición bien escrita.

El caso vacío

const productos = [];

for (const producto of productos) {
  console.log(producto);      // no entra ninguna vez, y está bien
}

Un bucle sobre una lista vacía no falla: simplemente no se ejecuta. Lo que falla es el programa que da por hecho que había algo:

const media = total / productos.length;   // 0 / 0 → NaN

Con una lista de al menos seis precios de tu tema:

  1. Calcula el total y la media, tratando el caso de lista vacía.
  2. Cuenta cuántos elementos superan un umbral.
  3. Encuentra el más caro sin usar métodos de array todavía.
  4. Escribe un bucle que se detenga en el primero que cumpla una condición.
  5. Provoca un bucle infinito a propósito, obsérvalo, y explica qué faltaba.
Objetivo mínimoTotal, media y recuento correctos, y la lista vacía sin NaN.
Si lo tienesCalcula el más caro y el más barato en un solo recorrido.
RetoRecorre dos listas a la vez y detecta qué elementos están en ambas.

Checkpoint · fin de la sesión 5

  • Eliges el bucle adecuado y justificas por qué.
  • Usas el patrón acumulador con soltura.
  • Sabes qué hace que un while termine.
  • Tu código no se rompe con una lista vacía.

Antes de cerrar · 2 minutos, sin mirar

  1. ¿Cuándo eliges for...of y cuándo un for con índice?
  2. ¿Qué diferencia hay entre break y continue?
  3. ¿Cuánto vale la media de una lista vacía, y qué deberías hacer?
Ver respuestas

1 · for...of cuando solo necesitas el valor; el clásico cuando necesitas la posición o un salto distinto de uno.

2 · break abandona el bucle; continue salta a la vuelta siguiente.

3 · NaN, porque divides entre cero. Hay que comprobar la longitud antes y devolver 0 o un aviso.