Introduction to Currying and Partial Application What is the point?

JavaScript
1

Tell us what’s happening:
So I solved it. It’s pretty easy to do but I don’t understand what is the point of this, why I would ever use this concept instead of just setting the arguments to the function like:
function(x,y,z) {return x + y + z}
Why we need to do more work and more code just to do something that can be done in 1 line?

Your code so far


function add(x) {
  // Add your code below this line
  return function(y) {
    return function(z) {
      return x + y + z;
    }
  }
  
  // Add your code above this line
}
add(10)(20)(30);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0.

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/functional-programming/introduction-to-currying-and-partial-application/

4 Likes
2

This is quite new for me too but the way I understand it is that you can call the function in partials.

If your function would be

function(x,y,z) { return x + y + z }

Then you would require x, y and z at the same time to trigger the function.

However using the below code:

function add(x) {
// Add your code below this line
  return function(y) {
    return function(z) {
      return x + y + z;
    }
  }

// Add your code above this line
}

allows you to pass them at different time intervals. When you get “x”, you can say currentFunction = add(x). Later in the application when “y” is provided you can say currentFunction = currentFunction(y) and finally when “z” is provided you can call currentFunction(z) which will give you the final result.

This allows you to just pass through the function througout the application instead of passing x and y.

Please note that as I mentioned at the start, this is new for me too so I can’t give any real life examples or tell you whether it is used a lot or not in “real life”. The below article goes a little bit deeper on this topic:

https://hackernoon.com/currying-in-the-real-world-b9627d74a554

1 Like
3

I am still so confused about this Currying concept after reading some explanations…
feel like I am just so bad at logic :sob:

  // Add your code below this line
  return function(y){
    return function(z){
      return x+y+z;
    }

  }
  
  // Add your code above this line
}
add(60)(20)();  // The result is NaN

I have tried to call add(60)(20)(), which the result is the same as writing in the normal way

function (x, y, z){
    return x+y+z;
}
add(60,20) //The result is NaN
4

It isn’t terribly useful in JS, because functions can take any number of arguments. If you have a language where every function has to take exactly one (and only one) argument, it becomes very useful, because you can then just stick functions together like Lego. JavaScript doesn’t work like that, and whilst currying is very occasionally useful, the syntax works against you, it’s not designed for it.

So for currying the logic is actually pretty simple - every function takes only one argument, so if you need more than one you need to return a function which takes the next argument and so on. JS just provides no syntactic sugar to make it pleasant to use, because it’s not important w/r/t JS

Partial application is more useful - functions can just use the built in .bind method - but most of the usecases involve controlling this, and that’s also what arrow functions are for, and they’re much easier most of the time

8 Likes
5

Thank you for the further explanation. I understand it better now.

7

This is my code:

var add = (x) => (y) => (z)=> x+y+z;
console.log(add(10)(20)(30));

8

return function(y){
return function(z){
return x+y+z;
}

confuses me.
Doesn’t return mean that JS won’t read the rest of the function? Why isn’t JS stopping when we declare return here?

9

(Click on blurred to show - this is the explanation, which is a lot of the solution)

The first return returns the function

function(y){
   return function(z){
      return x+y+z;
   }
}

Now this function returns

function(z){
   return x+y+z;
}

This last function returns x+y+z

As such, yes, return stop the function. But if the function returns a function you can call the returned function
Like this:

var addTwo = add(2);  // add returns a function, so addTwo is a function
var addTwoThree = addTwo(3);  // addTwo returns a function, so addTwoThree is a function 
var result = addTwoThree(5);  // now addTwoThree returns a number, so result is 10

You can also avoid the extra variables and do directly as below, which one is better depends on situation and requirements

var result = add(2)(3)(5); // it is the same thing as above, just in one line
2 Likes