Solving an infinite argument problem with closure and currying in JavaScript.

Write a function add which when called add(1,2,3....n) or add(1)(2)(3)...(n) should yield the same result.

Our objective is to create a single reusable function called add which can take n number of arguments or can return n number of times a function which takes one (or list of )argument each time and finally solve the problem.

By the end of this article, we will not just get a clear conceptual idea of the solution, but also learn a lot of other JavaScript concepts like closure, currying etc.

Let us start by breaking the problem and trying to create a function that will add two numbers in different ways.

In the above code, as you can see, first we are checking if the second parameter exists. If present, then we just add the first and second parameters and return it. But if it is not present, we assume that it will be provided later by the user, so we return an anonymous function. The returned function takes one parameter and then computes the result of the previous as well as the new parameter. (What the Hell ???)

Well if you’re new to the concept of closure and currying you might find the second way of calling add(1)(2) a bit confusing. In the first approach add(1,2) we have passed two parameters and rest is quite straightforward, but the second case in which a parameter is passed to the returned function is a bit of thing for anyone new to JavaScript. Here is how we can write a simple equivalent code for the second approach.

let’s call add with just one parameter and assign it to addAgain variable. Now addAgain is a function that takes one parameter. As it might surprise you, we are just passing one parameter and it is still returning us the result. This is because we have already passed the value of a while calling add the first time. This is the concept of closure in javascript:. And now when we call addAgain(2) it is fairly obvious what is going to happen.

Closure in JavaScript: The inner function has access to the variables of outer function even after the outer function has returned. The inner function keeps the latest value of the variable.

In the above example, we not just created closure but also curried the functionality.

Currying is a process of reducing a function which takes multiple arguments into a function which takes only one argument at a time and returns another function which takes second argument, third argument and so on until all arguments are exhausted.

So by now you must have understood how easy it is to create a currying function if we know the size of arguments beforehand. But in our case (the original problem), we need to write a function which takes an infinite number of arguments and adds them.

Let’s create a function that adds n number of parameters by using arguments property of the function.

We are assigning the value of arguments to args using the spread operator. You can find more about the spread operator here. In this case, it basically converts collection of arguments to an array. Next, we reduce the array and compute the total and return it. find more about the reduce method here.

The problem in the first case is solved. Now how do we solve the second case? By now we know that to solve the second case, we must return a function which again will return a function and so on until it’s not called anymore, in which case, the final value is computed. Let’s write a code that will return a function n number of times which will in turn create a recursion.

Here, this function will work for any number of curried arguments. But as you can check in the console, the final value is still not what we expected. It will always be a returned function and that's not what we want. So we do a little tweak here, in each loop:

  1. We have to return a function addReturn that will have reference toadd function (recursion).
  2. Before returning addReturn , we compute the sum of the values in the argument list.
  3. We store the sum as a property of the addReturn function.
  4. Now addReturn can be called as a normal function, which will in turn call add function or we can print the value via its value property

Now let’s modify our code:

This is our final working code. Look carefully for what we have done here, we are creating a new member variable called value for addReturn function and assigning it the computed total value.

This might be overwhelming at first sight, but if you consider the basics of JavaScript, functions are objecthence we are allowed to do this (follow this link on clear understanding on javascript function objects and . After computing, we return addReturn.

Have a careful look at how we call the function after modification. We can either call the returned function by passing additional parameter and if we have nothing to call anymore, we print the value.

This way u can write a reusable function for any computation.

If you’re preparing for an interview, I suggest you have a look at key points to consider for cracking the interview.

Hope this helps you. Please feel free to comment any suggestions or questions.

If you find this article useful, you can show your appreciation by clicking on the clap button. As the saying goes, ‘When we give cheerfully and accept gratefully, everyone is blessed’.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ishwar Rimal — @theHumbleBeing

I write articles on JavaScript, electron, and react. Opted for curators for better reach, not money. Open link in incognito to read for free (or contact me)