Currying & partial application

Give a function its arguments in steps

In JavaScript, a function is a value, like a number or a string. You can keep it in a variable. You can pass it to map. You can return it from another function.

This lesson uses that to change when a function gets its arguments. The job stays the same: add tax, format a price, sort products. But you give one argument now and the rest later. That way, a setting you use again and again, like a tax rate, is written only once.

The table below shows each one with a short example. Read each row as: "this pattern does this, like in this code." The last row is a puzzle you'll meet later in the lesson.

This lesson builds on two earlier ones. Closures explains how a function remembers variables from the place it was made; saved arguments are kept that way. call, apply & bind explains bind, which can save the first arguments of a function. The sum(1)(2)(3) puzzle also uses ideas from functions are objects and object-to-primitive conversion.

Think of a function as a form with blanks. A normal call fills in every blank at once: priceWithTax(0.08, 50). Partial application fills in some blanks now. You get back a new form with fewer blanks.

Here is the shape. addTax takes a rate and returns a new function. That new function takes a price. So const addEightPercent = addTax(0.08) fills in the rate. Later, addEightPercent(50) fills in the price and gives 54.

The step-through below shows three ways to save the first arguments:

• Closure: addTax returns a function that remembers rate. A function that remembers variables from the place it was made is called a closure.
• bind: multiply.bind(null, 2) makes a new function. The first argument to bind, null, sets this. The next one, 2, is saved as the first argument of multiply.
• Partial helper: a small partial function that saves any number of first arguments, and puts the later ones after them.

1const addTax = (rate) => (price) => {Run2  return Number((price * (1 + rate)).toFixed(2));3};4 5const addEightPercent = addTax(0.08);6console.log(addEightPercent.length);7console.log(addEightPercent(50));

Watch the lines that print length. Every function has a length: the number of parameters it lists. A function made by bind lists one less for each saved argument.

The partial helper returns (...later) => .... Here ...later is a rest parameter: it collects all the arguments into an array. A rest parameter isn't counted, so length is 0, even though a suffix is still needed. So length is a hint, not a promise.

Currying changes how you call a function that takes several arguments. Instead of add3(1, 2, 3), you write curriedAdd3(1)(2)(3). That is three calls in a row:

• Each call saves its argument and returns another function.
• When all the arguments have arrived, the original function runs and gives the result.

Until the last call, you are holding a function, not the answer.

The step-through uses a small curry helper. Here is what each part does:

• curry(fn) returns a function called curried. It collects the arguments it gets into args, with a rest parameter.
• Line 3 checks: are there at least fn.length arguments? For add3, that's 3.
• If yes, line 4 runs fn with all of them.
• If not, line 6 returns a new function. It waits for more arguments and adds them to the saved ones.

1function curry(fn) {Run2  return function curried(...args) {3    if (args.length >= fn.length) {4      return fn(...args);5    }6    return (...more) => curried(...args, ...more);7  };8}9 10const add3 = (a, b, c) => a + b + c;11const curriedAdd3 = curry(add3);12console.log(curriedAdd3(1)(2)(3));

The helper only counts arguments, so you can also give them in groups. curriedAdd3(1)(2)(3) and curriedAdd3(1, 2)(3) both reach three arguments, and both print 6.

The curry helper trusts fn.length. But length doesn't always count every parameter:

• It counts from the left and stops at the first parameter with a default value, like b = 10.
• It never counts a rest parameter, like ...values.

So the helper can run a function too early. The code below shows both cases. Each function has a length of 1, so curry runs it after just one argument.

1function curry(fn) {2  return function curried(...args) {3    return args.length >= fn.length4      ? fn(...args)5      : (...more) => curried(...args, ...more);6  };7}8 9const withDefault = (a, b = 10, c) => a + b + c;10const withRest = (label, ...values) => label + values.join("-");11console.log(withDefault.length);12console.log(typeof curry(withDefault)(1));13console.log(withRest.length);14console.log(curry(withRest)("id"));

Look at line 12. curry(withDefault)(1) already ran withDefault, with c still missing. The result is NaN ("not a number"), so typeof prints number, not function. Line 14 also runs at once, so curry(withRest)("id") prints just id.

There are two common fixes:

• Tell the helper the count yourself, as in the code below.
• Write the curried function by hand, with one arrow for each argument: const between = (min) => (max) => (value) => value >= min && value <= max.

1function curryN(fn, arity) {2  return function curried(...args) {3    if (args.length >= arity) return fn(...args);4    return (...more) => curried(...args, ...more);5  };6}7 8const withDefault = (a, b = 10, c) => a + b + c;9const addThreeValues = curryN(withDefault, 3);10console.log(addThreeValues(1)(2)(3));

curryN takes the count as a second argument, here 3. It doesn't look at fn.length, so the default on b can't make it stop early. It collects all three values, 1, 2, and 3, and prints 6. The cost: if you change the function's parameters later, you must change the count too.

A well-known puzzle asks you to write a sum that works like sum(1)(2)(3). Each call returns a function that remembers the running total.

This is not normal currying. A curried function knows how many arguments to wait for. A chain like this could go on forever. So it needs a separate signal that says "stop now and give me the number". The lab shows two signals:

• Convert it to a plain value. A function is an object, so it can have extra properties. Symbol.toPrimitive is a special property name. When JavaScript needs to turn an object into a plain value, like a number or a string, it calls the method stored there.
• End with an empty call. A call with no argument, (), returns the total.

1function sum(total) {2  function next(value) {3    return sum(total + value);4  }5  next[Symbol.toPrimitive] = () => total;6  return next;7}8 9console.log(`${sum(1)(2)}`);10console.log(sum(1)(2) + 0);11console.log(sum(1)(2)(3) + 0);

In the first version, `${sum(1)(2)}` is a template string, so it needs a string. And sum(1)(2) + 0 needs a plain value to add. Both make JavaScript call Symbol.toPrimitive, which returns the saved total.

A plain console.log(sum(1)(2)) doesn't ask for a plain value, so the console may show the function instead. The second version is easier to follow: the last () ends the chain.

Look at items.map((item) => format(item)). The arrow function only takes item and hands it to format. You can drop that wrapper and write items.map(format). This is called point-free style: you don't name the value, item, that passes through.

It is safe when the function expects exactly what the caller passes. That needs care, because map passes three arguments to its function, not one: the value, its index, and the whole array.

1const items = ["  tea", "cake  "];2const format = (item) => item.trim().toUpperCase();3 4console.log(items.map((item) => format(item)).join(", "));5console.log(items.map(format).join(", "));6console.log(["1", "2", "3"].map(parseInt).join(", "));7 8const addTax = (rate) => (price) => price * (1 + rate);9const formatMoney = (value) => "$" + value.toFixed(2);10const withSalesTax = (price) => formatMoney(addTax(0.08)(price));11console.log([10, 20].map(withSalesTax).join(", "));

The best-known trap is ["1", "2", "3"].map(parseInt). parseInt turns a string into a whole number. Its second argument is the radix, the number base: 10 for everyday numbers, 2 for binary. map passes the index as that second argument. So the index changes the base by accident:

• parseInt("1", 0): base 0 means "choose the base for me", so this gives 1.
• parseInt("2", 1): there is no base 1, so this gives NaN.
• parseInt("3", 2): in base 2 the only digits are 0 and 1, so this gives NaN.

The fix is to write the wrapper: (value) => parseInt(value, 10). It takes only the value and always passes 10.

1const items = ["  tea", "cake  "];2const format = (item) => item.trim().toUpperCase();3 4console.log(items.map((item) => format(item)).join(", "));5console.log(items.map(format).join(", "));6console.log(["1", "2", "3"].map(parseInt).join(", "));7 8const addTax = (rate) => (price) => price * (1 + rate);9const formatMoney = (value) => "$" + value.toFixed(2);10const withSalesTax = (price) => formatMoney(addTax(0.08)(price));11console.log([10, 20].map(withSalesTax).join(", "));

Lines 4 and 5 print the same thing, TEA, CAKE. Line 6 is the trap and prints 1, NaN, NaN. Lines 8 to 11 build prices from small curried helpers. toFixed(2) writes a number with two digits after the point, so line 11 prints $10.80, $21.60.

These patterns help most when the same setting appears in many calls. For example:

• a currency, a language, or a tax rate
• a rule that checks a form field
• a prefix for log messages, or the start of an API address
• a sort direction

They help less when the smaller function is used only once. Then it just hides the real arguments.

1const formatPrice = (currency) => (price) =>2  currency + price.toFixed(2);3 4const dollars = formatPrice("$");5console.log(dollars(12));6console.log(dollars(4.5));

Line 1 takes the currency symbol and returns a function that still needs a price. Line 2 is what that function returns. toFixed(2) writes the price with two digits after the point. Line 4 makes the dollar formatter once. Lines 5 and 6 use it for two prices and print $12.00 and $4.50.

The price, the part that changes, comes last. So you could also pass dollars straight to map.

1const mapWith = (transform) => (items) => items.map(transform);2const upper = (item) => item.toUpperCase();3const upperItems = mapWith(upper);4 5console.log(upperItems(["tea", "cake"]).join(", "));

Line 1 makes mapWith. It takes the job first, transform, and the list last, items. Line 2 makes upper, which turns a word into capital letters. Line 3 fills in the job: mapWith(upper) returns a function that waits for a list. Line 5 gives it ["tea", "cake"] and prints TEA, CAKE.

This order is called data-last: settings first, changing data last. It isn't a rule of the language. But it gives your small helpers the same shape, so they are easy to join together.

1const makeButtonHandler = (action) => (event) =>2  action + ":" + event.currentTarget.dataset.id;3 4const openSettings = makeButtonHandler("open");5console.log(openSettings({ currentTarget: { dataset: { id: "settings" } } }));

A factory is a function that makes other functions. makeButtonHandler takes an action now and returns a click handler. A page can call makeButtonHandler("open") once and attach the result to a button.

When the button is clicked, the browser calls the handler with an event object. event.currentTarget is the button, and dataset.id reads its data-id attribute. Line 5 passes a small object with the same shape instead of a real click, so you can see the output: open:settings.

The table below sums up where these shapes fit. Read each row as: "in this kind of code, is it a good fit, and why?"

Sorting is a common place to choose. In the code below, byPrice takes a direction and returns a compare function. A compare function gets two items, a and b. It returns a negative number if a goes first, or a positive number if b goes first.

1const byPrice = (direction) => (a, b) =>2  direction === "asc" ? a.price - b.price : b.price - a.price;3 4const products = [5  { name: "Pencil", price: 1 },6  { name: "Notebook", price: 4 },7  { name: "Backpack", price: 30 },8];9 10console.log(products.toSorted(byPrice("desc")).map((item) => item.name).join(", "));

Common mix-ups

• "Partial application and currying are the same." They often appear together, but they are different. Partial application saves some arguments. Currying turns a function into a chain of calls, one per argument.
• "Point-free is always cleaner." It is cleaner only when the arguments the caller passes match the function's parameters. map(parseInt) is where it goes wrong.
• "fn.length counts all the parameters." It stops at the first default value and skips rest parameters.
• "bind only changes this." It can also save the first arguments. That is partial application.
• "Curried functions cost nothing." Each call in the chain usually makes a new function. That is fine almost always, but it is still work for the computer.
• "Chainable sums are a good pattern for real code." They are mostly a puzzle about closures and conversion. Teams find plain functions easier to read.

The table below puts the three patterns side by side. Each column is one pattern. Each row is a question you can ask about a piece of code.

Key takeaways

• Partial application gives some arguments now and returns a smaller function for the rest.
• Currying lets you give the arguments over several calls. The original function runs when all of them have arrived.
• fn.length stops at the first default value and skips rest parameters, so a curry helper can run a function too early.
• The sum(1)(2)(3) chain is a good puzzle for learning closures and conversion, not a pattern for everyday code.
• Point-free style is safe only when the caller's arguments match the function's parameters.

Up next: Composition & pipelines, where you join small functions like these into longer chains.