JavaScript Function Composition, Currying, and Partial Application

A quick guide

The concepts of Currying and Partial Application are useful to anyone who is willing to learn them regardless of their level of experience. They will open the door to Function Composition — which is a fancy way of saying you can use a function to call another function and make things happen. You can almost think of the concept like Russian Nesting Dolls.

A quick example of this would be the following:

let arr = Array(5);
function getLength(array) { 
  return array.length; 
};
function showLength(length) { 
  alert(length);
};
showLength( getLength( arr ) ); // alerts 5

• getLength processes arr
• getLengthreturns the length value to showLength
• showLength shows the value using alert.

Now, as you might have noticed, the above example is really rather useless. It’s the concept that’s important. For those who are familiar with U.S. History part of the Industrial Revolution was brought about by Interchangeable Parts. The idea of interchangeable parts means that if you buy an incandescent light-bulb from Company A and decide that years later you want to replace it with a fluorescent light-bulb from Company B you don’t have to redo the wiring of the light fixture. Both light-bulbs will fit the threading and accept the standard volts.

changing a light-bulb in an alternate reality

In the previous example I used alert to create a pop-up on the screen. What if, a few weeks after this application is built, I no longer want to have a pop-up for this particular page, but instead I want to log the information to the console? I could change the code of the showLength function, but if I had used the function anywhere else it might break other parts of the application. This is where the beauty of Function Composition comes into play. Instead of breaking the application or creating a conditional statement to manage whether or not the information should be alerted or logged, I can write a new function and easily replace the name of the function being called:

let arr = Array(5);
function getLength(array) { 
  return array.length; 
};
function showLength(length) { 
  alert(length);
};
function logLength(length) {
 console.log(length);
};
logLength( getLength( arr ) ); // logs 5;

Function Composition is simply the idea of taking multiple functions and combining them together to create a result that can be easily maintained. As easily as swapping parts!

Currying vs Partial Applications

Currying and Partial Applications are very similar concepts and they are often confused with one another. Why? Well, because the code that produces either is almost identical and even veteran Developers will misuse the terms often enough that they become almost synonymous. Plus the definition you’re likely to find describing the differences is, like a lot of explanations in Computer Science, exceedingly verbose:

A call to a partially applied function returns the result right away, not another function down the currying chain; this distinction can be illustrated clearly for functions whose arity is greater than two.

Thus, any partial application may be reduced to a single curry operation. As such, curry is more suitably defined as an operation which, in many theoretical cases, is often applied recursively, but which is theoretically indistinguishable (when considered as an operation) from a partial application.

So, a partial application can be defined as the objective result of a single application of the curry operator on some ordering of the inputs of some function.

(citing WikiPedia)

What?

It’s a bit disarming at first. I hate to say it, but you do get used to long, winding, and seemingly ridiculous sentences when you’ve been around long enough in any area of Technology. As always I would be lying if I said I didn’t have contempt for the practice of making simple concepts unintelligible to the layman. A person trying to understand a concept shouldn’t have to look up pieces of what they’re reading and stitch them together themselves — it should be laid out as clearly as possible by the Teacher.

The person trying to understand a concept shouldn’t have to look up pieces of what they’re reading and stitch them together themselves— it should be laid out as clearly as possible by the Teacher.

Without further ado we’re going to create a simple addition function to quickly explore the concepts of Currying and Partial Application and their differences. Let’s take a look!

Normal Addition Function

function addition(x, y) {
 return x + y;
}
addition(5, 6); // 11

The above function is, hopefully, very easy to read. In the interest of clarity here’s a play by play:

• We declare a function called addition
• The function has two parameters that it takes. These are named x and y.
• When the function is passed two parameters we return the two parameters( x and y) added together.
• We show an example of calling the function with the parameters 5 and 6 . This results in a returned value of 11

What would this look like if we were to write this as a currying function? Let’s take a look at the completed function and then go through a quick explanation.

Currying Addition Function:

function currying_addition(x) {
  return function(y) {
   return x + y;
  }
}
currying_addition(5)(6); // 11

The above may be confusing at first. It happens, but no worries! I will walk you through it!

• We declare a function called currying_addition
• Our currying_addition function takes one parameter, x
• We immediately return an Anonymous Function( an Anonymous Function is a function declaration without a name )
• The Anonymous Function takes one parameter, y
• The Anonymous Function returns the value of x + y
• We perform a call on currying_addition with the parameter 5 and then call the returned function using the parameter 6 — this returns 11

What’s important to realize about Currying(and if you have a keen eye you may have noticed this already) every function call only requires one parameter. In more technical terms they are all Unary Functions (unary is a simple way to say one, and when we’re talking about a function we’re referring to the number of parameters it has).

How not to win Uno

Note: While programming you may have heard the terms Binary or Ternary — these all have different meanings depending on what we’re referring to, but if you see the word Binary you know that that there are two of something, if you read Ternary you know that there are three of something. These descriptors are called Numerical Notation and when we apply them to functions (unary function, binary function, ternary function) we’re referring to the number of parameters that a function takes. If there is no set number of parameters the function is described as polyadic or, more commonly, variadic.

Another way of stating the number of parameters a function has is to simply state that it has an Arity of 1, or an Arity of 2, or an Arity of 3, etc. Arity is a term that directly correlates to the number of parameters so whether you’re saying “Raphael, this function has an arity of 1!” or “Raphael, this is a unary function!” you’re saying the same thing, assumed pomposity aside.

Currying can be readily described: the process of composing multiple single-parameter functions until a result is achieved.

Note: Currying often utilizes Recursion — for more information on that please take a look at my Understanding Recursion in JavaScript article.

Okay, so that’s currying! If you’re still a bit confused on it I’ll post some reference articles in the Resources section that you can look over. (fyi I HIGHLY recommend Douglas Crockford’s seminar within Front End Masters. It’s fantastic!) Don’t worry if it’s a little difficult to understand initially. Sometimes concepts take a bit to “click” — but once they do they’re invaluable!

So how would the Addition function look using Partial Application ? Let’s see!

Partial Application Function:

function add(x, y) {
 return x + y;
}
function partial_application(y) {
  return add(3, y);
}
partial_application(8); // 11

The Step-By-Step:

• We declare a function called add
• The function has two parameters that it takes. These are named x and y.
• When the function is passed two parameters we return the two parameters( x and y) added together.
• We declare a function called partial_application
• partial_application has a single parameter. This parameter is named y
• The function calls and returns the add function with 3 as the first parameter and y as the second
• As an example partial_application is called with a parameter of 8 and returns the value 11

This may be a little more confusing than our previous example for the simple reason that there are more parts, though I promise it’s not as complicated as it may seem. We setup an add function and a partial_application function. The partial_application function calls add with a 3 parameter and a y parameter. The function’s only job is to return a value from a partially appliedadd function.

Allow me to reiterate as I feel like that is the biggest hurdle to understanding Partial Application. The concept means to Partially Apply. This seems obvious, but in the field of Technology the word Application clearly has an alternative meaning and when you initially come across the term you would be forgiven for instinctively assigning the wrong meaning to the word.

The way that we are to look at it is this: let’s say Hugo works at the Pool applying sun-tan lotion to people(that’s a job, probably). When he comes into work he finds out that the person on the previous shift, a real nutter named Lenny, applied lotion to only the left side of all the sunbathers. In shock at the lack of symmetry Hugo hurriedly applies sun-tan lotion to the right side of all the sunbathers to make sure they are fully covered.

In this example Hugo is the partial_application function and Lenny the add function within the partial_application function. Lenny already has half of each person done, but none of them were fully applied until Hugo came into work and finished up the job.

In the code example above, theadd function has the value3pre-applied by our partial_application function, and though it only takes the one parameter(a unary function is not explicitly tied to currying) since it is taking that parameter and using it along with the already Partially Applied add function we consider it Partial Application.

Resources

Partial application - Wikipedia

Currying - Wikipedia

JavaScript: The Good Parts