In this article, we will explore the concept of currying in JavaScript. We will examine the mechanics of currying and its benefits for software developers. Additionally, we will convert a standard function into its curried equivalent. This article promises to be both engaging and essential for JavaScript enthusiasts. You are about to discover a new aspect of JavaScript. Without further ado, let's delve into our significant topic: currying in JavaScript.
What is currying?
Currying is the technique of transforming a function that accepts several arguments into a series of functions, each taking a single argument. This process involves altering a function with a higher arity into one with a lower arity. The concept of arity refers to the total count of parameters that a function can accept.
This process involves modifying a function so that it can be invoked in a new manner, changing the call format from add(1, 2, 3) to add(1)(2)(3). This transformation does not execute the function immediately; rather, it yields a new function that continues to exist until all the required arguments are provided.
Consider a scenario where a function is designed to accept a series of arguments sequentially. Rather than processing all the arguments at once, it first accepts the initial argument and subsequently returns a new function. This new function will then accept the next argument, and in turn, returns yet another function that is responsible for accepting the third argument. This process continues iteratively until every argument has been provided and accounted for.
For example, consider a function named fun that takes three parameters A, B, and C, ultimately producing a result denoted as res. When this function is curried, it is decomposed into three separate functions: let’s call them X, Y, and Z. The initial function, X, accepts A as its parameter and, in turn, returns function Y. Function Y requires B as its argument and, subsequently, returns function Z. Function Z then takes C as its input and ultimately yields the desired result 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 inherently available by default in JavaScript (at least, it is absent in the latest versions). However, by employing certain functional techniques, we can also realize currying in JavaScript. There are two primary approaches to implement currying -
- This can be accomplished through the bind method
- This can be realized by utilizing closures
Currying using bind method
The bind method in JavaScript is utilized to produce a fresh function. When invoking this function, its this keyword is established to the specified value, along with a predetermined set of arguments. Now, let’s implement currying by leveraging the bind method in JavaScript.
Example
In this instance, we utilize the bind function to implement currying within JavaScript. The bind function provides us with a duplicate of the mul function without calling it immediately. In this scenario, we are fixing the value of the first parameter permanently, allowing us to subsequently reuse the var1 and var2 functions by setting the value for the second parameter.
Thus, through this approach, we can leverage the concept of currying to enable the reuse of our function.
<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 concept of closures also enables currying in JavaScript. A closure can be described as a characteristic of JavaScript whereby an inner function can access the variables of its outer function. In JavaScript, a closure is formed each time a function is defined.
<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?
Next, we will examine the transformation of a pre-existing function into its curried format.
Without currying
In this instance, we have a straightforward function where currying is not being utilized.
<html>
<body>
<script>
function multiply(a, b, c) {
return a * b * c;
}
document.write(multiply(2, 5, 8));
</script>
</body>
</html>
Output
After Currying
At this point, we will implement currying on the function presented in the previous example. Let’s explore an instance of currying utilizing 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 code provided above, we have implemented currying, where the arguments are supplied incrementally until the final function executes with the last argument. Consequently, both before and after applying currying to the identical function with the same set of parameters, the resulting output will consistently be identical.
That concludes our discussion on the article. I trust you now have a clear understanding of the concept of currying as well as the method for implementing it.