¿En un bucle que valida items, debes parar al primer invlido. Qué opción expresa mejor ese requeisito?

for...of permite corte temprano explcito; forEach no.

Bucles en JavaScript: repetir sin romper lógica ni rendimiento

Aprende a usar for y while con seguridad, evitar bucles infinitos, recorrer datos reales y construir patrones de acumulación, conteo y filtrado paso a paso.

¿Cuánto sabes de JavaScript?

📘 Teoría

Cuándo necesitas un bucle (y cuándo no)

Si hay una tarea repetitiva sobre datos, probablemente necesitas iteración.

Procesar carritos, recorrer mensajes, sumar ventas diarias, validar inputs o generar reportes: todos estos problemas comparten algo, una secuencia de elementos.

Si solo necesitas comprobar una condición simple, quizá basta un `if`. Si debes repetir una operación n veces, ahí entra un bucle.

for

Ideal cuando sabes cuántas veces iterar.

Recorrer arrays por índice
Generar rangos numéricos

while

Útil cuando la condición manda.

Reintentos hasta éxito
Lectura hasta dato válido

break

Detener ejecución antes de terminar.

Salir al encontrar un valor
Cortar búsqueda innecesaria

continue

Saltarte iteraciones concretas.

Ignorar valores inválidos
Filtrar sin estructuras extra

for seguro: patrón base que no falla

Si controlas límites e índice, tienes el 80% del problema resuelto.

El patrón clásico de `for` tiene tres partes: inicialización, condición y actualización. Léelo siempre en ese orden para depurarlo bien.

En arrays, usa `i array.length` y evita `=` salvo que realmente necesites incluir la última posición por otro motivo.

Si aparece `undefined` en consola, revisa límites del índice.
Si total queda en 0, revisa que el acumulador se actualiza dentro del bucle.
Nombra bien variables de iteración (`indice`, `valorActual`) cuando el caso sea complejo.

Acumulador de ingresos diarios

const ingresos = [120, 95, 210, 180];
let total = 0;

for (let i = 0; i < ingresos.length; i++) {
  total += ingresos[i];
}

console.log('Total semanal:', total);

while controlado: útil, pero con disciplina

while es potente, pero exige que actualices estado en cada vuelta.

`while` ejecuta mientras la condición sea verdadera. Si no cambias la variable que participa en esa condición, tendrás bucle infinito.

Piensa en `while` como un proceso “hasta que pase X”: hasta encontrar resultado, hasta agotar intentos, hasta obtener dato válido.

Reintentos con tope máximo

let intentos = 0;
let conectado = false;

while (!conectado && intentos < 3) {
  intentos++;
  console.log(`Intento ${intentos}...`);

  if (intentos === 3) {
    conectado = true;
  }
}

console.log('Conectado:', conectado);

break y continue en escenarios reales

Te ayudan a controlar flujo fino dentro de una iteración.

Usa `break` cuando ya encontraste lo que buscabas y seguir iterando no aporta nada. Esto mejora rendimiento y claridad.

Usa `continue` para saltarte casos no válidos sin meter `if` gigantes dentro del bucle.

Filtrar entradas inválidas

const datos = [10, null, 25, undefined, 8, 0];
let suma = 0;

for (let i = 0; i < datos.length; i++) {
  const valor = datos[i];

  if (typeof valor !== 'number' || valor <= 0) {
    continue;
  }

  suma += valor;
}

console.log('Suma válida:', suma);

Errores típicos en bucles y cómo evitarlos

Los mismos fallos aparecen una y otra vez: detectarlos rápido es parte del nivel pro.

Error 1: off-by-one (`=` en vez de ``). Error 2: olvidar incremento/decremento en `while`. Error 3: declarar acumuladores dentro del bucle y reiniciarlos sin querer.

Antes de culpar a JavaScript, imprime índice, valor actual y variable de control. Con esa trazabilidad, el bug suele caer en minutos.

Trazado para depurar

const items = ['a', 'b', 'c'];

for (let i = 0; i < items.length; i++) {
  console.log({ i, valor: items[i], longitud: items.length });
}

1 Cuándo necesitas un bucle (y cuándo no) 2 for seguro: patrón base que no falla 3 while controlado: útil, pero con disciplina 4 break y continue en escenarios reales 5 Errores típicos en bucles y cómo evitarlos

🧭 Visuales clave

Bucles en JavaScript

Visualiza repeticion controlada y criterios de salida en iteraciones.

Esquema de iteracion con for, while y control de corte

Flujo básico de iteración

Sirve como mapa mental del ciclo completo y deja mas clara la relacion entre condicion, actualizacion y parada.

Esquema visual de iniciar, comprobar, ejecutar y actualizar dentro de un bucle

🧪 Aprende probando

Ejemplo Ejemplo guiado: calcular stock total por almacén Usa un `for` para sumar unidades de distintos almacenes y decidir si hay riesgo de rotura.

⌄

Ejemplo Ejemplo guiado: while con máximo de intentos Simula reintento de envío de formulario hasta éxito o tope de intentos.

⌄

Ejemplo Demo interactiva: resumen de checkout con bucle Añade importes separados por coma y el sistema calculará total, media y cuántos importes válidos procesó.

⌄

Ejemplo Demo interactiva: bucles visuales con for Mueve un rango para crear nodos numerados y comprobar cómo cada iteración del `for` produce un resultado visible.

⌄