Input of one function comes from the output of another function.
š simple defination of function composition that i could find.
In functiona Programming, Composition takes the place of inheritance in OOP.
composition > inheritance.
it's just better to use composition from the start. It's more flexible, it's more powerful, and it's really easy to do.
Creating a Compose Function
A lot of Javascript FP libraries like ramda, provide pipe()
and compose()
, which help us in creating composition of functions. Before moving to those,let's create our own example functions.
Here is an example of compose function which take two functions as argument.
let compose = function(fn1, fn2) {
return fn2(fn1)
}
//or
let compose = (fn1,fn2) => fn2(fn1)
Compose Vs Curry
Curry functions are always unary functions which take one argument per application.
Currying functions looks a lot similar pattern to composition, which often causes them to be mistaken for each other.
example of a curry function
const sum = a => b => a + b
sum(3)(5) // 8
Are 'Currying' and 'Composition' the same concept in javascript?
No.
First, currying is translating a function that takes multiple arguments into a sequence of functions, each accepting one argument.
here, Notice the distinct way in which a curried function is applied, one argument at a time.
// not curried
const add = (x,y) => x + y;
add(2,3); // => 5
// curried
const add = x => y => x + y;
add(2)(3); // => 5
Second, function composition is the combination of two functions into one, that when applied, returns the result of the chained functions.
const compose = f => g => x => f(g(x));
compose (x => x * 4) (x => x + 3) (2);
// (2 + 3) * 4
// => 20
The two concepts are closely related as they play well with one another. Generic function composition works with unary functions (functions that take one argument) and curried functions also only accept one argument (per application).
Function Composition
Function composition is a way of combining pure functions to build more complicated ones. Like the usual composition of functions in mathematics, the result of one function is passed as the argument of the next, and the result of last one is the result of the whole.
Composition is a fancy term which means "combining".
In other words, we can often "combine" multiple steps either into one line of code, or into a new function to contain them
For example, if we want to find the sine of 30 degrees (remember sine uses radians) we could "compose" these two items into the single line: result = sin( degrees_to_radians( 30 ) ). This is the same as in math where we often see f(g(x)).
Example of a compose function which take more than two functions, and applies from left to right manner
We can write a function to compose as many functions as you like. In other words, compose() creates a pipeline of functions with the output of one function connected to the input of the next.
const compose = (...fns) => (x) => fns.reduceRight((y, fn) => fn(y), x);
This version takes any number of functions and returns a function which takes the initial value, and then uses reduceRight() to iterate right-to-left over each function, f, in fns, and apply it in turn to the accumulated value, y. What we're accumulating with the accumulator, y in this function is the return value for the function returned by compose().
Now we can write our composition like this:
const g = n => n + 1;
const f = n => n * 2;
// replace `x => f(g(x))` with `compose(f, g)`
const h = compose(f, g);
h(20); //=> 42
Composition in React
Creating a composition for Different buttons
const Button = props => {
return <button>{props.text}</button>
}
const SubmitButton = () => {
return <Button text="Submit" />
}
const LoginButton = () => {
return <Button text="Login" />
}
Pass methods as props
A component can focus on tracking a click event, for example, and what actually happens when the click event happens is up to the container component:
const Button = props => {
return <button onClick={props.onClickHandler}>{props.text}</button>
}
const LoginButton = props => {
return <Button text="Login" onClickHandler={props.onClickHandler} />
}
const Container = () => {
const onClickHandler = () => {
alert('clicked')
}
return <LoginButton onClickHandler={onClickHandler} />
}
Using children
TheĀ props.children
Ā property allows you to inject components inside other components.
The component needs to outputĀ props.children
Ā in its JSX:
const Sidebar = props => {
return <aside>{props.children}</aside>
}
and you embed more components into it in a transparent way:
<Sidebar>
<Link title="First link" />
<Link title="Second link" />
</Sidebar>
Notice how theĀ App
Ā component doesn't expose the structure of the data.Ā TodoList
Ā has no idea that there isĀ label
Ā orĀ status
Ā properties.
The so calledĀ render propĀ pattern is almost the same except that we use theĀ render
Ā prop and notĀ children
Ā for rendering the todo.
function TodoList({ todos, children }) {
return (
<section className='main-section'>
<ul className='todo-list'>{
todos.map((todo, i) => (
<li key={ i }>{ children(todo) }</li>
))
}</ul>
</section>
);
}
function App() {
const todos = [
{ label: 'Write tests', status: 'done' },
{ label: 'Sent report', status: 'progress' },
{ label: 'Answer emails', status: 'done' }
];
const isCompleted = todo => todo.status === 'done';
return (
<TodoList todos={ todos }>
{
todo => isCompleted(todo) ?
<b>{ todo.label }</b> :
todo.label
}
</TodoList>
);
}
Top comments (5)
Why we don't use proposal pipeline operator? Which is give composition without any library or helper function, and very useful in multiple case.
Pipeline operator handy even simple log:
in react also handy this syntax sugar.
or better
I think there are two proposals for the pipeline operator. There is one where the operator behaves exactly like
pipe()
and the other proposal adds more features to it (they call it smart pipeline).I like the idea of the simple pipeline but I imagine that a large part of the javascript community would not like such a limited feature. It would force them to learn about partial application, unary functions, and currying; in other words it would impose a specific style of programming on them. If it doesn't make their life easier they would just ignore it.
Thanks to both of you! I was not aware of this new experimental pipeline operator. I like the syntax that peter has used. as per the current mozilla docs it is still in stage 1, so i don't think we can use the operator just for now. Operators have made our life easier a bit, so much time i use ? : , then using if else. I think we are moving to more simplified and less bracket world of programming.
If you would try pipeline operator, then you found in this parcel bunlder setup: github.com/Pengeszikra/react-base , react can easy remove from this.
Eslint give correct result. But one more trick for VS-Code don't show error in
Sure will give it a try!