You Can Explain Functional Programming Using Emojis

A visual representation of Lambda calculus, Church encoding, and Y combinator

Last month, I published a free online course called “Y Combinator for Non-programmers”. In this 17-page course, I explain functional programming concepts such as lambda calculus, Church encoding, and Y combinator in a way such that people who have zero programming knowledge can understand.

I didn’t use any code to explain these concepts. Instead, I created something called “emoji puzzles” that can visualize functional code. In this article, I’ll explain how my emoji puzzles can represent and execute functional code visually.

Quick Demo

First, here’s simple, functional JS code. Try pressing Run below to see the result:

(sushi => sushi)('sandwich')

The above code can be expressed visually using my emoji puzzle below. Try pressing Run :

I’ll explain how it works shortly. If you like to teach programming, or if you like functional programming, I think you’ll enjoy this article.

Overview

This article has 10 steps:

• In the first half (steps 1 - 5): I’ll show you how simple JavaScript code can be represented visually using my emoji puzzles. You’ll be able to understand it even if you’re not familiar with JS.
• In the second half (steps 6 - 10): I’ll talk about how I used my emoji puzzles to explain functional programming concepts such as lambda calculus, Church encoding, and Y combinator.

Identity function in JS

Take a look at the following code. It’s an identity function in JavaScript that returns the argument.

// Identity function in JS
sushi => sushi

If you apply the above function on a string 'sandwich', the result will be 'sandwich'.

// The result will be 'sandwich'
(sushi => sushi)('sandwich')

One day, I realized that the above JS code can be described visually using emojis like below. I called this an “emoji puzzle”.

The above emoji puzzle is equivalent to the earlier JS code. First, the identity function sushi => sushi…

(sushi => sushi)('sandwich')

…is represented by the bottom two items, which are both sushi .

Second, the argument 'sandwich' to the identity function…

(sushi => sushi)('sandwich')

…is represented by the top item, which is a sandwich .

That’s how my emoji puzzles can visually describe a simple JS expression. Next, let’s talk about how we can run it.

Running the function

I’ve added the Run button to the JS code snippet below. If you press it, you’ll see that the result is 'sandwich'.

(sushi => sushi)('sandwich')

We can also “run” the equivalent emoji puzzle and get the same result. Try pressing the Run button below.

The result is a sandwich , which is the same as what happens when you run the equivalent JS code.

So, you can run an emoji puzzle just as you can run a piece of JS code. This is how I taught functional programming to non-programmers in my course (Y Combinator for Non-programmers)—without showing any code.

Let’s take a look at another example. Here’s a piece of JS code that’s slightly different from before. It’s a function that ignores the input and always returns 'pizza'.

// A function that ignores the input
// and always returns 'pizza'
sushi => 'pizza'

Let’s run the above code with 'sandwich' as the argument. Press Run :

(sushi => 'pizza')('sandwich')

As expected, the result is 'pizza'. Now, this code can be represented using an emoji puzzle as follows. Press Run :

Just like the JS code, the emoji puzzle ended up with a pizza after running it.

(sushi => sushi)('sandwich')

(sushi => 'pizza')('sandwich')

Visualizing evaluation rules

If you know how to code, you have a mental model of how function evaluation works:

• If you see (sushi => sushi)('sandwich'), you can quickly figure out that the result would be 'sandwich'.
• If you see (sushi => 'pizza')('sandwich'), you know that the result would be 'pizza'.
• You know what free variables and bound variables mean.

On the other hand, most non-programmers don’t have a mental model of how function evaluation works. To help them develop the mental model, I created a step-by-step visualization of function evaluation rules using emoji puzzles.

Let’s reuse the earlier example again:

(sushi => sushi)('sandwich')

On the puzzle below, try pressing the Run button. This button is a bit different from the last time—it shows every step that happens in between.

Here are the four steps it displayed:

Step 1. Label: t l r

First, we label each emoji. The top item is labeled as t (for “Top”), the left item is labeled as l (for “Left”), and the right item is labeled as r (for “Right”).

Step 2. Match: l r

Second, we check to see if some of l’s and r’s match. If they match, add the sign. In this case, both the bottom-left and the bottom-right are sushi , so there’s a match.

Step 3. Copy: t r

Third, we copy t’s to where the matched r’s are. In this case, we copy the sandwich on the top to the bottom-right.

Step 4. Remove: t l

Finally, we remove t’s and l’s. We’re left with just the sandwich at the end.

The above steps are a visual representation of how functions are evaluated. They are equivalent to how JavaScript evaluates (sushi => sushi)('sandwich').

By learning these rules, non-programmers will be able to evaluate functions intuitively.

If there’s no match

Let’s take a look at the other example from earlier:

(sushi => 'pizza')('sandwich')

Try pressing the Run button and see what happens:

Here are the three steps it displayed:

Step 1. Label: t l r—this is the same as before.

Step 2. This time, there’s no match between l and r. The bottom-left is sushi , but the bottom-right is pizza .

If there’s no match, we skip step 3 (Copy: t r) and go directly to step 4.

Step 4. Remove: t l

So we’re left with a pizza . That’s how the emoji puzzle visualizes the evaluation of a function when there’s no matching variable in the function body.

(pizza => pizza)(spaghetti => 'bread')

(salad => 'hotDog')(curry => 'tacos')

More complicated expressions

Let’s take a look at more complicated functional JS expressions and see if they can be represented using an emoji puzzle.

Check out the following JS expression, and try to guess what the result would be before pressing the Run button.

(sushi => sandwich => sushi)(
  'hamburger'
)('chicken')

The result was 'hamburger'. It’s because:

• sushi is bound to 'hamburger',
• sandwich is bound to 'chicken',
• And it returns the value of sushi, which is 'hamburger'.

Now, here’s the equivalent emoji puzzle:

Let’s break it down. First, the function expression…

(sushi => sandwich => sushi)(
  'hamburger'
)('chicken')

…is represented by the bottom row:

And the two arguments…

(sushi => sandwich => sushi)(
  'hamburger'
)('chicken')

…are represented by the top and the middle rows:

How do we evaluate this function? Well, in JS, we first evaluate the function call with the argument 'hamburger'.

(sushi => sandwich => sushi)(
  'hamburger'
)('chicken')

Equivalently, in an emoji puzzle, we evaluate the bottom two rows first. We ignore the top row initially, which is shaded in blue.

Also, if you look at the left edge of the puzzle above, the bottom two rows correspond to the pair of 1’s. That’s how you know that you must start with the bottom two rows. In an emoji puzzle with 3 rows, you start with the pair of 1’s.

Next, let’s label each item on the bottom two rows. This time, in addition to t l r, we now have a new label m for the sandwich .

Here’s the rule: The middle item on the bottom row is labeled as m (for “Middle”), and you can ignore it. You can pretend that m’s don’t exist.

Let’s take a look at the next few steps in this iteration, which is just like what we saw earlier:

This is exactly like how the earlier JS code is evaluated.

(sushi => sandwich => sushi)(
  'hamburger'
)('chicken')

(sandwich => 'hamburger')('chicken')

But we’re not done yet! Let’s continue to the end by pressing the Run button below:

We ended up with a hamburger , which is exactly the same as what the JS code evaluated to.

(sushi => sandwich => sushi)(
  'hamburger'
)('chicken')

(friedPotatoes => pizza => pizza)(
  spaghetti => spaghetti
)('salad')

// There’s an extra pair of parens around
// (spaghetti => spaghetti)("salad")
(friedPotatoes => pizza => pizza)(
  (spaghetti => spaghetti)("salad")
)

Church numerals

From now on, we’ll apply what we’ve learned so far to solve more interesting problems.

Here’s a function called convert that takes a function f as an argument. It then calls f with (n => n + 1)(0).

function convert(f) {
  return f(n => n + 1)(0)
}

Now, suppose that we apply convert on this function: sushi => sandwich => sandwich. What would the result be? Try to guess before pressing the Run button.

function convert(f) {
  return f(n => n + 1)(0)
}

convert(sushi => sandwich =>
  sandwich
)

The result is 0 because:

• sushi is bound to n => n + 1
• sandwich is bound to 0
• And it returns sandwich, which is 0.

Next: What if the input to convert changes as follows? Try pressing Run on each example.

convert(sushi => sandwich =>
  sushi(sandwich)
)

convert(sushi => sandwich =>
  sushi(sushi(sandwich))
)

convert(sushi => sandwich =>
  sushi(sushi(sushi(sandwich)))
)

The results are 1, 2, and 3 respectively because:

• sushi is bound to n => n + 1
• sandwich is bound to 0
• So it applies n => n + 1 to 0 for the number of times sushi is used in the function body.

// a & b can be any variable name
a => b => b
a => b => a(b)
a => b => a(a(b))
a => b => a(a(a(b)))
// ...and so on...

convert(a => b => b)          // 0
convert(a => b => a(b))       // 1
convert(a => b => a(a(b)))    // 2
convert(a => b => a(a(a(b)))) // 3
// ...and so on...

Important: These functions that can be converted to a number using convert() have a special name. They are called Church numerals. Each function represents a Church numeral, like this:

// Church numeral 0
a => b => b

// Church numeral 1
a => b => a(b)

// Church numeral 2
a => b => a(a(b)))

// Church numeral 3
a => b => a(a(a(b))))

// ...and so on...

You might be wondering: “What’s the point of this?” Don’t worry—I’ll tell you why Church numerals are interesting shortly. But before I do, let me explain how emoji puzzles can express Church numerals.

Here’s an emoji puzzle that represents sushi => sandwich => sandwich, which is Church numeral 0.

Here’s what’s new: We now have the “Convert to a Number” button below the puzzle which converts it to the corresponding Church number. Try pressing it:

Other Church numeral functions can also be represented using emoji puzzles, and they can be converted to a number. And we can use emojis other than and —as long as they follow the same pattern.

Now that we’ve covered the basics of Church numerals, we’ll talk next about why Church numerals are interesting.

Arithmetic with functions

Church numerals are interesting because they let you do arithmetic with functions. Take a look at this function:

sushi => sandwich => pizza =>
  sandwich(
    sushi(sandwich)(pizza)
  )

It looks pretty complicated, but don’t worry too much. Now, suppose that:

• We apply the above function to the Church numeral zero (has the pattern a => b => b), and
• Run convert() (from earlier) on it.
• What would the result be?

Let’s take a look. Try to guess before pressing the Run button.

// Function from the above
const f = sushi => sandwich => pizza =>
  sandwich(
    sushi(sandwich)(pizza)
  )

// Church numeral zero
const zero = chicken => salad => salad

// What happens when you apply f to zero,
// and convert it?
convert(f(zero))

The result is 1, which is 1 greater than the input Church numeral, which was 0. In other words, 0 became 1.

Here’s the secret: This function f we used actually adds 1 to the input Church numeral. When you apply f to a Church numeral, it returns a new Church numeral that’s 1 greater than before.

// If we apply this function to a
// Church numeral, it returns a new
// Church numeral that’s greater by 1.
const f = sushi => sandwich => pizza =>
  sandwich(
    sushi(sandwich)(pizza)
  )

You can try out more examples to verify this:

// Church numeral one
const one = chicken => salad =>
  chicken(salad)

convert(f(one))

// Church numeral two
const two = chicken => salad =>
  chicken(chicken(salad))

convert(f(two))

This is what I mean by “doing arithmetic with functions”:

• By using a Church numeral function that can be converted to someNumber…
• …and the function f we saw earlier,
• You can calculate someNumber + 1.

Now, let’s see if we can explain this to non-programmers using emoji puzzles.

First, here’s an emoji puzzle representation of the Church numeral 0. You can confirm that it can be converted to by pressing the button below.

And here’s the function f we saw earlier, represented as an emoji puzzle:

const f = sushi => sandwich => pizza =>
  sandwich(
    sushi(sandwich)(pizza)
  )

Let’s apply f to the Church numeral 0. To do that, we just combine the above two emoji puzzles and run it. Press Run :

The result is equivalent to sandwich => pizza => sandwich(pizza), which is Church numeral 1.