¿Cómo repetir acciones con ciclos en JavaScript?

Un ciclo en JavaScript es una estructura que repite un bloque de código automáticamente hasta que se cumple una condición de parada.

Sin ciclos, tendrías que escribir la misma línea decenas de veces. Con ciclos, escribes la lógica una sola vez y JavaScript la ejecuta cuantas veces necesites.

El ciclo for

El ciclo for es el más común. Lo usas cuando sabes exactamente cuántas veces quieres repetir algo.

Estructura

for (inicio; condición; actualización) {
  // código que se repite
}

Tiene tres partes separadas por punto y coma:

• inicio: declara y asigna el contador (let i = 0)
• condición: mientras sea true, el ciclo continúa
• actualización: modifica el contador al final de cada vuelta (i++)

Ejemplo 1 — Imprimir números del 1 al 5

for (let i = 1; i <= 5; i++) {
  console.log("Número: " + i);
}

Salida:

Número: 1
Número: 2
Número: 3
Número: 4
Número: 5

Ejemplo 2 — Calcular el total de ventas en Liverpool

Imagina que Liverpool registró ventas diarias durante 5 días. Quieres sumarlas todas.

let ventas = [12500, 8300, 15700, 9400, 11200];
let total = 0;

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

console.log("Total de ventas: $" + total);

Salida:

Total de ventas: $57,100

ventas.length devuelve el número de elementos del arreglo (5). El ciclo va de i = 0 hasta i = 4 y suma cada elemento.

El ciclo while

El ciclo while repite un bloque de código mientras una condición sea verdadera. Lo usas cuando no sabes con anticipación cuántas repeticiones necesitas.

Estructura

while (condición) {
  // código que se repite
}

JavaScript evalúa la condición antes de cada vuelta. Si es false desde el inicio, el cuerpo no se ejecuta ni una vez.

Ejemplo 1 — Contar cajas en almacén Bimbo

Un almacén de Bimbo recibe cajas hasta que el peso total supera $500 kg. Cada caja pesa 25 kg.

let pesoTotal = 0;
let cajas = 0;

while (pesoTotal < 500) {
  pesoTotal = pesoTotal + 25;
  cajas = cajas + 1;
}

console.log("Cajas recibidas: " + cajas);
console.log("Peso total: " + pesoTotal + " kg");

Salida:

Cajas recibidas: 20
Peso total: 500 kg

Ejemplo 2 — Aplicar descuento hasta agotar presupuesto

Un cliente de Mercado Libre tiene $3,000 de presupuesto. Compra artículos de $800 mientras pueda pagar.

let presupuesto = 3000;
let compras = 0;

while (presupuesto >= 800) {
  presupuesto = presupuesto - 800;
  compras = compras + 1;
}

console.log("Artículos comprados: " + compras);
console.log("Presupuesto restante: $" + presupuesto);

Salida:

Artículos comprados: 3
Presupuesto restante: $600

El ciclo forEach

forEach es un método de arreglos. Ejecuta una función una vez por cada elemento del arreglo. Es más legible que un for clásico cuando trabajas con listas.

Estructura

arreglo.forEach(function(elemento) {
  // código que usa elemento
});

También puedes usar funciones flecha (=>) para escribirlo más corto:

arreglo.forEach((elemento) => {
  // código que usa elemento
});

Ejemplo 1 — Mostrar productos de FEMSA

let productos = ["Coca-Cola 600ml", "Agua Ciel", "Powerade", "Del Valle"];

productos.forEach((producto) => {
  console.log("Producto disponible: " + producto);
});

Salida:

Producto disponible: Coca-Cola 600ml
Producto disponible: Agua Ciel
Producto disponible: Powerade
Producto disponible: Del Valle

Ejemplo 2 — Calcular precios con IVA

Una tienda de Liverpool tiene una lista de precios sin IVA. Quieres mostrar cada precio con el 16% de IVA incluido.

let precios = [500, 1200, 3400, 780];

precios.forEach((precio) => {
  let precioConIVA = precio * 1.16;
  console.log("Precio con IVA: $" + precioConIVA);
});

Salida:

Precio con IVA: $580
Precio con IVA: $1,392
Precio con IVA: $3,944
Precio con IVA: $904.8

Nota: Para eliminar decimales puedes usar Math.round(precioConIVA) o precioConIVA.toFixed(2).

¿Cuál ciclo usar?

Ciclos infinitos — el error más peligroso

Un ciclo infinito ocurre cuando la condición de parada nunca se vuelve false. El programa se congela o consume toda la memoria.

¿Cómo se produce?

// ⚠️ CICLO INFINITO — no ejecutes esto
let i = 0;
while (i < 10) {
  console.log(i);
  // Falta i++ — i nunca cambia, la condición siempre es true
}

El contador i nunca aumenta, así que i < 10 siempre es true.

Regla de oro

Siempre verifica que el contador o la variable de control cambie dentro del ciclo.

Errores comunes

1. Olvidar actualizar el contador en while

// ❌ Incorrecto
let n = 1;
while (n <= 5) {
  console.log(n);
  // n nunca cambia → ciclo infinito
}

// ✅ Correcto
let n = 1;
while (n <= 5) {
  console.log(n);
  n++; // incremento necesario
}

2. Usar > en lugar de < en el for

Este error hace que el ciclo no se ejecute ni una sola vez.

// ❌ Incorrecto — i empieza en 0, que no es > 5
for (let i = 0; i > 5; i++) {
  console.log(i);
}

// ✅ Correcto
for (let i = 0; i < 5; i++) {
  console.log(i);
}

3. Usar forEach sobre algo que no es un arreglo

forEach solo existe en arreglos. Si intentas usarlo en un número o cadena de texto, obtendrás un error.

// ❌ Incorrecto
let precio = 500;
precio.forEach((p) => console.log(p)); // TypeError

// ✅ Correcto — forEach va sobre un arreglo
let precios = [500, 800, 1200];
precios.forEach((p) => console.log(p));

4. Modificar un arreglo mientras lo recorres con for

Agregar o eliminar elementos de un arreglo dentro del mismo ciclo for puede producir resultados inesperados. Prefiere crear un arreglo nuevo si necesitas transformar los datos.

Ejemplo integrador — Nómina de empleados

Una empresa como FEMSA tiene 4 empleados. Quieres calcular cuánto paga en total cada quincena.

let sueldos = [18500, 22000, 15000, 27500];
let totalNomina = 0;

sueldos.forEach((sueldo) => {
  totalNomina = totalNomina + sueldo;
});

console.log("Total nómina quincena: $" + totalNomina);

Salida:

Total nómina quincena: $83,000

Ahora con for, obteniendo además el número de empleado:

let sueldos = [18500, 22000, 15000, 27500];

for (let i = 0; i < sueldos.length; i++) {
  console.log("Empleado " + (i + 1) + " — Sueldo: $" + sueldos[i]);
}

Salida:

Empleado 1 — Sueldo: $18,500
Empleado 2 — Sueldo: $22,000
Empleado 3 — Sueldo: $15,000
Empleado 4 — Sueldo: $27,500

Resumen rápido

Los tres ciclos son herramientas distintas para el mismo objetivo: evitar repetir código manualmente. Elegir el correcto hace tu código más claro y fácil de mantener.