{"id":7084,"date":"2019-07-25T20:14:26","date_gmt":"2019-07-25T20:14:26","guid":{"rendered":"https:\/\/ormuco.com\/?p=7084"},"modified":"2019-11-12T15:51:11","modified_gmt":"2019-11-12T15:51:11","slug":"blog-currying-functions-javascript-recursively","status":"publish","type":"post","link":"https:\/\/ormuco.com\/fr\/blog\/currying-functions-javascript-recursively","title":{"rendered":"Currying Functions in JavaScript, Recursively"},"content":{"rendered":"

The goal of this post is to be able to modify any JavaScript function so that it can be partially applied. This process is also known as currying<\/strong>. An example of currying could be a simple add:<\/p>\n

function<\/strong>\r\n<\/span>add (x, y, z) { return<\/strong> x + y + z }<\/span><\/pre>\n
We would like to be able to do the following:<\/p>\n
\/\/ yields a function that needs 2 more arguments\r\nlet<\/strong> partialAdd = add(1)<\/span>\/\/ yields 6\r\nlet<\/strong> result = partialAdd(2, 3)<\/span><\/pre>\n
It means that we can call the function however we want (fully or partially). If the function is partially called, it returns a function that expects the remaining arguments:<\/p>\n
add(1, 2, 3) \/\/ yields 6\r\nadd(1)(2)(3) \/\/ yields 6<\/span><\/pre>\n
Starting point<\/h2>\n
We will start by looking at a function found online\u00a0here<\/a>.<\/p>\n
function<\/strong> schonfinkelize(fn) {\r\n     var<\/strong> slice = Array.prototype.slice,\r\n        stored_args = slice.call(arguments, 1);\r\n     return<\/strong> function<\/strong> () {\r\n        var<\/strong> new_args = slice.call(arguments),\r\n              args = stored_args.concat(new_args);\r\n        return<\/strong> fn.apply(null, args);\r\n     };\r\n}<\/span><\/pre>\n
This is an interesting function and a good attempt at making functions partially in JavaScript. The basic idea of this function is that it takes the original arguments and returns a function that waits for the remaining arguments.<\/p>\n
You can use it this way:<\/p>\n
\/\/ yields a function\r\nlet<\/strong> addSecondHalf = schonfinkelize(add, 1)<\/span>\/\/ yields 6\r\naddSecondHalf(2, 3)<\/span><\/pre>\n
The issue with this function is that we can\u2019t do something like:<\/p>\n
\/\/ Doesn't work\r\nschonfinkelize(add, 1)(2)(3)<\/span><\/pre>\n
The reason it doesn\u2019t work is because schonfinkelize is not called recursively by looking if we have enough arguments to call the function. In order to make the function work, we would have to do something like the following:<\/p>\n
\/\/ yields 6\r\nschonfinkelize(schonfinkelize(add, 1)(2))(3)<\/span><\/pre>\n
Solving it recursively<\/h2>\n
The first thing we need to ask ourselves is how we know if we have enough arguments to call the function. It turns out JavaScript has this built-in. Every function in JavaScript has the attribute length, which returns the number of arguments a function is expecting. So in our case:<\/p>\n
\/\/ yields 3\r\nadd.length<\/span><\/pre>\n
With this information, we know that the base case of our recursive call will be called if we have enough arguments to call the function. With this in mind, let\u2019s look at the first solution:<\/p>\n
function<\/strong> partialApply(fn) {\r\n    let<\/strong> slice = Array.prototype.slice\r\n    let<\/strong> curr_args = slice.call(arguments, 1)<\/span>    if<\/strong> (<\/strong>fn.length > curr_args.length) {\r\n        return<\/strong> function<\/strong>() {\r\n            let<\/strong> new_args = slice.call(arguments)\r\n            let<\/strong> args = curr_args.concat(new_args)\r\n            return<\/strong> partialApply.apply(null<\/strong>, [fn].concat(args))\r\n        }\r\n    }\r\n        \r\n    return<\/strong> fn.apply(null, curr_args)\r\n}<\/span><\/pre>\n
So what does this function do exactly? We recursively call partialApply as long as we don\u2019t have enough arguments. This ensures that we will wait until enough arguments are passed before computing any result. The base case is reached when enough arguments have been passed through one or many calls. Since we return in the recursive if statement, we can simply return the result at the end (that satisfies the base case).<\/p>\n
This function allows us to do something like:<\/p>\n
partialApply(add, 1)(1)(2) \/\/ yields 4\r\npartialApply(add)(1)(1)(2) \/\/ yields 4\r\npartialApply(add)(1, 1)(2) \/\/ yields 4\r\npartialApply(add, 1, 1, 2) \/\/ yields 4<\/span><\/pre>\n
Using the function prototype<\/h2>\n
This is great, but it feels awkward to have to pass the function as a parameter. It would be great if we could curry directly on the function:<\/p>\n
add.partialApply(1)(1)(2) \/\/ yields 4\r\nadd.partialApply(1, 1)(2) \/\/ yields 4\r\nadd.partialApply(1, 1, 2) \/\/ yields 4<\/span><\/pre>\n
This solution is very similar to the one above but it will be bound to the function prototype. Here is the final implementation of currying properly in JavaScript:<\/p>\n
Function.prototype.partialApply = function<\/strong>() {\r\n    let<\/strong> fn = this\r\n    let<\/strong> slice = Array.prototype.slice\r\n    let<\/strong> curr_args = slice.call(arguments)<\/span>    if<\/strong> (fn.length > curr_args.length) {\r\n        return<\/strong> function<\/strong> () {\r\n            let<\/strong> new_args = slice.call(arguments)\r\n            let<\/strong> args = curr_args.concat(new_args)\r\n            return<\/strong> fn.partialApply.apply(fn, args)\r\n        }\r\n    }\r\n        \r\n    return<\/strong> fn.apply(null, curr_args)\r\n}<\/span><\/pre>\n
In this function, we utilize the fact the JavaScript functions are first-class objects. This means that any function is an instance of the Function prototype and therefore will have access to our function partialApply. The this<\/code> keyword in JavaScript refers to the instance calling that function.<\/p>\n
The base case remains unchanged (it simply computes according to the original function definition). It gets interesting when we look at the recursive call because we need to ensure that context is properly passed.<\/p>\n
return<\/strong> fn.partialApply.apply(fn, args)<\/span><\/pre>\n
We can\u2019t simply call partialApply. We need to apply it because we only have access to the arguments in the form of an array. The other interesting part of this line is that we have to pass in fn as the first argument, since it defines what this<\/code>\u00a0(the context) will be in the function call. If we simply did:<\/p>\n
return<\/strong> fn.partialApply.apply(null<\/strong>, args)<\/span><\/pre>\n
It would yield the error (\u201cCannot read property \u2018apply\u2019 of undefined\u201d), since we would not bind\u00a0this<\/code>\u00a0to the right function in the recursive call.<\/p>\n
Usage<\/h2>\n
So now, how can I make it so all my functions can be partially applied? You can simply call\u00a0.partialApply()<\/code>\u00a0on any function declaration you make. It looks like this.<\/p>\n
let<\/strong> add = function<\/strong>(x, y, z) {\r\n    return<\/strong> x + y + z\r\n}.partialApply()<\/span>let<\/strong> a = add(1, 2, 3) \/\/ yields 6\r\nlet<\/strong> b = add(1)(2)(3) \/\/ yields 6\r\nlet<\/strong> c = add(1)(2, 3) \/\/ yields 6<\/span><\/pre>\n
So this is how you curry your functions in JavaScript!<\/p>\n
This article was originally published on\u00a0Medium<\/a>.<\/em><\/p>\n
\"OpenStack<\/a><\/p>","protected":false},"excerpt":{"rendered":"
The goal of this post is to be able to modify any JavaScript function so that it can be partially applied. This process is also known as currying. An example of currying could be a simple add: function add (x, y, z) { return x + y + z } We would like to be […]<\/p>","protected":false},"author":7,"featured_media":7093,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"spay_email":""},"categories":[74],"tags":[],"jetpack_featured_media_url":"https:\/\/ormuco.com\/wp-content\/uploads\/2019\/07\/JavaScript-1.png","yoast_head":"\nCurrying Functions in JavaScript, Recursively - Ormuco<\/title>\n<meta name=\"description\" content=\"It's useful sometimes to call functions partially and get a resulting function that expects the remaining arguments. This can be implemented in JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ormuco.com\/fr\/blog\/currying-functions-javascript-recursively\/\" \/>\n<meta property=\"og:locale\" content=\"fr_CA\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Currying Functions in JavaScript, Recursively - Ormuco\" \/>\n<meta property=\"og:description\" content=\"It's useful sometimes to call functions partially and get a resulting function that expects the remaining arguments. This can be implemented in JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ormuco.com\/fr\/blog\/currying-functions-javascript-recursively\/\" \/>\n<meta property=\"og:site_name\" content=\"Ormuco\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Ormuco\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-25T20:14:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-12T15:51:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ormuco.com\/wp-content\/uploads\/2019\/07\/JavaScript-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ricanare\" \/>\n<meta name=\"twitter:site\" content=\"@Ormuco_Inc\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"3 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/ormuco.com\/#organization\",\"name\":\"Ormuco Inc\",\"url\":\"https:\/\/ormuco.com\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/Ormuco\/\",\"https:\/\/www.linkedin.com\/company\/ormuco-inc-\/\",\"https:\/\/www.youtube.com\/channel\/UCbzzf28bWMg0zhOrq0fI_sQ\",\"https:\/\/twitter.com\/Ormuco_Inc\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/ormuco.com\/#logo\",\"inLanguage\":\"fr-CA\",\"url\":\"https:\/\/ormuco.com\/wp-content\/uploads\/2018\/07\/Ormuco_logo.png\",\"width\":360,\"height\":89,\"caption\":\"Ormuco Inc\"},\"image\":{\"@id\":\"https:\/\/ormuco.com\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ormuco.com\/#website\",\"url\":\"https:\/\/ormuco.com\/\",\"name\":\"Ormuco\",\"description\":\"Next Generation Mobile Computing\",\"publisher\":{\"@id\":\"https:\/\/ormuco.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/ormuco.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-CA\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/ormuco.com\/blog\/currying-functions-javascript-recursively\/#primaryimage\",\"inLanguage\":\"fr-CA\",\"url\":\"https:\/\/ormuco.com\/wp-content\/uploads\/2019\/07\/JavaScript-1.png\",\"width\":1200,\"height\":628,\"caption\":\"JavaScript\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ormuco.com\/blog\/currying-functions-javascript-recursively\/#webpage\",\"url\":\"https:\/\/ormuco.com\/blog\/currying-functions-javascript-recursively\/\",\"name\":\"Currying Functions in JavaScript, Recursively - Ormuco\",\"isPartOf\":{\"@id\":\"https:\/\/ormuco.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ormuco.com\/blog\/currying-functions-javascript-recursively\/#primaryimage\"},\"datePublished\":\"2019-07-25T20:14:26+00:00\",\"dateModified\":\"2019-11-12T15:51:11+00:00\",\"description\":\"It's useful sometimes to call functions partially and get a resulting function that expects the remaining arguments. This can be implemented in JavaScript.\",\"inLanguage\":\"fr-CA\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ormuco.com\/blog\/currying-functions-javascript-recursively\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/ormuco.com\/blog\/currying-functions-javascript-recursively\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/ormuco.com\/blog\/currying-functions-javascript-recursively\/#webpage\"},\"author\":{\"@id\":\"https:\/\/ormuco.com\/#\/schema\/person\/8b8f5998415f89441f36eea9beb32fb6\"},\"headline\":\"Currying Functions in JavaScript, Recursively\",\"datePublished\":\"2019-07-25T20:14:26+00:00\",\"dateModified\":\"2019-11-12T15:51:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ormuco.com\/blog\/currying-functions-javascript-recursively\/#webpage\"},\"publisher\":{\"@id\":\"https:\/\/ormuco.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/ormuco.com\/blog\/currying-functions-javascript-recursively\/#primaryimage\"},\"articleSection\":\"Developers Corner\",\"inLanguage\":\"fr-CA\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/ormuco.com\/#\/schema\/person\/8b8f5998415f89441f36eea9beb32fb6\",\"name\":\"Laurent Jacob\",\"description\":\"Laurent is on the team that\\u2019s developing Ormuco's dynamic application deployment platform. He graduated with a Bachelor of Software Engineering from McGill University in 2015. After selling a video game he co-developed shortly after graduation, Laurent worked in the cryptocurrency start-up space before joining Ormuco. He's been coding since age 14.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/laurent-jacob\",\"https:\/\/twitter.com\/ricanare\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","jetpack_shortlink":"https:\/\/wp.me\/pa8ID1-1Qg","_links":{"self":[{"href":"https:\/\/ormuco.com\/fr\/wp-json\/wp\/v2\/posts\/7084"}],"collection":[{"href":"https:\/\/ormuco.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ormuco.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ormuco.com\/fr\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/ormuco.com\/fr\/wp-json\/wp\/v2\/comments?post=7084"}],"version-history":[{"count":5,"href":"https:\/\/ormuco.com\/fr\/wp-json\/wp\/v2\/posts\/7084\/revisions"}],"predecessor-version":[{"id":7950,"href":"https:\/\/ormuco.com\/fr\/wp-json\/wp\/v2\/posts\/7084\/revisions\/7950"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ormuco.com\/fr\/wp-json\/wp\/v2\/media\/7093"}],"wp:attachment":[{"href":"https:\/\/ormuco.com\/fr\/wp-json\/wp\/v2\/media?parent=7084"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ormuco.com\/fr\/wp-json\/wp\/v2\/categories?post=7084"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ormuco.com\/fr\/wp-json\/wp\/v2\/tags?post=7084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}