How To Use The Spread Operator on a Function

You can’t officially do it, but you can write a function that does virtually the same thing. Let’s see how and maybe why you should. But first, have you ever found yourself in this situation? result = f(x) (result === ) { g(x) } const if undefined You wanted to call a function with an input when another function returned undefined for that same input. The above works, but wouldn’t it be nice if we had something more generalized? If we were using objects this could be nicely done with a spread operator. combinedObj = {...gObj, ...fObj} const 😍 Doesn’t that look prettier? When I call it will return unless is for . In that case, would be returned. But what’s really nice is I can do it for any number of objects. combinedObj[x] fObj[x] fObj undefined x gObj[x] combinedObj = {...gObj, ...fObj, ...hObj, ...iObj, ...jObj} const So how could we define a function that could spread other functions similarly to how spreads objects? … Specs Okay so should be able to take two functions, and spread f g fObj = { : , : } gObj = { : , : } f = fObj[x] g = gObj[x] spread(f, g) const a 1 b 2 const b 3 c 4 const ( ) => x const ( ) => x and return a function that would first call with an input and only if returns it will call . g g undefined f combined = spread(f, g) [ , , ].map( combined(i)) const 'a' 'b' 'c' => i // => [1, 3, 4] We can define the two function spread like this. spread = g(x) !== ? g(x) : f(x) const ( ) => f, g undefined If we want to spread more than two functions we can modify spread to take a list of functions. spread = fns.reduce( x => f(x) !== ? f(x) : a(x)) spread([f, g, h, i, j]) const => fns ( ) => a, f undefined Why? Cuz we’re Lazy… Well, by itself it’s just a generification that follows a common javascript concept (‘spread’). If you understand how spread works with objects you will understand how spread works with functions. Takes a little less brain work than figuring out what the if statement that we started with was doing. It’s the same reason we use and . There are many ways to achieve what and do without using them, but if we use them our code becomes much easier to follow at first glance. map reduce map reduce Additionally, spread allows us to without sacrificing the ability to spread. In other words we can lazily spread as and when we need the output. wrap objects in functions for the benefit of lazy evaluation For example imagine we wanted a single value for a key in an object that was created by spreading two other objects. fObj = { : , : , : , : , : , : , : , : } gObj = { : , : , : , : } combined = {...fObj, ...gObj } combined[ ] const a 1 b 2 c 3 d 4 e 5 f 6 g 7 h 8 const a 100 c 99 e 88 g 777 const 'd' Then we would have to produce a fully new object combined with all new values even though we only needed the value for a single key, . With our function spread, we can avoid creating a new object. 'd' f = fObj[x] g = gObj[x] combined = spread([f, g]) combined( ) const => x const => x const 'd' Since what spread is actually building is a logical flow of ternaries and functions, when we ask for the value of a single key it executes the logic to get the value for only that key without worrying about getting the other values. If we had to spread more times, we could save ourselves more intermediary objects and more time. Even this small example seems to show a performance gain. Finally since spread produces a function, we also get all the goodness of working with functions like function composition! Here is our spread definition again: spread = fns.reduce( x => { v = f(x) v !== ? v : a(x) }) spread(f, g, h, i, j) const ( ) => ...fns ( ) => a, f const return undefined There are a two slight differences between this definition and the one we saw earlier. 1. This one avoids the re-execution of f(x) if the return value is not undefined . 2. We are spreading the input array, which allows an end user to call spread(f, g) without needing to put the function into the array. Try it out and let me know what you think! 😄