Cómo recorrer un array en Javascript

En javascript existen muchas formas de recorrer arrays de datos, aunque no todas tienen el mismo objetivo. Conocerlas bien nos puede ahorrar muchas líneas de código.

Empecemos por el tipico bucle.

const frutas = ["mandarina", "pera", "melón", "sandía", "manzana"]
for (let index=0; index

Como vemos, realizamos un bucle con valor de índice inicial 0 y mientras el índice sea menor que la longitud del array vamos aumentando su valor en 1.

Cabe decir que con este tipo de bucle podemos recorrer cualquier tipo de dato iterable.

forEach

El objeto Array posee el método forEach que nos permite recorrer sus propios datos:

const frutas = ["mandarina", "pera", "melón", "sandía", "manzana"]
frutas.forEach(fruta => console.log(fruta)) 

Básicamente aplicamos una función de callback en cada iteración, ejecutando aquello que necesitemos (en este caso mostrar por pantalla mediante console.log)

for ... of

La sentencia for ... of permite iterar directamente sobre los valores de un array (o de cualquier elemento iterable). Su sintaxis aunque es similar al bucle for, pero mucho más concisa.

const frutas = ["mandarina", "pera", "melón", "sandía", "manzana"]
for(const fruta of frutas){
  console.log(fruta)
}

for ... in

Aunque podemos recorrer un array con este tipo de bucles, no está recomendado su uso.

Array.map

A veces necesitamos recorrer un array y modificar su valor. En este caso Array.map está recomendado.

Su uso es similar al forEach donde añadimos una función de callback, pero en este caso lo que devuelva esta función será el nuevo valor de el elemento que estemos iterando.

Con un ejemplo lo verás muchísimo más claro.

const numeros = [1,2,3,4]
const dobles = numeros.map( numero => numero * 2) // [ 2, 4, 6, 8 ]