Functional Programming in JavaScript, Part 2: The Monoid

This is part 2 in a series on Functional Programming in javascript

• Part 1: The Unit
• Part 3: Introduction to Functors and Monads
• Part 4: The art of chaining different monads

What is the similarity between number addition, string concatenation, array concatenation, and function composition?

They are all monoids. And monoids are super useful.

The term Monoid comes from category theory. It describes a set of elements which has 3 special properties when combined with a particular operation, often named concat:

• The operation must combine two values of the set into a third value of the same set. If a and b are part of the set, then concat(a, b) must also be part of the set. In category theory, this is called a magma.
• The operation must be associative: concat(x, concat(y, z)) must be the same as concat(concat(x, y), z) where x, y, and z are any value in the set. No matter how you group the operation, the result should be the same, as long as the order is respected.
• The set must possess a neutral element in regard to the operation. If that neutral element is combined with any other value, it should not change it. concat(element, neutral) == concat(neutral, element) == element

Now that you know what a monoid is, what if I told you that you use it all the time?

Tip: This article is the second one in a series about functional programming in JavaScript. You can read this one first, or start with the previous one, describing the unit.

Number Addition Is A Monoid

When you add two numbers, you manipulate a set of JavaScript Number instances. The addition operation takes two numbers, and always return a number. Therefore, it is a magma.

The addition is associative:

(1 + 2) + 3 == 1 + (2 + 3); // true

Finally, the number 0 is the neutral element for the addition operation:

x + 0; // x

So according to the definition, numbers form a monoid under the addition operation.

Tip: You see that the concat function doesn't have to be named concat for a monoid to exist. Here, it's just +.

Let's see another example.

String Concatenation Is a Monoid

In JavaScript, concat is a method of String instances. But it's easy to extract it as a pure function:

const concat = (a, b) => a.concat(b);

This function operates on two strings and returns a string. So it's a magma.

It's also associative:

concat("hello", concat(" ", "world")); // "hello world"
concat(concat("hello", " "), "world"); // "hello world"

And it has a neutral element, the empty string (''):

concat("hello", ""); // 'hello'
concat("", "hello"); // 'hello'

So according to the definition, strings form a monoid under the concatenation operation. Do you want another example?

Function Composition Is A Monoid

You probably know the compose function:

const compose = (func1, func2) => arg => func1(func2(arg));

Compose takes two functions as arguments, and returns a function. So it's a magma.

Now let's see associativity and neutrality:

const compose = (f1, f2) => arg => f1(f2(arg));

const add5 = a => a + 5;
const double = a => a * 2;
const resultIs = a => `result: ${a}`;

const doubleThenAdd5 = compose(
  add5,
  double
);

doubleThenAdd5(3); // 11

// The composition is associative.
// The grouping does not matter as long as the order is preserved.
compose(
  compose(
    resultIs,
    add5
  ),
  double
)(3); // 'result: 11'
compose(
  resultIs,
  compose(
    add5,
    double
  )
)(3); // 'result: 11'

// And the neutral element is the identity function v => v.
const neutral = v => v;

compose(
  add5,
  neutral
)(3); // 8
compose(
  neutral,
  add5
)(3); // 8

So according to the definition, functions form a monoid under the composition operation.

But what are monoids good for?

Reducing Function Arguments

In the previous post of this series, I explained that when we manipulate functions, we need a way to turn a function that takes two arguments into a function that takes any number of arguments.

Monoids are the solution to that problem when used in combination with Array.reduce.

Let's start with number addition. The addition operation takes two arguments. How can I apply it on an array of arbitrary size? Using Array.reduce:

const add = (a, b) => a + b;
const addArray = arr => arr.reduce(add, 0);
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
addArray(numbers); // 55

This works with other monoids, too:

const concat = (a, b) => a.concat(b);
const concatArray = arr => arr.reduce(concat, "");
const strings = ["hello", " ", "world"];
concatArray(strings); // 'hello world';

const compose = (f1, f2) => arg => f1(f2(arg));
const composeArray = arr => arr.reduce(compose, x => x);
const resultIs = a => `result: ${a}`;
const add5 = a => a + 5;
const double = a => a * 2;
const functions = [resultIs, add5, double];
const myOperation = composeArray(functions);
myOperation(2); // result: 9

Let's generalize: when you have a monoid, you can transform a function taking two arguments to a function taking an array of arguments by calling:

[value1, value2, value3, ...].reduce(concat, neutral);

Splitting Computation In Chunks

As the operation of a monoid is associative, you can cut an array of values into smaller chunks, apply the concat operation on each array, then recombine the results using the concat operation:

const concat = (a, b) => a + b;
const bigArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
bigArray.reduce(concat, 0); // 55
const result1 = bigArray.slice(0, 5).reduce(concat, 0); // 15
const result2 = bigArray.slice(5).reduce(concat, 0); // 40
concat(result1, result2); // 55

The interest is to distribute large computation across many computation units (cores). This is possible with any monoid, so that explains why parallel programming is made easier by functional paradigms.

Async Composition

Using the same logic, I can create a function that composes any number of asynchronous functions (or any function that returns a promise). I just need to form a monoid.

const fetchJoke = async number => fetch(`http://api.icndb.com/jokes/${number}`);
const toJson = async response => response.json();
const parseJoke = json => json.value.joke;

const getJoke = async number => parseJoke(await toJson(await fetchJoke(number))
getJoke(23).then(console.log); // "Time waits for no man. Unless that man is Chuck Norris."

// the getJoke() function is a pain to write. Let's use composition to make it easier
const asyncCompose = (func1, func2) => async x => func1(await func2(x));

// asyncCompose() is associative
asyncCompose(parseJoke, asyncCompose(toJson, fetchJoke))(23).then(console.log);
// "Time waits for no man. Unless that man is Chuck Norris."

asyncCompose(asyncCompose(parseJoke, toJson), fetchJoke)(23).then(console.log);
// "Time waits for no man. Unless that man is Chuck Norris."

// asyncCompose() has a neutral element - the identity function
const neutralAsyncFunc = x => x;
asyncCompose(a => Promise.resolve(a + 1), neutralAsyncFunc)(5) // Promise(6)
asyncCompose(neutralAsyncFunc, a => Promise.resolve(a + 1))(5) // Promise(6)

// so async functions form a monoid under the asyncCompose operation
// hurray, we can use Array.reduce!
const asyncComposeArray = functions => functions.reduce(asyncCompose, x => x);
// let's make it a function that takes an arbitrary number of arguments instead
const asyncComposeArgs = (...args) => args.reduce(asyncCompose, x => x);

// now, writing getJoke() becomes much easier
const getJoke2 = asyncComposeArgs(parseJoke, toJson, fetchJoke);
getJoke2(23).then(console.log); // "Time waits for no man. Unless that man is Chuck Norris."

Thanks to monoids, I managed to write an asynchronous version of compose() working with an arbitrary number of arguments in no time. This is not magic, this is math.

Async Flow

There is just one problem: this reads backward.

const getJoke2 = asyncComposeArgs(parseJoke, toJson, fetchJoke);

So instead of using compose(), let's use flow(), which does exactly the same thing, but the other way around:

const fetchJoke = async number => fetch(`http://api.icndb.com/jokes/${number}`);
const toJson = async response => response.json();
const parseJoke = json => json.value.joke;

const flow = (func1, func2) => async x => func2(await func1(x));
// func1 is executed before func2
const flowArray = functions => functions.reduce(flow, x => x);
// let's make it a function that takes an arbitrary number of arguments instead
const flowArgs = (...args) => args.reduce(flow, x => x);

// now, writing getJoke() becomes much easier
const getJoke2 = flowArgs(fetchJoke, toJson, parseJoke);
getJoke2(23).then(console.log); // "Time waits for no man. Unless that man is Chuck Norris."

That's much more readable: I can use a sequential execution model of the functions passed as arguments to flowArgs().

I love this flowArgs() pattern, it has many advantages in terms of testability, encapsulation, and delayed execution.

Conclusion

So monoids are pretty common, and their link with Array.reduce makes them super useful. Don't be frightened by the academic articles on monoids, which make them look harder than they actually are!

Any time you need to compose an arbitrary number of items (e.g. when flattening a hierarchy of objects, or when implementing a workflow of async operations), look for a monoid! That's another great learning from functional programming.

In the next post in this series, I'll talk about the superpowers hidden in Array.map. It will be the time for the Functor, and no this is not the name of a villain in Power Rangers.