5 formas de recorrer un array con JavaScript

Juandieruiz — Wed, 16 Feb 2022 09:16:29 +0000

Bienvenidos devs!

En ese artículo vamos a ver 5 formas distintas que nos 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.

Recorrer un array con JavaScript usando for

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.

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.

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.

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.

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.

Recorrer un array usando forEach

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

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.

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.

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, array, matriz… 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.

JavaScript Array💻¡Llegado hasta aquí si deseas mas contenido asi, te invito a seguirme en Instagram❤ y dame esas ganas de seguir trayendo contenido masivo como este!

@juandieruiz

Juan Diego Gomez
Full Stack Developer