How to uncurry a function up to depth n in JavaScript?

Front End Technology Javascript Web Development

In JavaScript, a function is considered "curried" if it takes one or more arguments and returns a new function that expects the remaining arguments. Currying is a powerful technique that can be used to create new functions from existing ones, or to "uncurry" a function up to depth n.

Why do we uncurry a function?

There are several reasons why you might want to uncurry a function. For example, you may want to −

Use a curried function in a context where a non-curried function is expected
Convert a curried function to a non-curried form to make it easier to read or debug
Optimize a curried function for performance

How to uncurry a function?

There are two ways to uncurry a function −

The first way is to use the "Function.prototype.apply" method.
The second way is to use the "Function.prototype.call" method.

Using the "Function.prototype.apply" method

The "Function.prototype.apply" method can be used to uncurry a function up to depth n. To do this, you simply pass in the "this" value and an array of arguments to the "apply" method. For example −


<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <p>uncurry up to depth 2 using Function apply() method</p>
   <div id="result"></div>
   <script>
      function add(a, b) {
         return a + b;
      }
      function curriedAdd(a) {
         return function(b) {
            return a + b;
         }
      }
 
      // Uncurry the "curriedAdd" function up to depth 2:
      document.getElementById("result").innerHTML = curriedAdd.apply(null, [1]).apply(null, [2]); // 3
   </script>
</body>
</html>

Using the "Function.prototype.call" method

The "Function.prototype.call" method can also be used to uncurry a function up to depth n. The "call" method is similar to the "apply" method, but you pass in the "this" value and the arguments to the "call" method as individual arguments, rather than as an array. For example −


<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <p> uncurry up to depth 2 using Function call() method</p>
   <div id="result"></div>
   <script>
      function add(a, b) {
         return a + b;
      }
      function curriedAdd(a) {
         return function(b) {
            return parseInt(a) + parseInt(b);
         }
      }
 
      // Uncurry the "curriedAdd" function up to depth 2:
      document.getElementById("result").innerHTML = curriedAdd.call(null, [1]).call(null, [2]); // 3
   </script>
</body>
</html>

In the above example, we've used the "call" method to uncurry the "curriedAdd" function. As you can see, the "call" method is a bit more verbose than the "apply" method, but it has the same effect.

What are the benefits of using the "Function.prototype.apply" method?

There are several benefits to using the "Function.prototype.apply" method to uncurry a function −

The "apply" method is faster than the "call" method.
The "apply" method is more widely supported than the "call" method.
The "apply" method is more concise than the "call" method.

In conclusion, currying is a powerful technique that can be used to create new functions from existing ones or to "uncurry" a function up to depth n.