currying transforms a function that takes multiple arguments into a series of nesting functions that return functions that take the subsequent arguments inline. The last function will do the final computation and return the necessary value<\/strong>. <\/p>\n\n\n\nThat might sound a little confusing when said in theory. The code snippet below will give you a better understanding.<\/p>\n\n\n\n
\/\/UNCURRIED FUNCTION\n\/\/Takes 3 arguments and returns the sum of all\n\nfunction addNums (a,b,c){\n return a + b + c;\n}\nconsole.log(addNums(2,3,4));\n\n\/\/Returns: 9<\/code><\/pre>\n\n\n\nThe code snippet above shows a simple function that calculates the sum of three numbers passed as arguments. Let’s transform it into a curried function.<\/p>\n\n\n\n
\/\/CURRIED FUNCTION\n\nfunction addNums(a){\n return function (b){\n return function(c){\n return a + b + c\n }\n }\n}\n\nconsole.log(addNums(3)(4)(7))\n\/\/Returns: 14<\/code><\/pre>\n\n\n\nIn the code snippet above, the function addNums()<\/code> takes a single argument a<\/code> and returns the second function, which takes the argument b<\/code> , which in turn returns a third function which in turn takes arguments c<\/code>. The third function computes the sum of the three numbers and returns a value.<\/p>\n\n\n\nTip<\/strong>: In programming, arity<\/em> <\/strong>is a term used to refer to the arguments passed in a function. For example, fnOne(a,b)<\/code> is a 2-arity function as it takes two arguments. fnTwo(x,y,z)<\/code> is a 3-arity function as it takes three arguments.<\/p>\n\n\n\nBelow are several practicals to help you have a solid understanding of currying in Javascript.<\/p>\n\n\n\n
<\/span>Currying in JavaScript: Example 1<\/span><\/h3>\n\n\n\nTake a look at the function below.<\/p>\n\n\n\n
function sportBike(owner,year,model){\n return owner +\" rides a \" + year + \" \" + model;\n}\nconsole.log(sportBike(\"John\",2015,\"Kawasaki\"));\n\n\/*Output:\nJohn rides a 2015 Kawasaki\n<\/code><\/pre>\n\n\n\nIn the code above, the sportBike()<\/code> function takes three arguments: owner, year, and model. The function uses string concatenation to form a readable sentence, as seen in the output section. You can use currying to transform this function, as shown below.<\/p>\n\n\n\nfunction sportBike(owner) {\n return function (year) {\n return function (model) {\n return owner + \" rides a \" + year + \" \" + model;\n };\n };\n}<\/code><\/pre>\n\n\n\nIn the code above, the sportBike()<\/code> function takes one argument – owner<\/code> and returns a function. The returned function, in turn, takes one argument – year<\/code> and also returns another function. The returned function also takes one more argument – model<\/code> and returns the expected value.<\/p>\n\n\n\nTo call the sportBike()<\/code> function after currying, you will write it as follows:<\/p>\n\n\n\nsportBike(\"John\")(2015)(\"Kawasaki\");\n\/*Output:\nJohn rides a 2015 Kawasaki\n<\/code><\/pre>\n\n\n\nNotice that you are not passing all three arguments in one function this time. Instead, you are using the syntax sportBike()()()<\/code> , which allows you to pass the argument for every function in order. Please note that these arguments are the ones that invoke the functions.<\/p>\n\n\n\nTherefore, if you used the syntax sportBike()()<\/code>, the last function that returns the final value (string) will not execute.<\/p>\n\n\n\nTo keep things clean and neat, you can also use arrow functions to have a more readable code. See the snippet below.<\/p>\n\n\n\n
const sportBike = (owner) => (year) => (model) => \n owner + \" rides a \" + year + \" \" + model;\n \nsportBike(\"John\")(2015)(\"Kawasaki\");\n\n\/*Output:\nJohn rides a 2015 Kawasaki<\/code><\/pre>\n\n\n\nThere are situations where you might need to reuse the same value. Instead of invoking a function with the same variable multiple times, you can decide to break the functions as shown below.<\/p>\n\n\n\n
function sportBike(owner) {\n return function (year) {\n return function (model) {\n return owner + \" rides a \" + year + \" \" + model;\n };\n };\n}\n\nlet yearOfManufacture = sportBike(\"John\") \/\/Returns the second functon which expects the argument - year\nlet bikeName = yearOfManufacture(2019) \/\/Returns the third (last) functon which expects the argument - model\n\nconsole.log(bikeName(\"Kawasaki\"))\n\/*Output:\nJohn rides a 2019 Kawasaki\n<\/code><\/pre>\n\n\n\nSo what is happening here? You will notice that there are two new functions in our program – yearOfManufacture()<\/code> and bikeName()<\/code>. Yes! Those two are indeed functions.<\/p>\n\n\n\nThe yearOfManufacture<\/code> represents the second function in the program. That’s because it invokes the first function sportBike()<\/code> and passes the first argument – owner<\/code>. This function will, in turn, return the second function that requires the second argument – year<\/code>. Therefore, to pass the year<\/code> argument (second argument<\/em>), you will need to invoke the yearOfManufacture<\/code> function.<\/p>\n\n\n\nbikeName()<\/code> represents the third function in the program. It invokes the yearOfManufacture()<\/code> function that returns a function (third function<\/em>) that takes the model<\/code> argument. That is also the last function in the program and returns the last value – a string.<\/p>\n\n\n\n<\/span>Currying in JavaScript: Example 2<\/span><\/h3>\n\n\n\nAlternatively, you can write your functions the standard way (without currying<\/em>), then use a library like Lodash to transform them into a curryable function. Take a look at the code snippet below.<\/p>\n\n\n\nfunction addNums(a, b, c) {\n return console.log(a + b + c);\n}\naddNums(3,4,5)\n\n\/*Output:\n12<\/code><\/pre>\n\n\n\nThe code above shows a function, addNums()<\/code>, that takes three arguments and returns the sum. It is a simple standard function without any currying functionalities. To transform addNums()<\/code> to a curryable function, you would write it as follows.<\/p>\n\n\n\nlet log = console.log;\n\nfunction addNums(a) {\n return function (b) {\n return function (c) {\n return a + b + c;\n };\n };\n}\nlog(addNums(3)(4)(5))\n\n\/*Output:\n12<\/code><\/pre>\n\n\n\nPretty easy, right? If you wish to write less code, you can use a library like Lodash, which automatically transforms your standard function into a curryable one. To start, install the Lodash library using the command below if you are in a NodeJS environment.<\/p>\n\n\n\n
npm install lodash<\/code><\/pre>\n\n\n\nAfter a successful install, use Lodash to transform the addNums()<\/code> function into a currayble function. See the code below.<\/p>\n\n\n\nimport _ from \"lodash\"\nlet log = console.log;\n\nfunction addNums(a, b, c) {\n return console.log(a + b + c);\n}\naddNums = _.curry(addNums)\nlog(addNums(12)(13)(14));\n\n\/*Output:\n39<\/code><\/pre>\n\n\n\nIn the first line, import _ from \"lodash\"<\/code> imports the whole Lodash library to your program. To transform any function into a currayble function using Lodash, use the curry()<\/code> method as shown in the line addNums = _.curry(addNums)<\/code>. <\/p>\n\n\n\nQuite interesting, right? With one line, you have converted a whole function to a curryable function. The code looks cleaner and is easy to read and debug.<\/p>\n\n\n\n
<\/span>Currying in JavaScript: Example 3<\/span><\/h3>\n\n\n\nThis section will show you a real-life scenario where you can implement Javascript currying using a library like Lodash. Take a look at the code below.<\/p>\n\n\n\n
let log = console.log\n\nlet studentCourses = [\n { student: \"John\", course: \"Computer Science\" },\n { student: \"Jane\", course: \"Engineering\" },\n { student: \"Billy\", course: \"Engineering\" },\n { student: \"Essyy\", course: \"Business Management\" },\n];\n\nlet hasElement = (course, obj) => obj.course === course\nlet engineeringStudents = studentCourses.filter((x) => hasElement(\"Engineering\", x));\nlog(engineeringStudents);\n\n\/*Output:\n[ { student: 'Jane', course: 'Engineering' },\n { student: 'Billy', course: 'Engineering' } ]\n<\/code><\/pre>\n\n\n\nIn the code above, you have a studentCourses[]<\/code> array that holds several objects, each with a student name and course. The aim is to have a program that can filter students by their courses.<\/p>\n\n\n\nThe line let engineeringStudents = studentCourses.filter((x) => hasElement(\"Engineering\", x));<\/code> calls the Javascript filter method on the studentCourses<\/code> array. The filter method takes a callback function that gets every item x<\/code> in the array which is checked against the hasElement()<\/code> function.<\/p>\n\n\n\nThe hasElement()<\/code> function takes two arguments, the element you want to filter and the item fetched from the array. It returns a true or false value. Values that evaluate as true are stored in the engineeringStudents<\/code> variable and later logged in the console.<\/p>\n\n\n\nYou have probably noticed that the hasElement()<\/code> function is not curryable. To make it curryable, you will tweak the code as shown below.<\/p>\n\n\n\nfunction hasElement(course) {\n return function (obj) {\n return obj.course === course;\n };\n}\n\nlet engineeringStudents = studentCourses.filter(hasElement(\"Engineering\"));\nlog(engineeringStudents);\n\n\/*Output:\n[ { student: 'Jane', course: 'Engineering' },\n { student: 'Billy', course: 'Engineering' } ]<\/code><\/pre>\n\n\n\nBut why write all that code when you can use a library like Lodash? To transform the hasElement()<\/code> to a curryable function with Lodash, you would write your code as shown below.<\/p>\n\n\n\nlet hasElement = _.curry((course, obj) => obj.course === course)\n\nlet engineeringStudents = studentCourses.filter(hasElement(\"Engineering\"));\nlog(engineeringStudents);\n\n\/*Output:\n[ { student: 'Jane', course: 'Engineering' },\n { student: 'Billy', course: 'Engineering' } ]<\/code><\/pre>\n\n\n\nPretty neat and clean, right? The hasElement()<\/code> function is now curryable. That means when you invoke the hasElement()<\/code> and pass “Engineering,” as an argumenthasElement(\"Engineering\")<\/code>, it will return a new function which in turn expects an argument object to check if it has the course “Engineering.” The new function is directly passed as the callback function to the filter method.<\/p>\n\n\n\n<\/span>Why Currying? Are there any Advantages?<\/span><\/h2>\n\n\n\nNow that you have a better understanding of function currying in Javascript, you might wonder, is there any advantage of currying functions? <\/p>\n\n\n\n
Below are some of the currying pros.<\/p>\n\n\n\n
- Function currying allows a program to check if everything is available before moving to the next stage.<\/strong><\/li>
- Currying enables you to avoid invoking a function with the same argument repeatedly.
<\/strong>Take a look at the code below.<\/li><\/ul>\n\n\n\nfunction itemVolume(l,w,h){\n return l x w x h;\n}\nitemVolume(50,70,100)\nitemVolume(35,65,100)\nitemVolume(60,40,100)<\/code><\/pre>\n\n\n\nIn the code snippet above, the itemVolume()<\/code> function takes three arguments which it uses to calculate the volume of an item. However, you will notice that if all the items have the same height, you will still need to pass the height value when invoking the function multiple times. You can quickly solve that with currying, as shown below.<\/p>\n\n\n\n\nfunction itemVolume(h) {\n return function (w) {\n return function (l) {\n return h * w * l\n };\n };\n}\n\nconst itemHeight = itemVolume(100);\nitemHeight(45)(60);\nitemHeight(30)(40);\nitemHeight(65)(75);<\/code><\/pre>\n\n\n\nThe code above does the same thing (calculating volume) but uses function currying. The line const itemHeight = itemVolume(100);<\/code> sets a specific height for all items, and you don’t have to pass the height value every time you invoke the function.<\/p>\n\n\n\n- Function currying transforms a function with many responsibilities into smaller functions with a single responsibility each. That results in having pure functions in your code without side effects and less prone to errors.<\/strong><\/li>
- Function currying is used in Javascript to come up with high-order functions.<\/strong><\/li>
- Compared to the standard way of writing functions, function currying, especially when implemented with arrow functions, make your code more readable.<\/strong><\/li><\/ul>\n\n\n\n
<\/span>Currying vs. partial application<\/span><\/h2>\n\n\n\nUp to this point, you clearly understand currying in Javascript. However, another concept that confuses most developers as it looks similar to currying is partial application.<\/p>\n\n\n\n
- Currying<\/strong>: As discussed above, currying refers to the process of transforming a single function that takes multiple arguments into a series of nesting functions, each taking a single argument.<\/li>
- Partial application<\/strong>: This refers to a situation where a function is supplied with fewer arguments than it needs and returns a function that takes the remaining arguments.<\/li><\/ul>\n\n\n\n
The code snippet below will give you a deeper understanding of partial application.<\/p>\n\n\n\n
let log = console.log;\nfunction sum(a, b, c) {\n return a + b + c;\n}\nlog(sum(1,2,3))\n\n\/*Output:\n6<\/code><\/pre>\n\n\n\n The sum()<\/code> function above takes three arguments and returns the sum. If you want to implement partial application in the above program, tweak your code as shown below.<\/p>\n\n\n\nfunction sum(a, b, c) {\n return a + b + c;\n}\n\nfunction partial(fn, ...args) {\n return function (...moreArgs) {\n return fn(...args, ...moreArgs);\n };\n}\n\nconst lastArg = partial(sum, 1,2)\nlog(lastArg(3))\n\n\/*Output:\n6<\/code><\/pre>\n\n\n\nWhat is happening here?<\/em><\/p>\n\n\n\nFirst, we write our sum()<\/code> function, which takes three arguments and returns the sum. Next, we will write another function – function partial(fn, ...args)<\/code> – that takes a function (fn) as an argument and a list of arguments (…args). Note that you will use the spread operator here since you are unsure how many arguments will be passed.<\/p>\n\n\n\nThe partial function will return another function – return function (...moreArgs)<\/code> – that takes additional arguments (...moreArgs<\/code>). In turn, this function will call the fn<\/code> function and pass all the arguments – fn(...args, ...moreArgs)<\/code>.<\/p>\n\n\n\nThe line const lastArg = partial(sum, 1,2)<\/code> invokes the sum()<\/code> function partially as you only pass two arguments instead of three (1, 2). The remaining argument is passed in the lastArg()<\/code> function – lastArg(3)<\/code>.<\/p>\n\n\n\nEven though this might look similar to currying to the naked eye, it is a completely different concept.<\/p>\n\n\n\n
<\/span>Conclusion<\/span><\/h2>\n\n\n\nThis post has given you a detailed guide on currying in Javascript. However, if you feel that this currying concept is somehow hard to understand, practice using more examples and also try to implement currying in your projects.<\/p>\n\n\n\n
Below are some ideas where you can implement currying when working with Javascript.<\/p>\n\n\n\n