5 formas de recorrer un array con JavaScript

Bienvenidos devs!

En ese artculo vamos a ver 5 formas distintas que nos permiten recorrer un array con JavaScript.
Un loop o bucle en cualquier lenguaje de programacin usualmente es cdigo que se repite una y otra vez hasta que cierta condicin 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 iteracin, imprimo el valor de la variable en la consola.
La ventaja que tiene el for es que recorre cierta cantidad de cdigo hasta que la condicin se cumpla y puede ser muy til cuando ests leyendo registros de una base de datos y, fcilmente puedes limitar la cantidad de registros a procesar.

Recorrer un array con JavaScript usandowhile

El while tambin se puede utilizar para recorrer un arreglo o repetir cdigo en x ocasiones.

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

Puedes crear una variable que har de contador. Entre parntesis puedes poner la condicin que se comprobar en cada iteracin 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.
Fjate que el incremento de la variable i se ejecuta justo despus del cdigo que quieres repetir.

Recorrer un array usando dowhile

Con el do while el cdigo al menos se va a ejecutar una vez sin importar si la condicin se cumple o no.

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

El cdigo es secuencial. Primero se imprime el valor de i en la consola, se incrementa la variable y, finalmente, se comprueba la condicin.

Recorrer un array usandoforEach

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 da 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 usandomap

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 cdigo anterior, he creado un arreglo, array, matriz con 5 objetos que estoy recorriendo con map.
Si te fijas en el cdigo, podrs darte cuenta que esta forma de iteracin, a diferencia del for, foreach o while, en este caso, se almacena la informacin para luego extraerla. No se extrae la informacin directamente.

JavaScript ArrayLlegado 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 DiegoGomez
Full Stack Developer