JavaScript: Close Examination of Arrow Function Via Functional Programming
Published: 2021-01-15 16:22:47

While watching a [fantastic presentation](https://learning.oreilly.com/videos/fluent-conference/9781492026037/9781492026037-video320922) from Fluent Conference 2018 (in San Jose, CA) I came upon the following code snippet written by the presenter Kyle Shevlin:

```JavaScript
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.
```JavaScript
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.
```JavaScript
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:
```JavaScript
let get5 = fn => xs => 5;
```
Do you know what that would look like when you call it?
```JavaScript
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](https://en.wikipedia.org/wiki/Obfuscation)?

No wonder Functional programming takes a while to learn.