Currying in JavaScript

In this article, we are going to discuss currying in JavaScript. Here, we will see how currying works and how it will be useful for software developers. We will also see the conversion of an existing function into the curried version. So, this article is going to be very interesting and important for JavaScript readers. Here, you will learn a new concept in JavaScript. Without any more delay, let's start our important topic, i.e., currying in JavaScript.

What is currying?

Currying is defined as changing a function having multiple arguments into a sequence of functions with a single argument. It is a process of converting a function with more arity into a function having less arity. The term arity means the number of parameters in a function.

It is a transformation of functions that translate a function from callable as add(1, 2, 3) into callable as add(1)(2)(3). It only transforms a function instead of calling it. It returns a new function until all arguments get exhausted.

Suppose a function with some arguments so instead of taking all arguments once, it takes the first one, and returns a new function which takes the second one and returns a new function that takes the third one, and it will keep going until all arguments are fulfilled.

For instance, suppose a function fun with three arguments A, B, and C, and it returns value res. When it is curried, it will be broken down into three functions let be X, Y, and Z. The new function X will take A as an argument and will return the function Y, which will take B as an argument and return the function Z, which takes C as an argument and finally returns the required value res.

Benefits of Currying

Currying helps to prevent the passing of the same variable, again and again.
It is useful in event handling.
Write little code modules that can be easily reused and configured.

How to achieve Currying in JavaScript?

Currying is not built-in by default (atleast, it is not present in current versions) in JavaScript. Using some functional tricks, we can achieve currying in JavaScript too. We can implement currying using two methods -

It can be achieved by using the bind() method
It can be achieved by using the closures

Currying using bind() method

The JavaScript function bind() method is used to create a new function. When a function is called, it has its own this keyword set to the provided value, with a given sequence of arguments. Now, let's achieve the currying by using the bind() method in JavaScript.

Example

In this example, we are using the bind() method to achieve currying in JavaScript. bind() method will give us a copy of the mul() method and do not invoke it directly. Here, we are permanently assigning the first parameter value and then reuse the var1 and var2 methods by assigning the second parameter's value.

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

<html>
<body>
<script>

function mul(val1, val2){
    document.write("<p>" + val1 * val2 + "</p>");
}

let var1 = mul.bind(this, 5);
document.write("var1 method");
var1(4);
var1(7);
let var2 = mul.bind(this, 4);
document.write("var2 method")
var2(2);
var2(4);
</script>
</body>
</html>

Output

Currying using closures

The closure also makes the currying possible in JavaScript. A closure can be defined as a JavaScript feature in which the inner function has access to the outer function variable. In JavaScript, every time a closure is created with the creation of a function.

<html>
<body>
<script>

function mul(val1){
    return function(val2){
        document.write("<p>" + val1 * val2 + "</p>");
    }
}

let a = mul(2);
a(5);
a(6);

</script>
</body>
</html>

Output

10
12

How to convert an existing function into a curried version?

Now, let's see the conversion of an existing function into its curried version.

Without currying

Here, there is a simple function, in which we are not using currying.

<html>
<body>
<script>

   function multiply(a, b, c) {
            return a * b * c;
         }
document.write(multiply(2, 5, 8));
</script>
</body>
</html>

Output

After Currying

Now, we apply currying to the function, given in above example. Let's see an example of currying in JavaScript.

<html>
<body>
<script>
   function multiply(a) {
      return function(b) {
         return function(c) {
            return a * b * c;
         }
      }
   }
document.write(multiply(2)(5)(8));
</script>
</body>
</html>

Output

In the above code, we have used currying as the parameters passed one by one until the last function calls the last parameter. So, before and after currying on the same function with the same parameters, the output will remain the same.

So, that's all about the article. Hope you understand the concept of currying and also the process of achieving it.

Next TopicJavaScript hasOwnProperty

← prev next →