Cómo hacer un For Each en JavaScript

El bucle for each es una de las estructuras de control más utilizadas al momento de programar, y en este artículo te hablaré sobre cómo hacerlo de forma moderna. Aquí te presento un ejemplo rápido, pero sigue leyendo para entender cómo funciona.

// esta es la colección de datos
let frutas = ["manzanas", "peras", "huayas", "sandías"];
// hacemos un for each con ella
for (let fruta of frutas)
{
	// y hacemos algo con cada elemento
	console.log(fruta);
}

Sintaxis

Existen dos alternativas para crear el for each.

Opción 1: Estilo viejo

for (var índice in colección) { …
}

Funciona de la siguiente manera:

• índice es la posición o llave donde está el elemento evaluado.
• in le indica a JavaScript que voy a acceder a cada elemento usando su posición.
• colección es la colección o arreglo con la información que utilizaremos.

Es decir, en este método recibo el índice del arreglo y yo tengo que extraer la información uno por uno. Veamos el siguiente ejemplo:

// esta es la colección de datos
var coleccion = ["manzanas", "peras", "huayas", "sandías"];
// hacemos un for each con cada valor
var fruta;
for (var indice in coleccion)
{
	// recuperamos el elemento
	fruta = coleccion[indice];
	
	// y hacemos algo con él
	console.log(fruta);
}

Observa que aquí tengo una colección que es un arreglo donde tengo los nombres de las frutas. Utilizo el bucle for con la sentencia in, lo que indica a JavaScript que voy a acceder a los valores por su posición. Por eso en la línea 8 tengo que recuperar el valor antes de poder utilizarlo.

Opción 2: Estilo moderno

for (let elemento of colección) { … }

Funciona de la siguiente manera:

• elemento es cada valor en la colección.
• of le indica a JavaScript que quiero que extraiga cada valor de forma automática.
• colección es la colección o arreglo con la información que utilizaremos.

Es decir, en este método le doy la colección a JavaScript y él extrae da cada valor de forma automática. Muy moderno, ¿no te parece? Veamos el siguiente ejemplo:

// esta es la colección de datos
let frutas = ["manzanas", "peras", "huayas", "sandías"];
// hacemos un for each con ella
console.log("Tenemos:");
for (let fruta of frutas)
{
	// y hacemos algo con cada elemento
	console.log(fruta);
}

Observa que en este ejemplo no fue necesario recuperar el valor, puesto que JavaScript me lo proporciona en cada iteración. Es decir, en esta modalidad yo le doy la variable y en cada ciclo él me pone el valor que corresponde.

Conclusión

Hoy aprendimos a utilizar un ciclo for each en JavaScript. Vimos como hacerlo de la forma vieja, donde yo manualmente tengo que extraer cada valor, y de la manera moderna, donde le doy la variable y JavaScript lo hace por mi.

Déjame un comentario si tienes dudas con lo que vimos en este artículo o consulta nuestro apartado de temas en JavaScript para aprender otros comandos o herramientas interesantes.