¿Cómo recorrer un Array en Javascript?

En JavaScript una de las maneras más sencillas de recorrer un array es utilizando el ciclo for. Este es un ejemplo de cómo puedes usarlo para recorrer un array:

1let people = ["Joe", "Mary", "Phill", "Carlos"];
2
3for (let i = 0; i < people.length; i++){
4   console.log("Hello", people[i]); 
5}
6
7// output
8// Hello Joe
9// Hello Mary
10// Hello Phill
11// Hello Carlos

El código anterior, recorre el array de personas (people) e imprime cada uno de los valores luego de hello. Más adelante se explica a más detalle cada parte de este ciclo para que puedas entenderlo y usarlo a tu conveniencia.

Arrays y for loops

Los Arrays o arrays en Javascript ayudan a agrupar múltiples elementos de manera secuencial y proporcionan maneras de acceder a la información en base a su posición, iniciando desde el 0.

Los for loops son una herramienta particularmente útil para realizar acciones sobre valores almacenados en un array. Los for loops permiten programar bloques de código que se ejecutan de manera iterativa.

Un ejemplo sencillo para visualizar estos dos conceptos en conjunto, podemos imaginarnos un array llamada years que contiene años donde ha ocurrido una operación.

1const years = [2018, 2019, 2020, 2021, 2022];
2
3for (let i = 0; i < years.length; i++) {
4    console.log(years[i]);
5}
6
7// Output:
8// 2018
9// 2019
10// 2020
11// 2021
12// 2022

Este código imprime en la consola todos los valores guardados adentro de years.

Funciones para recorrer un array en JavaScript

Javascript provee muchas herramientas para recorrer arrays, optimizando acciones sobre los mismos, a continuación, se mencionan los mas comunes y versátiles.

For Loop

Es el mas sencillo y genérico. Como se menciona anteriormente, permite ejecutar un bloque de código un numero determinado de veces. La sintaxis básica de un for loop es el siguiente:

1for (inicialización; condición; iteración) {
2    código a ejecutar; 
3}

El for loop tiene 4 elementos principales:

1. Inicialización: se especifica la variable que controla la operación del for.
2. Condición: la condición controla cuando se deja de ejecutar el for.
3. Iteración: determina la modificación sobre la variable control para controlar el flujo.
4. Código: se programa el código que se va a ejecutar cada vez que la condición se siga cumpliendo.

En este ejemplo se pondrá todo en práctica:

Se tienen unos números guardados dentro de un array numeros y se quiere sumar 1 a todos los elementos dentro del array y luego imprimirlos a la consola

1let numeros = [5,8,13,6,9]
2
3for (let index = 0; index < numeros.length; index++) {
4    console.log(numeros[index]+1)
5}
6
7//output
8//6
9//9
10//14
11//7
12//10

For In

For… In se utiliza principalmente para iterar sobre las propiedades enumerables de un objeto o arreglo.

1const marcas = ['apple', 'google', 'meta'];
2
3for (let prop in vehiculo) {
4  console.log(prop + ': ' + marcas [prop]);
5}
6
7//output
8//"0: apple"
9//"1: google"
10//"2: meta"

For Of

Es muy similar al for loop, sin embargo, es más amigable en su sintaxis, sin tener que lidiar con la inicialización, condiciones o iteraciones. For of itera sobre cada elemento iterable uno por uno, y ejecuta el código dentro del bloque. Por ejemplo, si queremos imprimir en consola los elementos de un array, podemos hacer lo siguiente:

1const marcas = ['apple', 'google', 'meta'];
2for (let marca of marcas) {
3  console.log(marca);
4}
5
6//output
7//"apple"
8//"google"
9//"meta"
10

While

While es muy similar a un for, con un detalle muy importante. While se controla mediante una condición únicamente. Es decir, mientras la condición se cumpla el while nunca deja de correr.

1let contador = 10
2while (contador > 0) {
3  console.log(contador);
4  contador--;
5}
6
7//output
8//10
9//9
10//8
11//7
12//6
13//5
14//4
15//3
16//2
17//1

Esto hace que se pueda utilizar hasta lograr encontrar un valor o programarlo para una condición muy específica y dejar de correr hasta entonces, sin pensar en contadores necesariamente.

Existe una variación llamada do…while, que funcionalmente es igual a while, solo que se asegura que el bloque de código se ejecute al menos 1 vez. Tomando el ejemplo anterior y modificando la sintaxis se utiliza de la siguiente manera:

1let contador = 10
2do {
3  console.log(contador);
4  contador--;
5} while (contador > 0);
6
7//output
8//10
9//9
10//8
11//7
12//6
13//5
14//4
15//3
16//2
17//1

Map

Map es un método que se utiliza para transformar un arreglo existente, guardándolo en un nuevo arreglo. Se itera sobre cada elemento dentro del arreglo, ejecutando una función para realizar la transformación.

1const marcas = ['apple', 'google', 'meta'];
2const marcas_descritas = marcas.map(function(marca) {
3  return `${marca} es increíble`
4});
5
6console.log(marcas_descritas)
7
8//output
9//["apple es increíble", "google es increíble", "meta es increíble"]

For Each

For each es un metodo que toma como base un array y para cada elemento existente dentro del array se ejecuta una función. Dentro de la función se pasa como parámetro el elemento del array.

1const marcas = ['apple', 'google', 'meta'];
2marcas.forEach(function(marca) {
3  console.log(marca)
4});
5
6//output
7//"apple"
8//"google"
9//"meta"

Ejemplos de cómo recorrer un array en JavaScript

Modificar precios debido a inflación

Se tiene un sitio que muestra el menú de un restaurante junto con sus precios. Todos los precios se guardan en un array llamado precios, se necesita incrementar los precios de todos los productos por un 10% debido a inflación. Para este ejemplo la herramienta ideal es map, ya que permite realizar modificaciones sobre todos los elementos del arreglo, ahorrando el trabajo de hacerlo manual.

1const precios = [20.00, 30.00, 28.00, 36.00, 23.00, 55.00]
2
3const precios_ajustados = precios.map(function(precio){
4  return precio*1.1
5})
6
7console.log(precios_ajustados)
8
9//output
10//[22, 33, 30.80, 39.6, 25.3, 60.50]

Sumar valores positivos

Se quiere permitir a un usuario sumar números positivos, sin embargo, en caso que el usuario introduzca un numero negativo, se toma como terminada la operación y se devuelve el resultado. Para lograr esto, se utiliza un while loop principalmente por que no se tiene un numero definido de iteraciones a realizar.

1let suma = 0;
2let numero = parseInt(prompt('Ingrese un número: '));
3
4while(numero >= 0) {
5    suma += numero;
6    numero = parseInt(prompt('Ingrese un número: '));
7}
8
9console.log(`La suma es ${suma}.`);
10
11//output
12//Para este ejemplo imaginemos que el usuario ingresa 15 y -6
13//la suma es 15

Existen muchas maneras de utilizar estas herramientas iterativas en Javascript, desde recorrer arrays hasta objetos y para el caso particular de los while loops, repetir un bloque de código hasta que se cumpla una condición deseada.

Esperamos que hayas disfrutado de este artículo y que encuentres la información útil para recorrer y manipular arrays en JavaScript. Te invitamos a explorar otros recursos en nuestro blog para mejorar tus habilidades de programación este y muchas otras tecnologías. Si deseas llevar tu aprendizaje al siguiente nivel, te animamos a registrarte de forma totalmente gratuita en 4Geeks.com.