Ciclos for en JavaScript: guía completa

Muchas tareas en programación requieren repetir algo: recorrer una lista de usuarios, calcular la suma de 100 números, imprimir los meses del año. Escribir el mismo código cien veces no es una opción. Para repetir código, existen los ciclos (también llamados bucles o loops).

¿Qué es un ciclo for?

El ciclo for repite un bloque de código un número determinado de veces. Es el más común cuando sabes de antemano cuántas repeticiones necesitas.

Sintaxis

for (inicio; condicion; incremento) {
  // código que se repite
}

• inicio: se ejecuta una sola vez al comenzar (generalmente let i = 0)
• condición: se evalúa antes de cada repetición; si es falsa, el ciclo termina
• incremento: se ejecuta al final de cada repetición (generalmente i++)

Ejemplo 1: contar del 1 al 5

for (let i = 1; i <= 5; i++) {
  console.log(i);
}
// 1
// 2
// 3
// 4
// 5

Ejemplo 2: recorrer un array

let frutas = ['manzana', 'pera', 'uva', 'naranja'];

for (let i = 0; i < frutas.length; i++) {
  console.log(frutas[i]);
}
// manzana
// pera
// uva
// naranja

i va de 0 hasta el último índice (frutas.length - 1). Por eso la condición es i < frutas.length (no <=).

Ejemplo 3: calcular una suma

let numeros = [10, 20, 30, 40, 50];
let suma = 0;

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

console.log(suma); // 150

for...of: una forma más simple para arrays

JavaScript moderno tiene for...of, que recorre arrays de forma más legible:

let frutas = ['manzana', 'pera', 'uva'];

for (let fruta of frutas) {
  console.log(fruta);
}

Usa for...of cuando solo necesitas el valor. Usa el for clásico cuando necesitas el índice.

Errores frecuentes

Ciclo infinito: Si la condición nunca se vuelve falsa, el ciclo corre para siempre y congela el programa. Asegúrate de que el incremento haga que la condición eventualmente sea falsa.

Off-by-one: Los arrays empiezan en índice 0. La condición debe ser i < array.length, no i <= array.length. Con <= intentarías acceder a un índice que no existe.

Modificar el array mientras lo recorres: Agregar o quitar elementos de un array mientras lo recorres puede generar comportamientos inesperados. Trabaja con una copia si necesitas modificarlo.