No voy a realizar una extensa guía de las equivalencias o un tutorial que enseñe programación funcional, para ello puedes leer mi otro artículo ¿Qué es la programación funcional y por qué es tan especial?, tan solo voy a hablar de las funciones más conocidas que son excelentes para empezar con JavaScript desde un punto de vista orientado a la programación funcional.
Transformación
- filter, de un
arrayextrae varios elementos. - reduce, de un
arraycalcula un valor que devuelve. - map, transforma el contenido de un
array. - fill, sustituye todo el contenido de un
arraycon un nuevo contenido. - find, de un
arrayextrae un solo elemento. - concat, concadena varios
arrayen uno solo. - slice, extrae un fragmente de
arrayde otroarraymás grande, desde una posición determinada a otra.
Conversión
Comprobación
- includes, busca si existe un elemento dentro de un
array. - some, te dice si un
arraycumple la condición en algún momento. - every, igual que
somepero debe cumplirse siempre. - forEach, recorre un
arrayobteniendo su posición y valor.
Ejemplos
Filter
Vamos a obtener todos los nombres que empiecen por ‘M’.
const personajes = ['Homer', 'Marge', 'Lisa', 'Bart', 'Maggie'];
const personajesConM = personajes.filter(nombre => nombre[0] === 'M');
console.log(personajesConM);
// ["Marge", "Maggie"]
Reduce
Vamos a contar cuantas letras tienen todos los nombres.
const personajes = ['Homer', 'Marge', 'Lisa', 'Bart', 'Maggie'];
const totalLetras = personajes.reduce((total, nombre) => total + nombre.length, 0);
console.log(totalLetras);
// 24
Map
En esta ocasión haremos que todo el contenido esté en mayuscula.
const personajes = ['Homer', 'Marge', 'Lisa', 'Bart', 'Maggie'];
const personajesMayusculas = personajes.map(nombre => nombre.toUpperCase());
console.log(personajesMayusculas);
// ["HOMER", "MARGE", "LISA", "BART", "MAGGIE"]
Fill
Puede usarse para obtener un interador, o un array con x huecos. Similar a lo que nos ofrece otros lenguajes como Python con su función range().
Array(4).fill()
// Array(4) [ undefined, undefined, undefined, undefined ]
También puede asignar un valor.
Array(4).fill("Duff")
// Array(4) [ "Duff", "Duff", "Duff", "Duff" ]
E incluso crear un rango.
Array(4).fill().map((valor, indice) => indice);
// [0, 1, 2, 3]
Una versión moderna, ES6 en adelante, sería de la siguiente manera. Realmente útil para usarlo junto a forEach.
[...Array(4).keys()];
// [0, 1, 2, 3]
Vamos a mostrar 3 alertas por consola.
[...Array(3)].forEach((valor, posicion) => {
console.log(`Aviso ${posicion}! Peligro en el reactor.`);
});
// Aviso 0! Peligro en el reactor.
// Aviso 1! Peligro en el reactor.
// Aviso 2! Peligro en el reactor.
Find
Vamos a obtener el primer nombre que empiecen por ‘M’.
const personajes = ['Homer', 'Marge', 'Lisa', 'Bart', 'Maggie'];
const personajeM = personajes.find(nombre => nombre[0] === 'M');
console.log(personajeM);
// "Marge"
Concat
Uniremos el array de los padres con el array de los hijos.
const padres = ['Homer', 'Marge'];
const hijos = ['Lisa', 'Bart', 'Maggie'];
const familia = padres.concat(hijos);
console.log(familia);
// ['Homer', 'Marge', 'Lisa', 'Bart', 'Maggie']
O también.
const padres = ['Homer', 'Marge'];
const hijos = ['Lisa', 'Bart', 'Maggie'];
const familia = [].concat(padres, hijos);
console.log(familia);
// ['Homer', 'Marge', 'Lisa', 'Bart', 'Maggie']
Slice
Obtengo los 3 primeros miembros de la familia.
const familia = ['Homer', 'Marge', 'Lisa', 'Bart', 'Maggie'];
const primeros3 = familia.slice(0, 3);
console.log(primeros3);
// ['Homer', 'Marge', 'Lisa']
Join
Unimos en un string todos los personajes.
const personajes = ['Homer', 'Marge', 'Lisa', 'Bart', 'Maggie'];
const familia = personajes.join('-')
console.log(familia);
// "Homer-Marge-Lisa-Bart-Maggie"
Split
Lo inverso a join, separamos un string por - (en este caso) para disponer de un array.
const texto = "Homer-Marge-Lisa-Bart-Maggie";
const familia = texto.split('-');
console.log(familia);
// ['Homer', 'Marge', 'Lisa', 'Bart', 'Maggie']
Includes
Nos dice si ‘Bart’ forma parte de la familia, independientemente de lo que diga ‘Homer’.
const familia = ['Homer', 'Marge', 'Lisa', 'Bart', 'Maggie'];
if (familia.includes('Bart')) {
console.log('Bart forma parte de la familia');
} else {
console.log('Bart no forma parte de la familia');
}
// Bart forma parte de la familia
Some
Vamos a preguntar si existe algún personaje que se llame Marge, independientemente de si sus letras están en mayúsculas o minúsculas.
const personajes = ['Homer', 'Marge', 'Lisa', 'Bart', 'Maggie'];
const existeUnGG = personajes.some(nombre => nombre.toLowerCase() === 'marge');
console.log(existeUnGG);
// true
Es más avanzado que includes, ya que te permite comprobar con una lógica más compleja.
Every
Vamos a preguntar si todos los nombres tienen la letra “a”. Nos dará un resultado negativo por culpa de “Homer”.
const personajes = ['Homer', 'Marge', 'Lisa', 'Bart', 'Maggie'];
const todosConA = personajes.every(nombre => nombre.includes('a'));
console.log(todosConA);
// false
ForEach
Mostraremos cuantas letras contiene cada nombre.
const personajes = ['Homer', 'Marge', 'Lisa', 'Bart', 'Maggie'];
personajes.forEach((nombre, posicion) => {
console.log(`${nombre} contiene ${nombre.length} letras.`)
});
// Homer contiene 5 letras.
// Marge contiene 5 letras.
// Lisa contiene 4 letras.
// Bart contiene 4 letras.
// Maggie contiene 6 letras.
Herramientas
Avanzado
Si deseas que todas tus funciones tengan un comportamiento como las funciones del ejemplo, puedes apoyarte en Mori, Ramba o el famoso Lodash. Traducen todas ellas para unificar el comportamiento. ¡Ya podrás relajarte con funciones puras!
El libro más recomendado para aprender PF es Learn You a Haskell for Great Good!: A Beginner’s Guide. Se escribió con la intención de explicar a una persona que no tenía ningún concepto de programación como se trabajaba con Haskell, el lenguaje por antonomasia de la programación funcional. Dispones de una versión no oficial en castellano.
Y si quieres olvidarte de parches y realmente escribir programación funcional con todos sus superpoderes en JavaScript puedes valerte de 2 frameworks maravillosos: ClojureScript y Elm.
{{ comments.length }} comentarios