Javascript – la función map

Javascript map functio

Mediante la función map es posible crear un nuevo arreglo a partir de uno existente, tan simple como eso ¿o no?.

Puedes ver este mismo artículo en mi canal de Youtube, y no olvides suscribirte subo videos con regularidad:

Sin lugar a duda, la función map es una de las más importantes al momento de trabajar con arreglos, pues permite iterar y controlar la forma en que procesaremos cada unos de los elementos del arreglo en un solo paso. Veamos el siguiente ejemplo:

Cómo podemos comprobar en el fragmento de código anterior, la función map siempre regresará un nuevo arreglo, dejando intacto el arreglo origen, esto es importante por que mantiene la inmutabilidad del array origen, permitiendo crear tantas variantes del arreglo original sin afectar el original.

La función map recibe cómo parámetro una función (callback) la cual se ejecutará para cada elemento del array, sin embargo, en ECMAScript 6 es posible utiliza Arrow Functions en lugar de una callback. Veamos las diferencias:

Con la función map es posible no solo procesar arrays de tipos primitivos, si no que podemos procesar objetos completos. Veamos este otro ejemplo:

En este nuevo ejemplo hemos convertido un arreglo de ordenes a un nuevo arreglo más simple. Por si no lo notaste, hemos simplificado el array origen, al pasar el nombre del cliente directamente sobre el objeto de la orden.

Ahora bien, podemos utilizar la función map de forma anidada, para simplificar los arrays todavía más. Imagina que las ordenes anteriores puedan tener dentro un array de productos, y necesitemos sacar solo los productos y el cliente al que pertenece:

En este nuevo ejemplo hemos pasado de un array con un objeto muy complejo a un un array con tan solo el nombre del cliente y el producto, evitando tener toda la estructura original.

Sin embargo, hay un pequeño detalle, y es que el nuevo array generado es un array de arrays, es decir, todos los productos de un mismo clientes están dentro de un array, esto se debe a que el map que usamos sobre los productos retorna un array, y luego, ese array es retornado para el map que usamos sobre el objeto orders, y como map regresa un array, entonces lo que hace es generar un array con cada array retornado por los products.

Para solucionar este problema es necesario utiliza la función reduce de la que hablaremos en otra ocasión. Déjanos un comentario si quieres que continuemos hablando de la función reduce.

Hace un momento dijimos que map recibe una función, sin embargo, falto detallar que esta función puede recibir 3 parámetros, los cuales son los siguientes:

  • currentValue: elemento actual que se esta procesando.
  • index: corresponde a la posición (index) donde se encuentra el currentValue dentro del array.
  • array: corresponde al array original que estamos procesando.

Cabe mencionar que si bien la función map no muta el array original, hay que tener cuidado con el parámetro array, pues dentro de la función callback podríamos mutar el array original, lo cual es un anti-patrón, pues debemos respetar la inmutabilidad de los parámetros.

Conclusiones

Cómo hemos podido observar, la función map es muy util para crear variaciones de un array, permitiendo en un solo paso, crear un array a partir de otro.



Artículos relacionados


Introducción a React JS React es sin duda una de las tecnologías web más revolucionarias de la actualidad, pues proporciona todo un mecanismo de desarrollo de aplicaciones t...
WebSocket con Java En este artículo aprenderemos a implementar WebSocket con Java, ya que en el pasado ya había dado una completa Introducción a los WebSocket y explicam...
Componentes con estado y sin estado Una característica de los componentes, es su estado, el cual determina tanto la información que se muestras en pantalla, hasta como se representa la...
React Props (Propiedades) Las propiedades son la forma que tiene React para pasar parámetros de un componente padre a los hijos.normal que un componente pase datos a los compon...
Javascript – la función filter La función filter permite filtrar los elementos de un array y generar uno nuevo con todos los elementos que cumplen una determinada condición. ...
Javascript – Async/Await La finalidad de los operadores async y await es simplificar aun más la forma en que trabajamos con las promesas, de tal forma que permite ejecuta...
Introducción a WebWorkers   Los WebWorkers son una de las nuevas características de JavaScript que permite crear aplicaciones multiprocesos. Desde su inicio JavaScript ...
Javascript se está comiendo el mundo https://www.youtube.com/watch?v=JrAFUc4LkCE Es impresionante pensar como JavaScript, un lenguaje desarrollados en los 80’s con el único objetivo prop...
Las 4 formas de crear un componentes en React Debido a que React está creado bajo el lenguaje de programación JavaScript, este también depende de su sintaxis para construir y declarar sus componen...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *