5 formas para recorrer un array con JavaScript

En este artículo vas a ver 5 formas distintas que permiten recorrer un array con JavaScript.

Un loop o bucle en cualquier lenguaje de programación usualmente es código que se repite una y otra vez hasta que cierta condición se cumple.

1- Recorrer un array con JavaScript usando for

Source code

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

Inicializamos la variable i en 0, se ejecutará hasta que i tenga un valor menor que 10 y se incrementará de 1 en 1.

En cada iteración, imprimo el valor de la variable en la consola.

La ventaja que tiene el for es que recorre cierta cantidad de código hasta que la condición se cumpla y puede ser muy útil cuando estás leyendo registros de una base de datos y, fácilmente puedes limitar la cantidad de registros a procesar.

2- Recorrer un array con JavaScript usando while

El while también se puede utilizar para recorrer un arreglo o repetir código en x ocasiones.

Source code

let i = 0;
while (i < 10) {
    console.log(`Numero: ${i}`);
    i++;
}

Puedes crear una variable que hará de contador. Entre paréntesis puedes poner la condición que se comprobará en cada iteración y que determinará el final del bucle.

En el caso del ejemplo, se estará ejecutando hasta que el valor de i sea menor que 10.

Fíjate que el incremento de la variable i se ejecuta justo después del código que quieres repetir.

3- Recorrer un array usando do while

Con el do… while el código al menos se va a ejecutar una vez sin importar si la condición se cumple o no.

Source code

i = 0;
do {
    console.log(`Numero: ${i}`);
    i++;
} while (i < 10);

El código es secuencial. Primero se imprime el valor de i en la consola, se incrementa la variable y, finalmente, se comprueba la condición.

4- Recorrer un array usando forEach

Otra forma de recorrer un arreglo es utilizando lo que se conoce como un forEach.

Source code

const comidas = ['Desayunar', 'Almorzar', 'Comer', 'Merendar', 'Cenar'];
comidas.forEach(function(comida, index) {
    console.log(`${index} : ${comida}`);
});

He creado un array con las comidas del día y las estoy iterando con forEach para mostrar su índice y valor en consola.

Esta sintaxis se ve muy limpia y, por eso, es una de mis preferidas para usarla en mis proyectos.

5- Recorrer un array usando map

Otra forma de recorrer un arreglo es utilizando lo que se conoce como map que permite recorrer un arreglo de objetos.

Source code

const comidas = [
    {id: 1, momento: 'Desayuno'},
    {id: 2, momento: 'Almuerzo'},
    {id: 3, momento: 'Comida'},
    {id: 4, momento: 'Merienda'},
    {id: 5, momento: 'Cena'},
];
 
const momentoComida = comidas.map(function(comida) {
    return comida.momento;
});
 
console.log(momentoComida);

En el código anterior, he creado un arreglo con 5 objetos que estoy recorriendo con map.

Si te fijas en el código, podrás darte cuenta que esta forma de iteración, a diferencia del for, foreach o while, en este caso, se almacena la información para luego extraerla. No se extrae la información directamente.