Echo JS 0.11.0

Sorry, but this is not a good article in many ways, Amrish.

If we focus on the concepts, on what is composition in general, the article is not good at all. Composition, as a programming thing is a very common word and is used for a bunch of different concepts. In your article, you refer to "composition" with no additional qualification, but you really mean "function composition". So you would do well to use the complete "function composition" expression at the very least in the title, but also almost everywhere in your whole text.

So, ok, it's "function composition" you're referring to. The next problem is that what you present as "function composition" is not that really.

The explanation you give is simply calling a bunch of functions in a way where you feed the output of one function to the next function and the output of that to the next and so on. You simply present an example like...

    add2(multiplyBy3(reduceBy2(divideBy2(num))))

This is not really function composition. Function composition is actually that next step you take: creating *another function* from the ones you have and *then* using that function. So, function composition happens here:

    const calculate = compose(add2, multiplyBy3, reduce...);

Similarly, your two "real life" examples which should explain so easily what function composition is fail to do so completely because they don't point out that composition at all.

Take the clothes example. You simply apply one calculation (discount) and then apply the next one (tax). There is no composition there. You simply have done one calculation and then another calculation. Now, the example could work, but you need to explain it properly. That is, you need to present the discount as an operation, the tax as a second operation and then introduce a "composed calculation" you could call final price or whatever (see further below for the code), which is composed from the percentages. Something *like* this (but please do not copy this verbatim):

    "The first calculation is applying a discount of 50%. Then you have to apply a second calculation which applies 10% taxes. These two separate calculations can be merged into a single calculation if we compose them by simply applying a percentage of 55% to the original value. This single new operation is said to be the composition of the other two operations."

The second example describes a process where there isn't really a linear flow over a specific input. The process involves different pieces, different inputs and, more importantly, the various operations in the process are *not* separate. The process is the full thing; you can't really "compose" it in any other way or with any other operations. You can't blow air before closing the mould. The operation of "moulding glass into shape" is not a standalone operation. It is not a good example.

Finally, while this may seem a minor problem compared to the above, in the actual code examples you show, the naming is not good to help the reader understand the concept of the composed function.

That's because you don't give it a name. You simply call it "joinedFns" or "composedFns" which are really bad names. On the one hand the do not express the idea of what they actually do. On the other, why is the name in plural? It is, once composed, a single function; if anything it would be called "composedFn", not "composedFns".

But no, don't call it that. Instead give it a proper name. Even better, write proper examples where all names are significant. Take the shirt example and use that. Instead of "add2" or "multiplyBy2" write something like...

    const applyDiscount = (originalPrice) => originalPrice * 0.5;
    const addTaxes = (amount) => amount * 1.1;

    // ... compose function ...

    const calculateFinalPrice = compose([ applyDiscount, addTaxes ]);

    const shirtPrice = 50;

    const finalPrice = calculateFinalPrice(shirtPrice);


Hey, maybe you can even show *both* ways to show the difference. In one code block you write...

    const applyDiscount = (originalPrice) => originalPrice * 0.5;
    const addTaxes = (amount) => amount * 1.1;


    const shirtPrice = 50;

    const discountedPrice = applyDiscount(shirtPrice);
    const finalPrice = addTaxes(discountedPrice);
    console.log(finalPrice);

And then in the next block you reuse the same applyDiscount and addTaxes functions and write:


    const calculateFinalPrice = compose([ applyDiscount, addTaxes ]);

    const shirtPrice = 50;

    const finalPrice = calculateFinalPrice(shirtPrice);
    console.log(finalPrice);

This way you show that the result is the same, but that now you're doing that thing there with the functions, composing them into a new single function. And so readers will more easily understand where the difference is, and that "function composition" is precisely that thing you do with the functions.