9gustin

Arrays en Javascript 📚 | cap. 1

Los arrays son un tipo de dato muy importante, están en todos lados y hoy en día tenemos muchos métodos que nos permiten manipularlos a nuestro gusto y necesidad. Es importante conocerlos así nos ahorramos tiempo y muchísimas líneas de código.

El objetivo es dejar de usar un for para todo con una variable auxiliar que vaya guardando un valor temporal que queremos generar desde un array.

Particularmente en este articulo vamos a ver como recorrer, modificar, realizar sumas y hacer validaciones sobre un array(forEach, map, reduce, some y every).

Qué es un array?

Antes que nada, repasemos que es un array:

Los arrays son objetos similares a una lista cuyo prototipo proporciona métodos para efectuar operaciones de recorrido y de mutación. Tanto la longitud como el tipo de los elementos de un array son variables.

Referencia: developer.mozilla

Un ejemplo de un array que contiene frutas:

const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];

Tal como dice la definición, al fruits ser una constante de tipo array contamos con métodos disponibles particulares de los arrays, como por ejemplo: forEach, map, filter. Ya los vamos a ir viendo en detalle, pero lo importante es saber que yo podría acceder a estos métodos de la siguiente manera:

fruits.forEach(fn)

fruits.map(fn)

Cada uno de estos métodos recibe como parámetro una función de callback y la ejecutara con cada uno de los elementos del array.

Para poder demostrar todos los métodos vamos a tomar como ejemplo un carrito de compras. Arme este ejemplo: https://pastebin.com/L080jMvS . Por lo tanto en todas las secciones vamos a utilizar el listado de productos de la variable buyOrder.

Recorrer un array

Este caso es uno de los mas simples, ya que es muy similar al for común. El objetivo es recorrer un array, pasando por cada uno de los ítems y ejecutando una función con cada uno de ellos. Para esto vamos a utilizar el método forEach.

Nota: Esto sirve para hacer algo en base a los elementos de un array, no podes modificar el elemento en el array. Es decir, no podría hacer un forEach para modificar los elementos de un array ni sus propiedades.

  • Ejemplos

    Por ejemplo, podemos recorrer el array de productos e imprimir los productos que el usuario esta llevando con un índice.

    function printProducts(element, index) {

    console.log(`Item ${index + 1}. Llevas ${element.quantity} ${element.product}`);

    }

    buyOrder.products.forEach(printProducts);

    // Esto va a imprimir en la consola:

    // Item 1. Llevas 2 Orange

    // Item 2. Llevas 1 Mango

    // Item 3: Llevas 1 Banana

    Dos consideraciones. Es posible ejecutar una función sin declararla, es decir, pasándola como argumento del forEach. Y dos, no es obligatorio recibir ambos parámetros. Por lo tanto, la siguiente forma es valida tambien:

    buyOrder.products.forEach((element) ⇒ {

    console.log(`Llevas ${element.quantity} ${element.product}`);

    });

    // Esto va a imprimir en la consola:

    // Llevas 2 Orange

    // Llevas 1 Mango

    // Llevas 1 Banana

Modificar un array

Cuando queremos modificar un array solemos utilizar el metodo map. Esto nos permite recorrer un array e ir alterando cada elemento.

Con el método map podemos alterar completamente el elemento, es decir, podemos mutar su tipo, agregar o quitar propiedades. Acá es importante tener en cuenta que la función de callback que se le pase debe tener un return, que va a representar como queda cada elemento dentro del array.

Básicamente la función se encargara de convertir el elemento, recibiéndolo como esta originalmente en el array, transformándolo como se desee y retornando el nuevo valor que se quiere dejar en el array nuevo.

Nota: El map no afecta el array original, sino que retorna la nueva lista alterada.

  • Ejemplos

    Por ejemplo, podríamos modificar la lista de productos de nuestra orden de compra agregándole el total de cada producto con su cantidad. Esto nos servirá para luego calcular el total de la compra.

    Entonces haríamos lo siguiente:

    function setTotal(element) {

    element.total = element.unitPrice * element.quantity;

    return element;

    }

    buyOrder.products.map(setTotal);

    En donde element es el elemento original de la lista, setTotal se encarga de asignarle el total(multiplicando el precio unitario por la cantidad de productos que lleva) y luego retornamos el elemento alterado.

    Pero como vimos antes, esto no modifico el listado de productos de la orden, para eso tenemos que asignarle el valor a la propiedad products de la siguiente manera:

    buyOrder.products = buyOrder.products.map(setTotal);

Y listo, ahora nuestro carrito de compras quedaría así: https://pastebin.com/QahYeCU7

Sumando/restando elementos

Para esto tenemos el método reduce, este reduce el array a un valor único. Pasando por los elementos de un array y incrementando su acumulado. Con reduce podríamos aplicar sumas, restas, multiplicaciones, o en caso de strings concatenar valores para formar uno.

La función de callback que se le pase recibe como primer parámetro el valor acumulado y el elemento actual de la lista. reduce además de recibir la función de callback acepta como segundo parámetro un valor inicial, en nuestro caso utilizaremos cero.

  • Ejemplos

    Esta función, al igual que el map no modifica el array, por lo tanto tenemos que asignar el resultado a donde corresponda. En este caso vamos a calcular el total de la compra, sumando los totales de cada producto.

    const initialValue = 0;

    buyOrder.total = buyOrder.products.reduce((accumulated, element) => {

    return accumulated + element.total;

    }, initialValue);

Después de esto el objeto buyOrder quedará así: https://pastebin.com/6H3P9CSB

Haciendo validaciones sobre el carrito

Para esto tenemos dos métodos, every y some.

every sirve para validar que todos los elementos del array coincidan con mi validación, en caso de que TODOS los elementos del array pasen la validación retornara true, sino false.

some sirve para validar que al menos un elemento cumpla con la validación que estamos aplicando. Si aunque sea uno la cumple devolverá true sino false.

Ambos métodos retornan un valor booleano.

  • Ejemplos

    Un ejemplo para el every podría ser una validación de stock. Tenemos una lista de productos que tenemos en stock y tenemos en el carrito un elemento que no esta en stock no se debería poder efectuar la compra.

    Supongamos que esta es mi lista de productos en stock:

    const inStockProducts = ['Orange', 'Apple', 'Blackberry', 'Mango', 'Grape', 'Peach', 'Banana', 'Strawberry'];

    Entonces para validar sobre buyOrder.products deberíamos hacer lo siguiente:

    if (buyOrder.products.every((element) ⇒ {

    return inStockProducts.some(product ⇒ product === element.product)

    })){ // continue }

    else {

    alert('Productos sin stock! :(')

    }

    También le metimos un some, básicamente lo que hicimos fue preguntar si todos los elementos del array de productos cumplen con la validación: "Alguno de los elementos del array de productos en stock se llama igual que el producto".

    Estos métodos se pueden ejecutar por separado y no pasa nada, fue un ejemplo.

Finalizando ;)

Voy a estar escribiendo otro blog para otro grupo de métodos para arrays importantes que son:

  • Buscar en un array (find, filter, findIndex)
  • Ordenar un array(sort)
  • Quitar un elemento de un array(filter, o splice)
  • Convertir un array a un elemento

Pero mientras te dejo un link por si queres ir viendo los métodos de un array!

Referencia:

w3schools

Volver