Reading JS ... currying for newbie

My brain is exploding again ... this time it's the concept of currying

function curried_add(a) {
    // has access to the argument for a
    return function nested_add(b) {
        // has access to the arguments for a and b
        return a + b;
    }
}
 
// creates a local variable a and assigns it the value 1
let add_one = curried_add(1); 
 
// add_one() still has access to the argument from curried_add()
add_one(10);

function curried_add(a) {
    // has access to the argument for a
    return function nested_add(b) {
        // has access to the arguments for a and b
        return a + b;
    }
}
 
// creates a local variable a and assigns it the value 1
let add_one = curried_add(1); 
 
// add_one() still has access to the argument from curried_add()
add_one(10);

Where do I start to read this code? From

add-one

add-one

or from

let add-one

let add-one

Joao•5/29/23, 6:05 PM

Code gets executed from top to bottom so that's the right order here as well. The function accepts a single argument and immediately returns another function, defined inline. So in this case is is a function itself.

Joao•5/29/23, 6:07 PM

However the concept of currying is actually different:

Joao•5/29/23, 6:08 PM

The idea is that you can invoke a function that itself returns another function, and you can go deeper into this concept, and provide the arguments to each individual function as they are being invoked inline.

Å Marlon GOP•5/29/23, 6:09 PM

codecademy presents it also as a safeguard for not forgetting to enter a value for the parameter ...
Why is yours so much easier to understand than theirs?

Å Marlon GOP•5/29/23, 6:10 PM

I'v never seen the double parenthesis syntax before ...

Joao•5/29/23, 6:10 PM

Well I wouldn't say much easier but thanks!

Joao•5/29/23, 6:12 PM

And that's actually a very valid use case of currying. The thing with JavaScript is that you are not actually forced to provide all arguments to a function, and so you may forget or switch the order of parameters to functions that have multiple. Of course when you run the code you may get an error, but sometimes falsy values and numbers can work together and won't fail, but silently introduce a bug in the ~~code~~ program.

Joao•5/29/23, 6:13 PM

Another thing from the example in codecademy is that the nested function is named whereas I didn't use one, since we won't really be referencing it at all. But I think they did it this way just to make it clear that the parent function has inner functions defined within it.

Joao•5/29/23, 6:14 PM

https://javascript.info/currying-partials

Å Marlon GOP•5/29/23, 6:14 PM

But still, you need to explain the double parenthesis. It's the first time I see it.

Å Marlon GOP•5/29/23, 6:16 PM

Could the codecademy example do the same on ?

Joao•5/29/23, 6:18 PM

Well, the is a variable that stores the returned value of . If we apply currying it would instead store the value of whatever the inner function (aka nest_add) returns.

Joao•5/29/23, 6:18 PM

is not a function anymore, but a number: 1 + 10

Joao•5/29/23, 6:19 PM

So, if you think about it, a

()

()

means to invoke a function right? And is invoked, and returns a function, which we are immediately invoking with another set of

()

()

Joao•5/29/23, 6:24 PM

Here's another example, let's say we have a function that creates a box:

Without looking at the definition you may forget how many or in which order to enter the arguments. Now, let's make this same function but using currying:

Joao•5/29/23, 6:25 PM

To be honest, I rarely if ever use currying. But this is the concept: break down a function that takes multiple arguments into many multiple functions that each take exactly one.

Joao•5/29/23, 6:27 PM

And btw this only works because of closures, where the inner function have access to the variables on their respective parent scope. So the last function that accepts the color string knows there's a variable called width in it's current scope.

Å Marlon GOP•5/29/23, 6:27 PM

... soooo....

JJoao So, if you think about it, a `()` means to invoke a function right? And `curried...

Å Marlon GOP•5/29/23, 6:30 PM

Regarding this you explain here:

invokes the function with the value 1 for and value 10 for .
Is value implicidly saved because at the end of the function it ?

Joao•5/29/23, 6:32 PM

Yes, so, whenever a function runs it creates a so called execution context, a place where it stores it's own internal variables like

in this case. If you define a function in this context, it will have access to this execution context, in addition to creating its own which further function beneath it can also access. This explains why the final statement works.

Joao•5/29/23, 6:33 PM

But the syntax is explained by the fact that the first function, in this case returns a function itself. By using this syntax you are immediately invoking it, before it stores whatever the return value is in the variable.

Å Marlon GOP•5/29/23, 6:37 PM

... ah, ok... soooooo

Å Marlon GOP•5/29/23, 6:44 PM

This is saying invoke the first function with the first value (a is stored, but not returned), and return a function that uses the second value (b, but doesn't return it).

Which is why when loging a immediately after it prints 1, and b after prints 10, but they are not returned (as in can't be calculated) before we explicitly ask them to be returned with

Joao•5/29/23, 6:46 PM

That's about how it goes yes. I wouldn't think of it in terms of "storing" anything as these are just regular function being invoked.

Joao•5/29/23, 6:48 PM

If you read the code step by step you notice that just returns a function. It just so happens that the value returned is also a function. You can store those values in separate variables if you want, there's nothing wrong or against that, but you can invoke them at the same time and store the final result.

Joao•5/29/23, 6:49 PM

Let me give another example, let's say you have a series of items that have a price and are taxed differently depending on the type of article. You can create a function that calculates the total value using currying like this:

Å Marlon GOP•5/29/23, 6:57 PM

So for chips, this evaluates to:
item.tax is used for taxPercent, item.price is used for price, which means the final return for chips is:
1 + 1 * 10 * 0.01 = 1,1

....

Joao•5/29/23, 6:58 PM

Did I get that formula right?

Joao•5/29/23, 6:59 PM

Well that's not the point

the idea is that you can compose behavior using functions that would otherwise take several arguments.

Joao•5/29/23, 6:59 PM

In a more realistic scenario you would store the first function externally, so that items that have the same tax base would reuse that function.

Å Marlon GOP•5/29/23, 6:59 PM

Well, it kind of doesn't matter, because I'm just tracing the values through the function.

Å Marlon GOP•5/29/23, 7:00 PM

But this then goes back to my initial question of how to read syntax. Because one invokes the function after writing the function, which means writing at the bottom, looking back up, and then retracing the code.

Your example really made it simpler to understand.So even if currying isn't that much used, this has helped me read code more consistently.

Joao•5/29/23, 7:03 PM

Well I guess how to read it depends on how it works best for you. I guess ultimately it's very similar to how a regular function with multiple parameters work, it's just a practical difference.

Å Marlon GOP•5/29/23, 7:05 PM

I do like a logical closure. I was worried I was getting lost in the world of currying syntax, but then I realised it helped me read easier. So for that, you get todays peacock.

Å Marlon GOP•5/29/23, 7:05 PM

Thank you again ... I might be back with more head scratching!

Å Marlon GOP•5/29/23, 7:05 PM

Joao•5/29/23, 7:06 PM

Sure and good luck with that, its always good exercise!