Breve introducción a la programación funcional en Javascript | Programador Web Valencia

Breve introducción a la programación funcional en Javascript

4 minutos

JavaScript

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.

Cheat Sheet PF JavaScript

Descarga versión PDF

Transformación

  • filter, de un array extrae varios elementos.
  • reduce, de un array calcula un valor que devuelve.
  • map, transforma el contenido de un array.
  • fill, sustituye todo el contenido de un array con un nuevo contenido.
  • find, de un array extrae un solo elemento.
  • concat, concadena varios array en uno solo.
  • slice, extrae un fragmente de array de otro array más grande, desde una posición determinada a otra.

Conversión

  • join, conviertes un array en un string.
  • split, conviertes un string en un array.

Comprobación

  • includes, busca si existe un elemento dentro de un array.
  • some, te dice si un array cumple la condición en algún momento.
  • every, igual que some pero debe cumplirse siempre.
  • forEach, recorre un array obteniendo 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.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

Comprame un café
Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario

Tal vez también te interese...