Do not understand Currying

JavaScript
1

Tell us what’s happening:
I’m not understanding this challenge.
Your code so far


function add(x) {
// Only change code below this line
var y = x + x;
var z = x + y;
var partialFn = x.bind(this, y, z);
return partialFn;










// Only change code above this line
}
add(10)(20);
console.log(add(10)(20));

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15.

Challenge: Introduction to Currying and Partial Application

Link to the challenge:

2

Can you be more specific?

Yeah, currying is weird. There are different ways to think about it, but here you can think of it that instead of having 1 function that takes 2 parameters, they make two functions that each take one parameter - the first function takes 1 parameter each and the first function returns the second function.

const unCurried = (x, y) => x + y;
console.log(unCurried(1, 2));
// 3

// ***

const curried = x =>
  y => x + y;
console.log(curried(1)(2));
// 3

// ***

function curried2(x) {
  return function(y) {
    return x + y;
  }
}
console.log(curried2(1)(2));
// 3

// ***

const returnedFunction = curried(1);
const answer = returnedFunction(2);
console.log(answer);
// 3

The first example is of course a “normal” function, one function taking one parameter.

The second example is of course a curried function. Notice that there are two functions - the first returning the second. The second returned function is y => x + y; and it is returned by the first half, x =>. So, f(x, y) becomes f(x)(y). f(x) returns a function that gets executed by the (y).

The third example is the same as the second but written out with standard JS functions.

The last shows that you can run those functions separately. I can run the first one that returns a function and I can execute it later. It may not be clear now, but that does come in handy.

1 Like
3

Is it specifically the partial application using bind part you do not understand?

bind returns a new bound function that can have pre-specified initial arguments.

function greeter(message, honorific, name) {
  console.log(message, honorific, name); // Hello Mr Bond
}
var greeterFn = greeter.bind(null, 'Hello', 'Mr');
greeterFn('Bond');

You can see the [[BoundArgs]] if you log out the return function as an object.

console.log({greeterFn});

BoundArgs

1 Like
4

The challenge asks for 3 function. I don’t know how to make the third one.

This is what I tried

  // Only change code below this line
 function(y) {
  return x += y;
}
return function(z) {
  return x + z
} 
  // Only change code above this line

edit:
Tested your second example, and succeeded:

function add(x) {
  // Only change code below this line
var add = y =>
  z => y + z + x;
return add;

  // Only change code above this line
}
add(10)(20)(30);
console.log(add(10)(20)(30));
5

Right, it has three parameters so instead of a function returning a function (in my example) it will be a function returning a function returning a function (like in your last example). Good job.

But yeah, they’re confusing and it won’t really sink in until you use it a few times. And to be honest, it doesn’t get used a lot. But when it does come in handy, it can be an awesome tool.

1 Like
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.