# Build Complex Functions with Function Composition in JavaScript

InstructorKyle Shevlin

Published 5 years ago
Updated 4 years ago

Composing functions is fundamental to functional programming. Luckily, you probably have already done some functional composition in high school or college math class. Understanding the compose() function will enable you to easily build complex functionality in your applications and programs.

Instructor: [00:00] You might recall having something where you had a function named F that took a value and returned an output from that function. In this case, we'll just add 1 to our value.

[00:11] Then, we might have a second function that also takes a value. In this case, we'll double it. Lastly, we'll add a value. In this case, X will equal 3.

[00:21] Composition is then simply nesting the result of one function as the input to another function. You might recall seeing something that looked like this. If we log out the result, we should see that. X of 3 is given to the function G, which multiplies it by 2 and gives us 6. 6 is then given to F, which means our result should equal 7.

[00:48] That's the gist of functional composition. It's the nesting of one function inside another, passing the result from one into the other, until we get our final result. Let's do this with slightly more useful functions.

[01:01] First, let's have a scream function that uppercases any string. Next, an exclaim function that adds an exclamation point to any string. Finally, a repeat function that will simply repeat our string.

[01:17] Now, we can create a string, and we could do composition, just like before. First, we'll want to scream it, and then we will want to exclaim it, which means we have to wrap the result of scream. We might want to repeat it, which means we have to wrap both of those.

[01:38] If we log this out, we should see "EGGHEAD.IO IS AWESOME" in all caps, repeated, and exclaimed. This can be really unwieldy, nesting functions like this. There has to be a better way. The way we can do that is through creating a compose function.

[01:55] Compose will take any number of functions and return a function that awaits a value, and then reduce those functions down, just like our composition before.

[02:08] To make sense of this, our functions are turned into an array using the rest operator, and we reduce right, starting from our final function moving leftwards, and pass the result of the previous functions into the current function. We start with the value X.

[02:26] Thus, we can make a new function using our compose function. Now, using reduce right means that the furthest right argument is our first one. First, we want to scream, then we want to exclaim, and then we want to repeat. This produces a new function which we can use on our string.

[02:48] We save this and we log it out on the terminal, we should get the same result.

~ 5 years ago

I personally used to avoid using compose function in utils such as Redux. but thanks to your simple and concise explanation about it, I can now use it confidently :)

Eric Gu (@ericguuu)
~ 5 years ago

Was there any reason for using reduceRight instead of reduce and going naturally from left to right?

Kyle Shevlininstructor
~ 5 years ago

Yes, traditionally `compose` uses `reduceRight` because arguments are supplied in the same order that you would read them if you were to write them out and nest them. Notice that the words of `compose(foo, bar, baz)(x)` have the same order as `foo(bar(baz(x)))`.

I think we should be careful with the use of the word "natural" here. To the mathematician, `compose` would be "natural", as it is derived from mathematical composition. Now, JavaScript is a left-to-right read language and we should admit inherent bias/preference for left-to-right functionality while recognizing that does not make it "natural". It is a cultural bias brought to the language. JavaScript (or any programming language) could have just as easily been written right-to-left and be considered equally "natural".

Lastly, if you prefer left-to-right function composition, it can be accomplished by swapping `reduceRight` with `reduce` and renaming the function `pipe`. This is the traditional name for left-to-right composition and is what the potential pipeline operator `|>` is based on.

Daniel Ram
~ 5 years ago

Can you make a series on similar topics? :)

Kyle Shevlininstructor
~ 5 years ago

Sure, do you have any similar topics you know you would like covered? I'm working on a few about factories and factory composition right now, but I could put some work in on a series if that would be helpful.

jorge martinez
~ 4 years ago

what does 'acc' stands for? thx

~ 4 years ago

@jorge accumulator.

Teddy Odhiambo
~ 4 years ago

hi @Kyle, love your course on "Data Structures and Algorithms in JavaScript". Great stuff! Could you please do a course on FP? From basics to using lodash FP? Something along the lines of this composition lesson.