How do I read functional composition in es6/javascript?

问题

Background:

Composition is putting two functions together to form a third function where the output of one function is the input of the other.

No matter how much I look at this I struggle with how to read it. In particular why the compose() return => (a) => captures the 121.2121212 in local scope. Also I struggle with how final fn f(g(a)) would look with all the values/fn present w/o the use of variables.

Question: Does anyone have any techniques or diagrams for quickly reading examples like this; how can I mentally debug and follow the function flow?

Reference:

const compose = (f, g) => (a) => f(g(a)) // Definition
const floorAndToString = compose((val) => val.toString(), Math.floor) // Usage

floorAndToString(121.212121) // '121'

回答1:

As mentioned by T.J. Crowder, it often helps rewriting arrow functions as regular functions. So the function:

const compose = (f, g) => (a) => f(g(a))

Can be rewritten as:

function compose (f, g) {
    return function (a) {
        return f(g(a));
    }
}

Now it is perhaps more obvious what's going on. So now let's rewrite the other parts:

const floorAndToString = compose((val) => val.toString(), Math.floor)

Can be rewritten as:

function convertToString (val) { return val.toString() };

const floorAndToString = compose(convertToString, Math.floor);

Now it may be more obvious that the compose function will return the function:

// remember that we pass `convertToString` as `f`
// and `Math.floor` as `g`:

function (a) {
    return convertToString(Math.floor(a));
}

So it's obvious that the function floorAndToString simply returns the result of convertToString(Math.floor(a)). There is nothing special about compose that captures 121.2121212 because it doesn't. Instead it creates a function where 121.2121212 can be passed as an argument to convertToString(Math.floor(a)).

回答2:

It might help to look at the Wikipedia article for function composition. But I think your problem is not really related to function composition but to the arrow notation in general.

Maybe it helps to look at a simpler example first:

const addOne = (x) => x + 1
const addN = (n) => (x) => x + n
const addSeven = addN(7)

The last line produces a new function that adds seven to the input (x) => x + 7. You can think of the parameter tuples between the arrows as being filled from left to right when values are provided (and the variables to the right are bound to these values). As long as you don't provide all parameters, you will obtain a new function.

You can also provide all parameters like this:

addN(5)(3) // yields 8

Note that addN can be seen as taking two parameters but in separate bracket pairs. The arrows between the brackets in the definition kind of allow you to omit parameters to the right and obtain a function with fewer parameters with the left ones being already fixed.

Let's look at an alternative definition of compose:

const weirdCompose = (f, g, a) => f(g(a))

It should be clear how it works, but the problem is that you cannot use this to compose two functions without evaluating the result of the composition with the value a right away. By separating the parameters into two groups you can partially apply the function and only provide f and g in a first step.

To understand this better, I suggest you also have a look at the concept of currying

来源：https://stackoverflow.com/questions/41823053/how-do-i-read-functional-composition-in-es6-javascript

标签

javascript

functional-programming

ecmascript-6

composition