Redactar en todas partes: composición de funciones en JavaScript

La traducción del artículo ha sido preparada especialmente para los alumnos del curso JavaScript Developer.Basic .

---

Introducción

Parece que las bibliotecas Lodash y Underscore ahora son ubicuas y todavía tienen el método de composición súper eficiente que conocemos hoy .



Echemos un vistazo más de cerca a la función de redacción y veamos cómo puede hacer que su código sea más legible, fácil de mantener y elegante.

Los basicos

Cubriremos muchas funciones de Lodash porque 1) no vamos a escribir nuestros propios algoritmos básicos, esto nos distraerá de lo que sugiero enfocarnos; y 2) La biblioteca Lodash es utilizada por muchos desarrolladores y puede ser reemplazada por Underscore, cualquier otra biblioteca o sus propios algoritmos sin ningún problema.



Antes de ver algunos ejemplos simples, echemos un vistazo a lo que hace la función de composición y veamos cómo implementar su propia función de composición si es necesario.

var compose = function(f, g) {
    return function(x) {
        return f(g(x));
    };
};

Esta es la implementación más básica. Tenga en cuenta que las funciones en los argumentos se ejecutarán de derecha a izquierda . Es decir, la función de la derecha se ejecuta primero y su resultado se pasa a la función de la izquierda.



Ahora veamos este código:

function reverseAndUpper(str) {
  var reversed = reverse(str);
  return upperCase(reversed);
}

La función reverseAndUpper primero invierte la cadena especificada y luego la convierte a mayúsculas. Podemos reescribir este código usando la función de composición básica:

var reverseAndUpper = compose(upperCase, reverse);

La función reverseAndUpper ahora se puede utilizar:

reverseAndUpper(''); // 

Podríamos haber obtenido el mismo resultado escribiendo el código:

function reverseAndUpper(str) {
  return upperCase(reverse(str));
}

Esta opción se ve más elegante y es más fácil de mantener y reutilizar.



La capacidad de diseñar funciones rápidamente y crear canales de procesamiento de datos será útil en diversas situaciones en las que necesite transformar datos sobre la marcha. Ahora imagine que necesita pasar una colección a una función, transformar los elementos de la colección y devolver el valor máximo después de que se hayan completado todos los pasos de la canalización, o convertir una cadena dada en un valor booleano. La función de redacción le permite combinar múltiples funciones y así crear una función más compleja.



Implementemos una función de composición más flexible que pueda incluir cualquier número de otras funciones y argumentos. La función de composición anterior que vimos solo funciona con dos funciones y solo toma el primer argumento pasado. Podemos reescribirlo así:

var compose = function() {
  var funcs = Array.prototype.slice.call();
 
  return funcs.reduce(function(f,g) {
    return function() {
      return f(g.apply(this, ));
    };
  });
};

Con una función como esta, podemos escribir código como este:

Var doSometing = compose(upperCase, reverse, doSomethingInitial);
 
doSomething('foo', 'bar');

Hay muchas bibliotecas que implementan la función de redacción. Necesitamos nuestra función de redacción para comprender cómo funciona. Por supuesto, se implementa de manera diferente en diferentes bibliotecas. Las funciones de composición de diferentes bibliotecas hacen lo mismo, por lo que son intercambiables. Ahora que entendemos de qué se trata la función de composición, utilicemos los siguientes ejemplos para ver la función _.compose de la biblioteca Lodash.

Ejemplos de

Comencemos simple:

function notEmpty(str) {
    return ! _.isEmpty(str);
}

La función notEmpty es la negación del valor devuelto por la función _.isEmpty.



Podemos lograr el mismo resultado usando la función _.compose de la biblioteca Lodash. Escribamos la función no:

function not(x) { return !x; }
 
var notEmpty = _.compose(not, _.isEmpty);

Ahora puede usar la función notEmpty con cualquier argumento:

notEmpty('foo'); // true
notEmpty(''); // false
notEmpty(); // false
notEmpty(null); // false

Este es un ejemplo muy simple. Echemos un vistazo a algo

un poco más complicado: la función findMaxForCollection devuelve el valor máximo de una colección de objetos con propiedades id y val (valor).

function findMaxForCollection(data) {
    var items = _.pluck(data, 'val');
    return Math.max.apply(null, items);
}
 
var data = [{id: 1, val: 5}, {id: 2, val: 6}, {id: 3, val: 2}];
 
findMaxForCollection(data);

La función de redacción se puede utilizar para resolver este problema:

var findMaxForCollection = _.compose(function(xs) { return Math.max.apply(null, xs); }, _.pluck);
 
var data = [{id: 1, val: 5}, {id: 2, val: 6}, {id: 3, val: 2}];
 
findMaxForCollection(data, 'val'); // 6

Aquí hay trabajo por hacer.



_.pluck espera una colección como primer argumento y una función de devolución de llamada como segundo. ¿Es posible aplicar parcialmente la función _.pluck? En este caso, puede utilizar currying para cambiar el orden de los argumentos.

function pluck(key) {
    return function(collection) {
        return _.pluck(collection, key);
    }
}

La función findMaxForCollection necesita modificarse un poco más. Creemos nuestra propia función máxima.

function max(xs) {
    return Math.max.apply(null, xs);
}

Ahora podemos hacer que nuestra función de redacción sea más elegante:

var findMaxForCollection = _.compose(max, pluck('val'));
 
findMaxForCollection(data);

Escribimos nuestra propia función de extracción y solo podemos usarla con la propiedad 'val'. Es posible que no comprenda por qué debería escribir su propio método de búsqueda si Lodash ya tiene una función conveniente y lista para usar _.pluck. El problema es que _.pluckespera una colección como primer argumento y queremos hacerlo de manera diferente. Al cambiar el orden de los argumentos, podemos aplicar parcialmente la función pasando la clave como primer argumento; la función devuelta aceptará datos.

Podemos refinar un poco más nuestro método de muestreo. Lodash tiene un método útil _.curryque te permite escribir nuestra función así:

function plucked(key, collection) {
    return _.pluck(collection, key);
}
 
var pluck = _.curry(plucked);

Simplemente ajustamos la función de extracción original para intercambiar los argumentos. Ahora, pluck devolverá la función hasta que haya procesado todos los argumentos. Veamos cómo se ve el código final:

function max(xs) {
    return Math.max.apply(null, xs);
}
 
function plucked(key, collection) {
    return _.pluck(collection, key);
}
 
var pluck = _.curry(plucked);
 
var findMaxForCollection = _.compose(max, pluck('val'));
 
var data = [{id: 1, val: 5}, {id: 2, val: 6}, {id: 3, val: 2}];
 
findMaxForCollection(data); // 6

La función findMaxForCollection se puede leer de derecha a izquierda, es decir, primero la propiedad val de cada elemento de la colección se pasa a la función y luego devuelve el máximo de todos los valores aceptados.

var findMaxForCollection = _.compose(max, pluck('val'));

Este código es más fácil de mantener, reutilizable y mucho más elegante. Veamos el último ejemplo, solo para disfrutar de la elegancia de la composición funcional una vez más.



Tomemos los datos del ejemplo anterior y agreguemos una nueva propiedad llamada active. Ahora los datos se ven así:

var data = [{id: 1, val: 5, active: true}, 
            {id: 2, val: 6, active: false }, 
            {id: 3, val: 2, active: true }];

Llamemos a esta función getMaxIdForActiveItems (data) . Toma una colección de objetos, filtra todos los objetos activos y devuelve el valor máximo de los filtrados.

function getMaxIdForActiveItems(data) {
    var filtered = _.filter(data, function(item) {
        return item.active === true;
    });
 
    var items = _.pluck(filtered, 'val');
    return Math.max.apply(null, items);
}

¿Puedes hacer que este código sea más elegante? Ya tiene las funciones max y pluck, por lo que solo necesitamos agregar un filtro:

var getMaxIdForActiveItems = _.compose(max, pluck('val'), _.filter);
 
getMaxIdForActiveItems(data, function(item) {return item.active === true; }); // 5

_.filterEl mismo problema surge con la función que con _.pluck: no podemos aplicar parcialmente esta función, porque espera una colección como primer argumento. Podemos cambiar el orden de los argumentos en el filtro envolviendo la función inicial:

function filter(fn) {
    return function(arr) {
        return arr.filter(fn);
    };
}

Agreguemos una función isActiveque toma un objeto y verifica si la bandera activa está configurada como verdadera.

function isActive(item) {
    return item.active === true;
}

Una función filtercon una función isActivese puede aplicar parcialmente, por lo que solo pasaremos datos a la función getMaxIdForActiveItems .

var getMaxIdForActiveItems = _.compose(max, pluck('val'), filter(isActive));

Ahora solo necesitamos transferir datos:

getMaxIdForActiveItems(data); // 5

Ahora nada nos impide reescribir esta función para que encuentre el valor máximo entre los objetos inactivos y lo devuelva:

var isNotActive = _.compose(not, isActive);

var getMaxIdForNonActiveItems = _.compose(max, pluck('val'), filter(isNotActive));

Conclusión

Como habrá notado, la composición de funciones es una característica interesante que hace que su código sea elegante y reutilizable. Lo principal es aplicarlo correctamente.

Enlaces

lodash ¡Oye, subrayado

, lo estás haciendo mal! (¡Oye, subrayado, lo estás haciendo todo mal!)

@sharifsbeat

Lee mas:

• ¿Por qué es un anti-patrón?