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

En esta serie haré pequeños post sobre como utilizar programación funcional con Javascript. En este primer articulo, explicaré que son y como funcionan las “Higher Order Functions”.

¿Por qué aprender programación funcional?

La programación funcional es una de las formas más útiles de programar. Aprender a utilizarla, te ayudará a escribir tus programas con menos bugs y en menos tiempo. Tu código tendrá menos bugs porque este será mas fácil de entender, y escribirás en menos tiempo porque podrás re utilizar partes de código.

Higher Order Functions!

En Javascript las funciones son valores.

function mutiply(x){
 return x * 3
}

Puedes entender esto aunque no sepas Javascript porque todos los lenguajes de programación tienen funciones. Pero no todos los lenguajes pueden hacer esto:

let multiply = (x) =>{
 return x * 3
}

Crear una función anónima y asignarla a una variable. Y como cualquier otro valor, la podemos pasar entre otras variables, así:

let multiply = (x) =>{
 return x * 3
}
let result = multiply;
result(30)  // Output 90

Tal como un string o un número, una función puede ser asignada a una variable, o ser pasada entre otras funciones: “Higher Order Functions”.

Pero, ¿para qué sirven las “Higher Order Functions”?

Bueno, sirven para hacer composición: El poder tomar una función y pasarla dentro de otra función nos permite crear muchas funciones pequeñas y de estas crear funciones más grandes.

Veamos un ejemplo: filter es una de las funciones más básicas y útiles. Esta es una función en un array que toma otra función como argumento que se usará para retornar una nueva versión del array filtrado.

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"}
]

Aquí tenemos un array con pokemons, cada uno tiene un nombre y un tipo (elemento). Quiero tomar solamente los pokemons de tipo fuego o “fire”. Haciéndolo en la forma “tradicional” se vería así:

let pokeFire = []
for (var i = 0; i < pokemons.length; i++){
 if (pokemons[i].type === 'fire'){
  pokeFire.push(pokemons[i]);
 }
}

Esto es básicamente un for loop que itera sobre cada elemento del array pokemons y agrega a un nuevo array pokeFire los pokemons que sean de elemento fuego. Ahora veamos como se vería con filter:

let pokeFire = pokemons.filter( (pokemon)=>{
 return pokemon.type === 'fire'
})

Filter acepta una función como argumento. Este tipo de funciones son Callbacks. Filter iterará en cada elemento del array pokemons y pasará cada elemento dentro del callback. Lo que hace es que espera una respuesta del callback, siendo true si se cumple con el código dentro de la función o false en caso de que no se cumpla. Si es true, el elemento del array será agregado al nuevo array pokeFire.

Si comparamos las dos funciones que utilizamos, la opción de filter utiliza mucho menos código que el for loop. La razón es que cuando escribimos nuestro código en pequeñas funciones, estas se componen entre si. Lo que nos permite re utilizar las funciones en todo el código.

Para entender mejor, podemos hacer lo siguiente:

let isFire = (pokemon)=>{
 return pokemon.type === 'fire'
}
let pokeFire = pokemons.filter(isFire)

Aquí podemos ver que isFire es solo una función que evalúa si un pokemon es de tipo ‘fire’. No tiene nada que ver con la función pokeFire (filter), es independiente de esta, entonces podemos re utilizarla en caso de ser necesario, por ejemplo creando un array con pokemons que no sean de tipo fuego. (pero ¿quien haría eso? todos amamos los tipo fire 🔥💛)

Existen muchas otros metodos que nos permiten codear de forma más simple y rápida. En los próximos artículos explicaré algunas de ellas como map y reduce. ❤️