Functional JavaScript First Steps

Function Composition

Anjana Vakil

Anjana Vakil

Software Engineer & Educator
Functional JavaScript First Steps

Check out a free preview of the full Functional JavaScript First Steps course

The "Function Composition" Lesson is part of the full, Functional JavaScript First Steps course featured in this preview video. Here's what you'd learn in this lesson:

Anjana explains how functional programers use functional composition to create full programs. One function's output becomes the input for another function. The program itself is a function composed from other smaller functions.


Transcript from the "Function Composition" Lesson

>> Let's press on with our next topic, which is how we take these little functions and turn them into big complex programs. As we said before, functional programming is programming with pure functions and everything in a functional program is function. So you could say it's functions all the way down.

A program in the functional programming mindset becomes a function that takes in some kind of input and returns some kind of output. That function itself may be made up of a lot more simple functions that when we put them all together, give us a complex operation worthy of a complete computer program.

So the idea with functional programming is that we have inputs coming in, we have outputs coming out. And those outputs can also become new inputs for the next function whose outputs can become new inputs for another function. Remember when we looked at that filter MapReduce sandwich earlier, we had the outputs of filter going into the input of map and the output of map going into the input of reduce and so on and so forth.

So what ends up happening when you write functional programs is that you end up writing programs where you think about. How the data is gonna flow through your different functions. So you end up with something like this, where if I wanna get from a, a green circle to b a purple triangle, I might think, okay, I could have a function where I'm going to transform green circles into Triangles.

And then I might have a function where I'm going to transform the color and return the same shape, but purple. And so we're going to be flowing data through. So we think, what's the output that I want? What's the input that I'm getting? And how can I flow the data through a series of functions to get the result that I want?

And once I figure that out, I can actually use something called function composition where we sorta putting together functions, composing them together to take simple functions and create complex programs that nevertheless themselves are input in output out functions. So what this might look like is if I had that f of x function which is turning circles into triangles and then I have a g of x function which is turning green into purple what I actually wanna be doing is calling them both on the same input.

So first I'm gonna call f of x, and then whatever the output of that is, I'm gonna call g on that. And what I get then is kind of I can make a single function that does all of that. So now I can treat that outer function as just a black box.

And once I've got it composed the right way, I don't need to worry about all of the miniscule little operations that are happening inside of it. I can treat it as a single kind of blackbox where I only care about the input coming in and I only care about the output coming out.

So for example, I have a little ender function here which is similar to the curried function we saw before, where it takes in a single argument. Returns another function that takes in a single argument, and then smashes their values together. So I can make an ender function that I'll call adore which is gonna say that something rocks.

And then I might make an announce function that's going to say y'all, like hey y'all. And then I might make an exclaim function which is going to end things with exclamation point so that I'm really excited about it. Now I probably don't think each of these are super useful on their own but I could put them all together into a function that I might call hypeup.

Where I take in some thing, some value x, string in this case. And then what I'm going to do is say that I adore it, say that it rocks. Announced that say hey y'all and then exclaim, that so add an exclamation point so that you know that I'm really hyped up about it.

So if now if i hypeUp ("JS"), I can say JS rock y'all whoo. And if I hypeup FP I'll say FP rocks y'all really excited. And hopefully by now and this long brain busting day we're all feeling super hyped about this functional programming stuff. The idea here is that now I have a program, hypeUp is now a program made up of these simple functions.

And maybe I want to, let's say, replace y'all with something like everyone or folks, I can make a new function, swap that out and still reuse my adore and my explain functions and make a new hype up folks function for example. So the idea here is that by breaking down earlier we saw how by breaking down complex argument functions, multi argument functions into single ones we get smaller little functions.

What we're thinking about now is how do we take those smaller little functions and build them back up into more complex programs.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now