Good evening! Here's our prompt for today.
Composition is putting two or more different things together, and getting a combination of the inputs as a result. In terms of programming, composition is often used for combining multiple functions and getting a result at the end. Using composition leads to a cleaner and much more compact code.
If we want to call multiple functions, at different places in our application, we can write a function that will do this. This type of function is called a pipe, since it puts the functions together and returns a single output.
A pipe function would have the following functionality:
Suppose we have some simple functions like this:
1const times = (y) => (x) => x * y
2const plus = (y) => (x) => x + y
3const subtract = (y) => (x) => x - y
4const divide = (y) => (x) => x / yThe pipe() would be used to generate new functions:
1pipe([
2 times(2),
3 times(3)
4])
5// x * 2 * 3
6
7pipe([
8 times(2),
9 plus(3),
10 times(4)
11])
12// (x * 2 + 3) * 4
13
14pipe([
15 times(2),
16 subtract(3),
17 divide(4)
18])
19// (x * 2 - 3) / 4Can you implement a pipe() function that will work as the examples stated above?
Try to solve this here or in Interactive Mode.
How do I practice this challenge?
xxxxxxxxxxpipe([ times(2), subtract(3), divide(4)])Here's how we would solve this problem...
How do I use this guide?
Our solution for the pipe() function will be fairly simple. For every function call in the argument array funcs, it will return a new function.
This one will perform a reduce operation, which will call the sequence of functions and give them their arguments. Each argument of reduce() has to return the values that the next function requires.
From the perspective of the next function, the parameter that should be passed into it should come from the previous call of reduce(). In reduce(), result is the return value and func is the current value of the funcs array.
1return funcs.reduce((result, func) => {
2 return func(result);
3}, arg);Since the reduce() method also requires an initialValue, we will provide it with the current arg, because if not provided, the first element of an array will be used as initialValue and this will be a function and it will be omitted from execution. Then, the second element of an array will be used as the first func of the loop.
So, the solution would look like this:
1function pipe(funcs) {
2 return function (arg) {
3 return funcs.reduce((result, func) => {
4 return func(result);
5 }, arg);
6 }
7}So, in terms of some of the previous examples, the execution would go something like this:
1pipe([
2 times(2),
3 subtract(3),
4 divide(4)
5])- The
reducemethod getstimes(2)as a parameter, and performs its action (multiplies by 2) - Then the result returned gets passed to the
subtract(3)function, and 3 is subtracted from the result - Finally the operation
divide(4)gets performed over the current result, and it gets divided by 4
One Pager Cheat Sheet
- Using
composition, we can create apipefunction to call multiple functions and return a single output in a cleaner, more compact way. - We can simply
reduce()an argument array of functions, each performing a different action according to their parameters and the result of the previous call.
This is our final solution.
To visualize the solution and step through the below code, click Visualize the Solution on the right-side menu or the VISUALIZE button in Interactive Mode.
xxxxxxxxxxpipe([ times(2), subtract(3), divide(4)])That's all we've got! Let's move on to the next tutorial.
If you had any problems with this tutorial, check out the main forum thread here.
