Function Currying in JavaScript
Understanding JavaScript();
take a vessel, add some water, add some lines of code, add some curry leaves, and masala (according to your taste), cook it on a low flame for 25 mins, and, here’s the function curring, ready to serve in production. 😆Just kidding boies and gols.
Helloooo, JS devs. I am back with a hot topic “Function Currying”
This story covers:
- what is currying, how does it work, and why it is used.
As a JS developer, I bet you have used function currying very frequently but you might not know the purpose or how it works, no worries I was the one from you, will try to make an easy story about and around currying, sit back relax and have fun.
The story starts here
What is a function currying?
currying is transforming a function that takes multiple arguments [example: functionName(a, b,c)] into several functions that take a single argument in a sequence.
okay okay.., I know it sounds con-fu-jing (confusing), also my reactions were the same when I read this for the first time.
ok let us understand it easily, a function (doSum) that takes all args in one shot i.e. doSum(a, b, c) [example below: Normal addition function.
Is transformed into several functions (addNumbers(a), (b), (c)) that take a single argument at a time in a sequence.
Note: The functionality (purpose) of both the function is the same, just renamed those for better understanding.
here’s what function currying is according to geeks for geeks:
It is a technique in functional programming, transformation of the function of multiple arguments into several functions of a single argument in sequence.
in simple words, the function instead of taking all arguments at once, the function takes the first argument and returns the function that takes the other argument, and then again returns another function that takes the third argument, and so on until all the arguments are taken (example in the image named: function currying).
How Does Currying Work?
curring in javascript might be a bit tricky to understand as it is javascript 😬
but let's try to get on top of it, below is an example of a simple function
here the function “doSum” adds the given argument and returns the sum of all the arguments passed in.
below is the curried version of the same function (just renamed, for better understanding)
the output of the above and the below function will be the same, 18
addNumbers is the curried version of the above function doSum, addNumber the parent function takes the argument i.e. 5 in our case, and returns another anonymous function which takes another argument i.e. 6 in our case and the process continues until all the parameters are passed, the last anonymous function returns the value after processing all the inputs.
we implemented nested functions in the above example, so each of the functions takes one argument and returns another function until all the arguments are not completed.
you can curry your function in 2 different ways, using the bind function and using closures, let’s see how it looks like
function currying using the bind function
if you are not aware of what is the bind function, check this story of mine.
here in the above example, we are using the bind function of javascript, and using the bind function we are currying “onBoardUser” function.
basicCompanyDetails is similar for all the onboarded users, so we want to make the details by default available for all the users who are onboarded, here we are passing an argument “basicCompanyDetails” to the bind function and creating an instance of “onBoardUser”, here the bind function returns the function which you can store at some place in memory and execute it later, here we are storing the function in addUser and we are invoking for all the users.
this is how you can curry your function using the bind function in javascript. more examples in the below image.
you can also pass both the params while calling the addUserToSales method it will output the same results.
function currying using closures.
the closures are a very common but tricky concept in javascript, but not discussed much, you can give it a read on what are closures here.
let’s try to implement function currying using closures.
in the above example, we have created a function “onBoardUser” that takes one argument and it returns another anonymous function that takes another argument, sums up the details, and returns.
we are calling the function “onBoardUser” with one argument i.e. accountDepartmentDetails and storing it into a variable (remember that onBoardUser returns a function), so we store a function into a variable addUsertoAccounts and now the variable has a function that can be invoked anytime with an argument it is asking for, so we invoked the anonymous function (returned by onBoardUser) stored in addUsertoAccounts with an argument (user details i.e. detailsOfJohn).
once the function is invoked it has completed the execution of the statement present inside it and printed the output.
if the functions were invoked after some 10k lines of code also, it would print the same output, as it is a closure, and it remembers the lexical scope of it.
Curring with ES6:
this is how you can use function currying with closures in JS.
still, you might have one question in your head, If we can pass multiple arguments to a function then why do we need currying at all?
this probably will answer those doubts.
why it is used
why? why? why?
- currying is a technique that divides functions into smaller functions, each individual function has its own work and that makes your function pure and less prone to errors and side effects.
- example: the first function validates user details, the second validates company details, etc.
- it is used in functional programming to use higher-order functions
- it helps you keep your code clean and organised.
- also, you can use currying as a mechanism that helps you check that you have everything before your proceed
- example: each nested function won’t get executed if it doesn’t get the required arguments.
