Programación Funcional con Javascript — Higher Order Functions (Map)

En esta serie de blogs estaré explicando en forma básica la programación funcional con Javascript. En el blog anterior te expliqué que son y como funcionan las “Higher Order Functions” y aprendimos a usar “Filter”, si no lo leíste, da click aquí ❤️.En este blog, explicaré la función “Map” 🌎.

Tal como filter, map es otra “Higher Order Function” o Función de alto nivel. Al igual que filter, esta va a través de un Array, pero a diferencia de filter, esta no saca o elimina los objetos, en cambio los transforma.

Veamoslo así:

let pokemons = [
  { name: "pikachu", type: "electric"},
  { name: "charmander", type: "fire"},
  { name: "bulbasaur", type: "grass"},
  { name: "squirtle", type: "water"},
  { name: "flareon", type: "fire"},
  { name: "jolteon", type: "electric"}
]

Sip, estoy utilizando el mismo array de pokemons que el blog anterior. Claramente me gustan 😏Pero esta vez haremos algo un poco diferente. Tomaremos todos los nombres de los pokemons en un nuevo array. Esto es muy simple de hacer con map. Pero primero te mostraré como se ve de la forma “tradicional”:

var names = []
for (var i = 0; i < pokemons.length; i++){
 names.push(pokemons[i].name);
}

El código básicamente hace un loop en el array de pokemons y para cada pokemon, tomará el nombre y lo agregará al nuevo array names.

Ahora hagamos lo mismo, pero utilizando map!

let names = pokemons.map( (pokemon)=> {
 return pokemon.name
}

Recuerdas que te dije que map es una funcion como filter? Map tambien toma un Callback, este pasará cada pokemon como parametro en la función callback. Pero a diferencia de filter, que espera una respuesta de true o false que determinará si el item debe ir o no en el nuevo array, map incluirá todos los items en el array pokemons, pero transformado y estos serán agregados al nuevo array names. En este caso solo queremos los nombres de los pokemon. Cabe destacar que map no modifica el array original.

Como puedes ver, en el ejemplo de map estoy utilizando Arrow Functions de ES6. Si tu código puede escribirse en una sola linea, podemos hacer lo siguiente y el resultado será el mismo:

let names = pokemons.map((x) => x.name)

Bonito, no? 😍

Si quieres saber más sobre map te recomiendo leer MDN web docs 💻💛