Functional Cartesian Products in JavaScript

Published April 2, 2019

In a recent project I had two arrays of length m and n, combined together to create a new array of size m * n. This is sometimes referred to as a Cartesian product, particularly in Set theory. Naive pseudo-code would look like:

fruits = []
for apple in apples:
    for pear in pears:
        fruits.push(apple + pear)

Since I was using JavaScript, it looked more like:

const fruits = []
for (const apple of apples) {
  for (const pear of pears) {
    fruits.push(`${apple} and ${pear}`)

However, I wanted to see if I could use some of the methods available in Array.prototype coupled with ES6’s arrow functions to create a one-liner. Would be less readable, no doubt, but I get experience with more of the functional side of JavaScript, which I personally like.

Here’s what I came up with:

const fruits = apples.reduce((acc, apple) => acc.concat( => `${apple} and ${pear}`)), [])

Let’s break that down:

In β€œplain” English:

  1. Starting with an empty array (last parameter), referenced by acc, iterate over each apple in apples.
  2. For that apple, concatenate a new array onto acc by:
  3. mapping each pear of pears with the current apple.

This is a somewhat silly example — apples & pears — but I hope it gets the idea across. It’s admittedly much less readable, but there is an undeniable elegance to it.

Last modified April 1, 2019  #dev   #js 

← Newer post  •  Older post →