{"componentChunkName":"component---src-templates-blog-post-js","path":"/wth-is-currying/","result":{"data":{"site":{"siteMetadata":{"title":"Yash Gupta"}},"markdownRemark":{"id":"459ff37f-21f1-5f83-a479-3e2a0be2a09b","excerpt":"I know that you’re salivating, perhaps the dev world has become too delicious with JAMStack and now I’m talking about curry? So before you starve to death with…","html":"

I know that you’re salivating, perhaps the dev world has become too delicious with JAMStack and now I’m talking about curry? So before you starve to death with these wonders of dev world let me introduce you to what currying is in general.

\n

Currying was named after Haskell Curry, what currying essentially means is taking a function which takes multiple parameter and converting it in to a function which only takes one parameter and returns a functions which then takes the next parameter.

\n

Currying is not JavaScript specific it is also a mathematical things just like function [ Remember good ol’ f(x)? ]

\n
// Not curried\nconst add = (x, y) => x + y\n\n// Curried\nconst add = x => y => x + y\nconst addFive = add(5)\naddFive(6) // 11
\n

As you can see using Currying we were able to have functions that are more definite in what they do, this in turn greatly simplifies our code.

\n

With the help of currying we can essentially pre-load functions with an argument in order to receive a new function that remembers those arguments.

\n

Let’s make a function that can help us in Currying in other functions.\nNow pay close attention,\nThis function is going to take a function fn and return a function $curry that takes a single argument and performs the operation of the function fn.

\n

Let’s do this step by step

\n
// This function takes a function `fn` as a parameter.\nfunction curry(fn) {\n  // Let us determine the arity of `fn`\n  // Arity is the number of parameter taken by `fn`\n  const arity = fn.length\n\n  // ...\n}
\n
function curry(fn) {\n  const arity = fn.length\n\n  // Let's return the $curry function.\n  // Let's have all the arguments ( ...args ) being passed in $curry\n  // Remember we are returning a function so we can pass args in it.\n  return function $curry(...args) {\n    // ...\n  }\n}
\n
function curry(fn) {\n  const arity = fn.length\n  return function $curry(...args) {\n    // Let's return the function with all the passed arguments.\n    // This code maybe stupid until you read the next para...\n    return $curry.bind(null, ...args)\n\n    // ...\n  }\n}
\n

We can’t just keep returning functions and functions we need a result. Let it be adding digits together and getting an output.

\n

Let’s add a condition for this.

\n
function curry(fn) {\n  const arity = fn.length\n  return function $curry(...args) {\n    if (args.length < arity) {\n      return $curry.bind(null, ...args)\n    }\n    return fn.call(null, ...args)\n  }\n}
\n

By comparing the length of the arguments args.length we can know how many arguments have been passed in the function.

\n

Things will become more clear as I demonstrate how we are using the curry function to curry other functions which take multiple parameters.

\n

For the sake of simplicity let’s take an add function which takes 3 values (parameters) and add them together.

\n
const add = (x, y, z) => x + y + z\n\nconst curriedAdd = curry(add)\n\nconst addFive = curriedAdd(5) // args.length = 1\n\nconst addFiveAndSix = addFive(6) // args.length = 2\n\nconst output = addFiveAndSix(8) // args.length = 3\n\n// The funciton can be called now as `args.length` < arity is false.\nconsole.log(output) // 19
\n

args.length is able to give us the number of arguments because of return $curry.bind(nullundefined ...args) . The $curry function contains all the arguments passed above the any given instance.

\n

I hope this clears everything about how the function is working. If you have any other doubts you can tweet them to me.

\n

( @yashguptaz )

\n

Adding Taste to your Code.

\n

Currying allows a wonderful phenomenon called partial application.\nAccording to Wikipedia partial application can be defined as -

\n
\n

Partial Application refers to the process of fixing a number of arguments to a function, producing another function of smaller arity.

\n
\n

The definition is pretty straightforward, we reduce the number of parameters a function takes by currying it.

\n

Let’s curry a well known function map and see how it changes our life.

\n
// Before Currying\nconst allTheChildren = elements => map(elements, getChildren)\n\n// Let's curry map\nconst map = curry((fn, f) => f.map(fn))\n\n// AFter Currying\nconst allTheChildren = map(getChildren)
\n

The effect becomes really obvious when you are using map multiple times. And that’s how we reduce a ton of boilerplate code.

\n

You can curry pretty much any function that takes more than one parameter. And use Partial Application.

\n

Isn’t it amazing? Although I am myself a beginner at currying I found it exciting to share. If you want to share something or ask a question or would like to solve or understand something together , you can hook me up on twitter. I am @yashguptaz on the internet.

","frontmatter":{"title":"🍛 What the heck is Currying? ft. JavaScript","date":"March 18, 2020","description":"Currying is an essential part of Functional Programming, let's see what the heck is it."}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/wth-is-currying/","previous":{"fields":{"slug":"/quality-ssr-with-react/"},"frontmatter":{"title":"Quality Server-Side Rendering with React"}},"next":null}}}