DEV Community

loading...
Cover image for Currying in JavaScript

Currying in JavaScript

anuradha9712 profile image Anuradha Aggarwal Originally published at anuradha.hashnode.dev ・3 min read

Hello developers!! In this part of the series, we will discuss techniques to work with function in Javascript called Currying.

What is Currying?

Currying is the technique of converting a function that takes multiple arguments into a sequence of functions that each take a single argument.

It keeps returning a new function until all the arguments are exhausted. The arguments are kept "alive"(via closure) and all are used in execution when the final function in the currying chain is returned and executed.

Currying is a transformation of functions that translates a function from callable as f(a, b, c) into callable as f(a)(b)(c).

The benefit of currying isn't really in the definition, but the code you use to call that function.

Currying doesn’t call a function. It just transforms it.

We can implement function currying using two methods:

If you are not aware of what bind() method and closures is so I highly recommend you to read the previous article in this series about this topic for clear understanding.

Let's try to understand how we can implement currying using both of these methods using an example.

Currying using bind() method

function multiply(a, b){
    console.log(a * b);
}

let multiplyByTwo = multiply.bind(this, 2);
console.log(multiplyByTwo);
multiplyByTwo(5);
multiplyByTwo(6);
Enter fullscreen mode Exit fullscreen mode

image.png

bind() method gives us a copy of the multiply method and it does not invoke it directly.

So, in the above code snippet, we are permanently assigning a value of parameter a as 2 and then reuse the multiplyByTwo method to assign the value of parameter b.

Look at another example to make it more clear.

function multiply(a, b){
    console.log(a * b);
}

let multiplyByTwo = multiply.bind(this, 2);
console.log("multiplyByTwo method")
multiplyByTwo(5);
multiplyByTwo(6);

let multiplyByFive = multiply.bind(this, 5);
console.log("multiplyByFive method")
multiplyByFive(5);
multiplyByFive(6);
Enter fullscreen mode Exit fullscreen mode

image.png

So in this way, we can reuse our function using currying.

Currying using closures

Closure makes currying possible in JavaScript. Closure gives you access to an outer function’s scope from an inner function.

It’s the ability to retain the state of functions already executed, gives us the ability to create factory functions — functions that can add a specific value to their argument.

In the below example we are using the concept of closure to implement function currying.

function multiply(a){
    return function(b){
        console.log(a * b);
    }
}

let multiplyByTwo = multiply(2);
console.log("multiplyByTwo method")
multiplyByTwo(5);
multiplyByTwo(6);
Enter fullscreen mode Exit fullscreen mode

image.png

In the above code snippet, multiply(2) will return a function having a=2 predefined, and then we will assign a value of b using multiplyByTwo(5).

Now look at the another example:

function multiply(a){
    return function(b){
        console.log(a * b);
    }
}

multiply(2)(10);
Enter fullscreen mode Exit fullscreen mode

image.png

In the above example, a is equal to 2 and b is equal to 10.

Advantages of Currying

  • Increase Code reusability.
  • Avoid frequently calling a function with the same argument.
  • Make your code easier to refactor.

That's all about function currying in Javascript. The idea behind currying is to take a function and derive a function that returns a specialized function(s).

Wrap Up!!

Thanks for reading!! I hope you enjoyed learning about the concept of currying.

Buy-me-a-coffee

Discussion (10)

pic
Editor guide
Collapse
lukeshiru profile image
▲ LUKE知る

One thing to consider is that thanks to arrow functions, this:

function multiply (b) {
    return function (a) {
        return a * b;
    }
}
Enter fullscreen mode Exit fullscreen mode

Can be turned into this:

const multiply = b => a => a * b;
Enter fullscreen mode Exit fullscreen mode

And as you mentioned, the best about it is the partial application you can do:

const double = multiply(2);
const triple = multiply(3);

double(2); // 4
triple(2); // 6

[1, 2, 3].map(double); // [2, 4, 6]
Enter fullscreen mode Exit fullscreen mode
Collapse
lonelymoon profile image
Hung Luong

Honestly speaking, I see the b => a => a * b pattern to be needlessly terse. Very rarely do I see that pattern (and sometimes, currying itself) serve any practical purpose other than trying to appear "functional". Just my 2c though, to each their own.

Collapse
lukeshiru profile image
▲ LUKE知る

Ideally that a and that b should have more significant names like:

const multiply = multiplier => multiplicand => multiplicand * multiplier;
Enter fullscreen mode Exit fullscreen mode

But having less boilerplate code (no function, no return, no curly braces) makes it far easier to read.

Thread Thread
lonelymoon profile image
Hung Luong

I understand, but variable naming was not my concern. The point is that most of the time this pattern is just used for the sake of currying itself i.e a => b => c => //imperative code with a, b and c anyway. In which case it's only easy to write, not read - a reader (like me) can be left with "yes but why??"

It's already arguable that we need both multiply and multiplyByTwo. Surely there are valid use cases out there, especially in term of function factories, I just don't see many of them in my experience.

Collapse
davik4life profile image
Victor Adeshile

Awesome input.

Collapse
anuradha9712 profile image
Collapse
darryl profile image
Darryl Young

Great article. Thanks for sharing.

Collapse
anuradha9712 profile image
Anuradha Aggarwal Author

I'm glad you find it useful

Collapse
imprimph profile image
Jaswanth

Feels like currying is a kind of crying

Collapse
theonejonahgold profile image
Jonah Meijers

What makes you feel that way? I’m an avid proponent of currying, so I’d like to hear the point of view from the other side as well