Breve introducción a la programación funcional en 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 , tan solo voy a hablar de las funciones más conocidas que son excelentes para empezar con Javascript.

Find

Vamos a obtener el primer nombre que empiecen por ‘M’.

let personajes = ['Homer', 'Marge', 'Lisa', 'Bart', 'Maggie'];
let personajeM = personajes.find((nombre) => nombre[0] === 'M');
// "Marge"

Filter

Vamos a obtener todos los nombres que empiecen por ‘M’.

let personajes = ['Homer', 'Marge', 'Lisa', 'Bart', 'Maggie'];
let personajesConM = personajes.filter((nombre) => nombre[0] === 'M');
// ["Marge", "Maggie"]

Reduce

Vamos a contar cuantas letras tienen todos los nombres.

let personajes = ['Homer', 'Marge', 'Lisa', 'Bart', 'Maggie'];
let totalLetras = personajes.reduce((total, nombre) => total += nombre.length, 0);
// 24

Map

En esta ocasión haremos que todo el contenido esté en mayuscula.

let personajes = ['Homer', 'Marge', 'Lisa', 'Bart', 'Maggie'];
let personajesMayusculas = personajes.map((nombre) => nombre.toUpperCase());
// ["HOMER", "MARGE", "LISA", "BART", "MAGGIE"]

Some

Vamos a preguntar si existe algún personaje que tenga en su nombre un ‘gg’ (doble ‘g’).

let personajes = ['Homer', 'Marge', 'Lisa', 'Bart', 'Maggie'];
let existeUnGG = personajes.some((nombre) => nombre.includes('gg'));
// true

Every

Vamos a preguntar si todos los nombres tienen la letra “a”. Nos dará un resultado negativo por culpa de “Homer”.

let personajes = ['Homer', 'Marge', 'Lisa', 'Bart', 'Maggie'];
let todosConA = personajes.every((nombre) => nombre.includes('a'));
// false

ForEach

Mostraremos cuantas letras contiene cada nombre.

let 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.

Fill

Puede usarse para obtener un interador, o un array con x huecos. Similar a lo que nos ofrece otros lenguajes como Python y 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" ]

Una versión moderna, ES6 en adelante, sería de la siguiente manera. Realmente útil para usarlo junto a forEach.

[...Array(4)]
// Array(4) [ undefined, undefined, undefined, undefined ]

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.

Algunas herramientas o recursos

Si quieres continuar tu viaje por la programación funcional aplicado a Javascript te recomiendo para las variables inmutables una librería llamada .

Si deseas que todas tus funciones tengan un comportamiento como las funciones del ejemplo, nada mejor que . Traducen todas ellas para unificar el comportamiento. ¡Es el lodash de la programación funcional en Javascript!

El libro más recomendado para aprender PF es . 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 .

Y si quieres olvidarte de parches y realmente escribir programación funcional con todos sus superpoderes en Javascript puedes valerte de 2 frameworks maravillosos: y .

Versión escritorio