JavaScript: Close Examination of Arrow Function Via Functional Programming

While watching a fantastic presentation from Fluent Conference 2018 (in San Jose, CA) I came upon the following code snippet written by the presenter Kyle Shevlin:

const double = x => x * 2;
const map = fn => xs => xs.map(fn);
const doubleEach = map(double);
const doubles = doubleEach([1,2,3]);

How I Interpreted the Code

I saw the first line and I thought:
Ok, double is a function that takes a number and returns double the value of that number.

That makes sense to me.

Second Line: I Was Stuck

But, as soon as I saw the second line I was confused.

The Secret You Must Know

To be able to rip that second line apart, you must understand what xs is. It's not named very well in the example so that was part of my misunderstanding.

Back To Arrow Function Basics

First let's think about what we know about Arrow function basics. We'll use the simpler first line of code (which I understand) as a way of understanding everything else.

const double = x => x * 2;

We know that this simple arrow function takes one parameter (x) and returns one value (x * 2).

A Clue: Last Item Is Returned Value

Ah, a clue to this is that the last thing shown is the value that is returned.

Now,let's turn back to looking at that second line again and discover what is happening there.

const map = fn => xs => xs.map(fn);

The last thing that happens is the map() function is called on xs.

map() Is A Method of What?

Here's where we need some inside information, otherwise we are going to continue to be confused. The map() function is a function of the JavaScript Array type.

Aha! That's It!

Since the map() function is a method of the JavaScript Array type, we now have discovered that xs is an Array.

Array map() Method Details

The Array map() method :

1. takes one parameter which is a function it will call on each element of the target Array.
2. returns an Array of each element (returned from the function)

Calling map() Returns an Array

Also, keep in mind that calling xs.map(fn) returns an Array.

Now We Can Understand The 2nd Line

The const map defines a function which

1. takes a function (named fn) as a parameter
2. that function named 'fn' returns an Array xs
3. the Array returned is actually the return from xs.map(fn)

Long-Time Imperative Programmer

To me (a long-time dev of imperative programming) that second line is just so clouded.

Let's break it down one more time.
It's that 2nd => that gets me.
It's basically a pass-thru.

Suppose we have the following:

let get5 = fn => xs => 5;

Do you know what that would look like when you call it?

get5(x=>1)()

You are telling it to call a function (get5) which takes a function (we pass in another arrow function x=>1 which isn't used.

Call Returned Function Immediately

All of that will return a function which we will call immediately with ().

That last function returns the value 5.

Phew...Do you find this a bit obfuscated?

No wonder Functional programming takes a while to learn.