Why The Hipsters Compose Everything

Functional Composition In JavaScript

Introduction

Lodash and Underscore are everywhere and still there is this one super efficient method that actually only those hipsters use: compose.

We will take a deeper look into compose and along the way learn the ins and outs of why this method will make your code more readable, more maintainable and a lot more elegant.

The Basics

We will be using a lot of lodash functions, just be cause a.) we don’t want to write our own low level implementations as they would distract from what we’re trying to focus on and b.) lodash is widely used and could easily be replaced with underscore or other libraries or your own implementation if you need to.

Before we dive into some basic examples, let us recap what compose actually does and how we could implement our own compose function if needed to.

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

This is the most basic implementation. Taking a closer look at the function above, you will notice that the passed in functions are actually applied right to left. Meaning that the result of the right function is passed on to the function left of it.

Now take a closer look at this code:

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

A function reverseAndUpper that first reverses the given string and then upper cases it. We can rewrite the following code with the help of our basic compose function:

var reverseAndUpper = compose(upperCase, reverse);

Now we can use reverseAndUpper as follows:

reverseAndUpper('test'); // TSET

This is equivalent to writing:

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

only more elegant, maintainable and reusable.

The ability to quickly compose functions and create a data pipeline can be leveraged in a number of ways enabling data transformation along the pipeline. Imagine passing in a collection, mapping over the collection and then returning a max value at the end of the pipeline or turning a given string into a boolean. Compose enables us to easily connect a number of functions together to build more complex functions.

Let us implement a more flexible compose function which can handle any number of functions as well as any number of arguments. The previous compose only works with two functions and only accepts the first passed in argument. We can rewrite the compose function as follows:

var compose = function() {
  var funcs = Array.protoype.slice.call(arguments);

  return funcs.reduce(function(f,g) {
    return function() {
      return f(g.apply(this, arguments));
    };
  });
};

This compose enables to write something like this:

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

A large number of libraries exist that implement compose for us. Our compose function should only help in understanding what’s really happening inside underscores or scoreunders compose function and obviously the concrete implementations vary between the libraries. They still do the same thing mostly, making their respective compose functions interchangeable. Now that we have an idea about what compose is all about, let us use the lodash _.compose function for the next set of examples.

Examples

Let’s get started with a very basic example:

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

The notEmpty function simply negates the result of _.isEmpty.

We can achieve the same by using lodash’s _.compose and writing a not function:

function not(x) { return !x; }

var notEmpty = _.compose(not, _.isEmpty);

We can call notEmpty on any given argument now;

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

This first example is super simple, the next one is more advanced:

findMaxForCollection returns the max id for a given collection of objects consisting of id and value properties.

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);

The above example could be rewritten with the compose function:

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

There is a lot we can refactor here.

_.pluck expects the collection as the first and the property name (thanks @jurstv) as the second argument. What if we could partially apply _.pluck? We can use currying to flip the arguments in this case.

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

Our findMaxForCollection still needs more refinement, we could create our own max function:

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

This enables us to rewrite the compose function to something more elegant:

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

findMaxForCollection(data);

By writing our own pluck function we are able to partially apply pluck with ‘val’. Now you could obviously argue, why even write your own pluck method, when lodash already has that handy _.pluck function. The problem here is that _.pluck expects the collection as the first argument, which is what we don’t want. By flipping the arguments around we were able to partially apply the key first, only needing to call the data on the returned function.

We can still further rewrite the pluck method. Lodash comes with a handy method _.curry, which enables us to write our pluck function as follows:

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

var pluck = _.curry(plucked);

We simply want to wrap around the original pluck function just so we can flip the arguments. Now pluck simply keeps returning a function until all the arguments have been supplied. Let’s take a look at the final code:

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

The findMaxForCollection can easily be read from right to left, meaning for each item in the collection return the val property and then get the max for all given values.

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

This leads to more maintainable, reusable and especially elegant code. We will take a look at one last example just to highlight the elegance of functional composing.

Let’s extend the data from the previous example and let’s add another property named active. The data is as follows now:

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

We have this function called getMaxIdForActiveItems(data) that expects a collection of objects, filters all active items and returns the max id from those filtered items.

function getMaxIdForActiveItems(data) {
    var filtered = _.filter(data, function(item) {
        return item.active === true;
    });

    var items = _.pluck(filtered, 'val');
    return Math.max.apply(null, items);
}

What if we could transform the above code into something more elegant? We already have the max and pluck functions in place, so all we need to do now is add the filtering:

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

getMaxIdForActiveItems(data, function(item) {
   return item.active === true; 
}); // 5

_.filter has the same problem that also _.pluck had, meaning we can not partially apply it as the first argument is the collection. We can flip the arguments on filter, by wrapping the native filter implementation:

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

Another refinement is to add an isActive function that simply expects an item and checks if the active flag is set to true.

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

We can partially apply filter with isActive, enabling us to call getMaxIdForActiveItems only with the data.

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

Now all we need to pass in is the data:

getMaxIdForActiveItems(data); // 5

This also enables us to easily compose a function that returns the max id for any non active items:

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

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

Roundup

Functional composing can be a lot of fun as seen in the previous examples plus leads to more elegant and reusable code if applied correctly.

Links

lodash

Hey Underscore, You’re Doing It Wrong!

Originally published at busypeoples.github.io.