## DEV Community 👩‍💻👨‍💻 is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Posted on

# 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.