Build Complex Functions with Function Composition in JavaScript

Kyle Shevlin
InstructorKyle Shevlin

Share this video with your friends

Send Tweet
Published 4 years ago
Updated 3 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.

Farzad YZ
Farzad YZ
~ 4 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)
Eric Gu (@ericguuu)
~ 4 years ago

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

Kyle Shevlin
Kyle Shevlininstructor
~ 4 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
Daniel Ram
~ 4 years ago

Can you make a series on similar topics? :)

Kyle Shevlin
Kyle Shevlininstructor
~ 4 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
jorge martinez
~ 3 years ago

what does 'acc' stands for? thx

Farzad YZ
Farzad YZ
~ 3 years ago

@jorge accumulator.

Teddy Odhiambo
Teddy Odhiambo
~ 3 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.

Thanks in advance

Kyle Shevlin
Kyle Shevlininstructor
~ 3 years ago

Hey Teddy, lucky for you, I already have an intro to functional programming course made. It's in the course queue for egghead, but courses outside of this promotion are pretty backed up and I expect it won't come out until somewhere between January-March of next year.

I am considering selling it on my own website for a small price as well, so it might be available to you sooner. I have some other options as well, but it's coming. Hang tight. Thanks!

Teddy Odhiambo
Teddy Odhiambo
~ 3 years ago

Thanks Kyle. I'll definitely keep an eye out for that.