Partial Application or Partial Function application is a computer science programming concept which allows you to fix a number of arguments to a function call, returning a new function. In nutshell:
Call a function with fewer arguments than it expects and it returns a function that takes the remaining of the arguments. This is called Partial Application of Function.
This is best explained via an example. Imagine you want to write a greeting function which greet users in the morning, afternoon and night on their device.
As you can see we have some fixed arguments for this function, either it is Good Morning, Good Afternoon or Good Night. To be able to reduce the repeated arguments we can create a new function out of the greeting function which only does morning greeting. In this way we will fix the first argument to “Good Morning” and have the rest of the arguments be dynamically set when we call the function.
So let’s write a partial function which can get executed on any function and fix the arguments in order.
The above code is attaching a function called partial to the Function constructor prototype so we can access it on any function across the code.
The trick here is to use closures. Closure in JavaScript is a feature that inner function has access to the outer(enclosing) function variables. Using closures will keep the initial arguments accessible for the second function call. So the partial function is simply returning another function and calling the original function using apply and passing the context and the combined arguments.
This is a great, simple approach when we always lock the arguments in order from left to right, but what if we want to change the order?
Advanced Partial Application
Imagine a scenario where we want to create greeting function for one user only, as following. In this way, we are not passing the arguments in order. As you can see, “janesGreeting” function first argument is undefined. We pass the first argument when we are calling the partial function, not when we are creating it.
In order for us to be able to fix arguments in any order, we need to compare arguments that we are passing in each time and set them on and actual argument array. This is one way of matching and collecting arguments. You can use any other approach to match arguments.
Below, depicts the advancedPartial function. The for loop job is to traverse all arguments, collect all arguments in order, fill in an actual argument array and pass that to the greeting function.
Real world examples
JavaScript Bind
JavaScript bind method can do partial application.
function pow(x, n) { return Math.pow(x, n); }const square = pow.bind(null, 2);
square(2); // 4const cube = pow.bind(null, 3);
cube(3); // 27
Arrow functions
ES6 arrow functions also can do partial application.
function add(x, y) { return x + y; }const addTen = x => add(x, 10);
addTen(2); // 12
Timeouts
This is an interesting example from John Resig’s post on partial application.Imagine you want to write a delay function with executes asynchronously every 10 seconds.
const delay = setTimeout.partial(undefined, 10);delay(() => {
alert( "A call to this function will be temporarily delayed." );
});
Events
Using partial application with events can come very handy, especially if you want to register multiple events on the same element.
const bindClick = document
.getElementById('container')
.addEventListener
.partial("click", undefined, false);bindClick(function(e) {
console.log(this, e);
});
Conclusion
Nowadays we use more features of functional programming languages in JavaScript. Async/await, cascading, arrow functions are all functional features of JavaScript. Functional Application currently exists within JavaScript with using arrow functions and bind. Glad to know that advanced partial application is also in proposal phase at TC39. At the time being you can use Lodash partial and partialRight functions.
Extra Reading Resources:
http://benalman.com/news/2012/09/partial-application-in-javascript/
