5 formas de recorrer un array con JavaScript
Tags: javascript, beginners, programming, frontend
Published: 2022-02-16 09:16:29

> 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