Repetir tareas de forma manual cuando tienes una lista de datos es ineficiente y propenso a errores. Los loops (o ciclos) en JavaScript resuelven exactamente ese problema: ejecutan una tarea una y otra vez mientras se cumpla una condición, sin que tengas que escribir cada paso por separado.
¿Qué es un loop y por qué lo necesitas?
Un loop es una estructura que repite automáticamente una tarea mientras una condición sea verdadera [0:08]. Imagina que tienes un array con nombres de estudiantes y quieres saludar a cada uno. Sin un ciclo, tendrías que escribir la instrucción cuatro veces. Con un ciclo, escribes la lógica una sola vez y el programa se encarga del resto.
Para ilustrar este concepto, se parte de un array llamado estudiantes que contiene cuatro nombres: María, Sergio, Rosa y Daniel [1:15]. Además, se define una función llamada saludarEstudiantes que recibe un parámetro y ejecuta un console.log con el saludo personalizado [1:42].
javascript
var estudiantes = ["María", "Sergio", "Rosa", "Daniel"];
function saludarEstudiantes(estudiante) {
console.log(Hola, ${estudiante});
}
¿Cómo funciona el loop for clásico?
El for clásico se divide en tres partes dentro de los paréntesis, separadas por punto y coma [2:28]:
- Inicialización: se declara una variable, por convención
i, con valor cero.
- Condición: se evalúa si
i es menor a la longitud del array usando la propiedad .length.
- Incremento: se usa el operador
i++, que aumenta el valor de i en uno después de cada iteración.
javascript
for (var i = 0; i < estudiantes.length; i++) {
saludarEstudiantes(estudiantes[i]);
}
El index es la posición numérica de cada elemento dentro del array. Cuando i vale cero, estudiantes[0] devuelve "María". Cuando vale uno, devuelve "Sergio", y así sucesivamente [4:08]. El ciclo se rompe en el momento en que i alcanza el valor de la longitud del array (en este caso, cuatro), porque cuatro ya no es menor a cuatro [5:15].
El resultado en consola es:
- Hola, María.
- Hola, Sergio.
- Hola, Rosa.
- Hola, Daniel.
¿Qué papel juega el operador de incremento?
El operador i++ es fundamental para que el ciclo avance. Sin él, la variable i siempre valdría cero y la condición sería eternamente verdadera, generando un ciclo infinito que bloquearía el programa. Cada vez que el bloque de código interno se ejecuta, i++ suma uno al valor actual de i [3:22].
¿Qué es el loop for...of y en qué se diferencia?
La segunda forma de crear un loop es con for...of [5:47]. En lugar de manejar manualmente una variable de índice, declaras una variable en singular que representa cada elemento individual del array en plural.
javascript
for (var estudiante of estudiantes) {
saludarEstudiantes(estudiante);
}
¿Cuándo conviene usar for...of en lugar del for clásico?
Con for...of no necesitas preocuparte por el index ni por la propiedad .length. JavaScript se encarga internamente de recorrer cada elemento del array hasta que no queden más [6:18]. Es más legible y reduce la posibilidad de errores al manipular índices.
La diferencia clave entre ambas opciones:
- for clásico: requiere inicializar
i, definir la condición con .length y usar i++. Útil cuando necesitas conocer la posición exacta del elemento.
- for...of: solo necesitas declarar una variable que tomará el valor de cada elemento automáticamente. Ideal cuando solo te importa el valor, no su posición.
Ambas formas producen exactamente el mismo resultado en consola: los cuatro saludos personalizados. La elección depende de si necesitas trabajar con el índice o simplemente iterar sobre los valores.
Si quieres seguir profundizando, el siguiente paso es conocer el loop while, que ofrece una tercera manera de repetir tareas con una sintaxis diferente. ¿Cuál de estas formas de loop te resulta más intuitiva?
