Entendiendo el ciclo for, forEach, for in & for of en JavaScript

Última actualización: 01 - 11 - 2023

¿Qué es un loop?🤔

Un loop puede traducirse al español como ciclo o bucle y no es más que la repetición de una tarea o acción cierta cantidad de veces.

En JavaScript los loops son la repetición de un código que se ejecuta a través de una estructura llamada for. Esta no es la única forma de hacer ciclos en JavaScript pero es la estructura en la que nos vamos a enfocar en este artículo.

Existe un termino más técnico en programación para usar este tipo de tareas y se llama iteración o recorridos; ya que los for loops son muy usados para recorrer o imprimir un array.

A continuación veamos cómo usar un for en JavaScript.

Ejemplo de un for loop de JavaScript

for (let i = 0; i <= 10; i++){
  console.log(i);
}

Entendiendo la sintaxis de un bucle for de JavaScript

El ciclo for del ejemplo anterior es la iteración más común (Y la más popular) dentro de la familia de los for. Consta de tres partes:

• La incialización de la variable

(let i = 0;

Aquí es donde se determina desde qué punto, índice o valor va a empezar el ciclo. Existen casos donde la inicialización de la variable empieza fuera de la estructura for.

• La condición

i <= 10;

La segunda parte se usa para indicar cuántas veces se tiene que repetir ese ciclo utilizando los operadores de comparación.

• La operación

i++)

La última parte del ciclo for de JavaScript es donde se determina qué tipo de operación se va a aplicar a la variable que inicializamos al principio de la estructura. Estas operaciones pueden ser de incremento (++ / += 1) o de disminución (-- / -= 1).

//Imagina que aquí va la estructura for😆{
  console.log(i);
}

Todo lo que se encuentre dentro del bloque de código (Dentro de los corchetes o llaves) es lo que se va a ejecutar tantas veces como lo hayamos indicado en la condición.

El resultado de este ejemplo es que mostrará por la consola del navegador los números del 1 al 10.

La razón por la que se usa un for loop es para evitar realizar tareas repetitivas.

Te darás cuenta a lo largo de tus estudios o carrera como desarrollador que hay datos que repiten un patrón de comportamiento y depende de tu criterio utilizar la herramienta adecuada para optimizar esa tarea. Veamos un ejemplo al mejor estilo de As seen on TV, lol 😂. El típico ejemplo de imprimir una tabla de multiplicar.

//Tabla del 1

let factor = 1;

console.log(factor*1);
console.log(factor*2);
console.log(factor*3);
console.log(factor*4);
console.log(factor*1);
console.log(factor*5);
console.log(factor*6);
console.log(factor*7);
console.log(factor*8);
console.log(factor*9);
console.log(factor*10);

¿Cansado de repetir tanto código? Te tengo la solución. ¡¡Utiliza el FOR LOOP DE JAVASCRIPT!!

//La misma tabla del 1

let factor = 1;

for (let i = 0; i <= 10; i++){
  console.log(factor*i);
}

//Tu memoria RAM te lo agradecerá

Como mencioné al principio de este artículo, los ciclos for de JavaScript pueden ser utilizados para recorrer arrays. En este link explico más a detalle Cómo recorrer un array con un for loop. Revísalo.

ForEach en JavaScript

Los bucles for each son muy efectivos para recorrer un array ya que estos iteran de forma directa sobre los elementos que contiene dicho array, es decir, no tienes que indicar cuántas veces tiene que hacer el ciclo como en el ciclo for agregando el método length y tiene una sintaxis más directa para ejecutar este bloque de código.

Ejemplo del bucle forEach en JavaScript

El ciclo forEach es un método para arrays, por lo que usaremos un arreglo de ejemplo para ver cómo se compone:

//El ciclo del Avatar

let elementos = ["Agua","Tierra","Fuego","Aire"];

//Aplicando el método forEach

elementos.forEach(elemento => {
  console.log(elemento);
});

//Se imprimen los valores dentro del array

Los parámetros dentro del for each loop será una función de callback que a su vez tendrá como parámetro el valor a iterar o recorrer. Puede ser el nombre que quieras pero el estándar es que sea el singular del array a iterar.

La función también puede recibir dos parámetros más que van a indicar el índice y el array que se está iterando.

let elementos = ["Agua","Tierra","Fuego","Aire"];

elementos.forEach((elemento, indice, array) => {
  console.log(elemento, indice, array);
});

//Imprime "Agua", 0, ["Agua", "Tierra", "Fuego", "Aire"] en el primer recorrido
//Imprime "Tierra", 1, ["Agua", "Tierra", "Fuego", "Aire"] en el segundo recorrido
//Imprime "Fuego", 2, ["Agua", "Tierra", "Fuego", "Aire"] en el tercer recorrido
//Imprime "Aire", 3, ["Agua", "Tierra", "Fuego", "Aire"] en el último recorrido

For in en JavaScript

El ciclo For in tiene una sintaxis muy sencilla y fácil de recordar. Este tipo de for, usado de forma "simple" solo va a imprimir los índices del array que se le asigne.

let elementos = ["Agua","Tierra","Fuego","Aire"];

for (elemento in elementos){
console.log(elemento);
}

//Imprime los índices 0,1,2,3

Aunque se puede jugar con los datos dentro de este ciclo para imprimir los valores que contenga el array y no sus índices.

let elementos = ["Agua","Tierra","Fuego","Aire"];

for (elemento in elementos){
console.log(elementos[elemento]);
}

//Imprime los valores Agua, Tierra, Fuego y Aire

//Es muy parecido a hacer algo como elementos[i] en un for loop normal

For of en JavaScript

El bucle for of de JavaScript tiene la misma sintaxis que su hermano for in aunque con este ciclo es más sencillo imprimir los valores de un arreglo.

Ejemplo de un for of

let elementos = ["Agua","Tierra","Fuego","Aire"];

for (elemento of elementos){
console.log(elemento);
}

//Imprime los valores Agua, Tierra, Fuego y Aire