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:
let numArray = [1,2,3,4,5,6,7,8,9,10]
let numArray2 = numArray.map(current => current*2)
console.log("numArray => ", numArray)
console.log("numArray2 => ", numArray2)
// Output
// numArray => [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
// numArray2 => [ 2, 4, 6, 8, 10, 12, 14, 16, 18, 20 ]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:
//ECMAScript 6
let numArray2 = numArray.map(current => current*2)
//ECMAScript 5
var numArray2 = numArray.map(function(current) {
return current*2}
)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:
let orders = [
{
orderNum: 1,
total: 100,
customer: {
name: "Oscar Blancarte"
}
},{
orderNum: 2,
total: 200,
customer: {
name: "Carlos Raygoza"
}
},{
orderNum: 3,
total: 300,
customer: {
name: "Andres Bedoya"
}
}
]
let simpleOrders = orders.map(order => {return {orderNum: order.orderNum, total: order.total, customerName: order.customer.name}})
console.log("orders => ", orders)
console.log("simpleOrders => ", simpleOrders)
// orders => [ { orderNum: 1,
// total: 100,
// customer: { name: 'Oscar Blancarte' } },
// { orderNum: 2, total: 200, customer: { name: 'Carlos Raygoza' } },
// { orderNum: 3, total: 300, customer: { name: 'Andres Bedoya' } } ]
// simpleOrders => [ { orderNum: 1, total: 100, customerName: 'Oscar // Blancarte' },
// { orderNum: 2, total: 200, customerName: 'Carlos Raygoza' },
// { orderNum: 3, total: 300, customerName: 'Andres Bedoya' } ]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:
let orders = [
{
customer: {
name: "Oscar Blancarte"
},
products: [
{
id: 1,
name: "Banana"
},{
id: 2,
name: "strawberry"
}
]
},{
customer: {
name: "Carlos Raygoza"
},
products: [
{
id: 3,
name: "apple"
},{
id: 2,
name: "strawberry"
}
]
},{
customer: {
name: "Andres Bedoya"
},
products: [
{
id: 4,
name: "Watermelon"
},{
id: 2,
name: "apple"
},{
id: 1,
name: "Banana"
}
]
}
]
let simpleOrders = orders.map(order => {
return order.products.map(product => {return {customer: order.customer.name, product: product.name}})
})
console.log("simpleOrders => ", simpleOrders)
// simpleOrders => [ [ { customer: 'Oscar Blancarte', product: 'Banana' },
// { customer: 'Oscar Blancarte', product: 'strawberry' } ],
// [ { customer: 'Carlos Raygoza', product: 'apple' },
// { customer: 'Carlos Raygoza', product: 'strawberry' } ],
// [ { customer: 'Andres Bedoya', product: 'Watermelon' },
// { customer: 'Andres Bedoya', product: 'apple' },
// { customer: 'Andres Bedoya', product: 'Banana' } ] ]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.