Function Currying in JavaScript

Hello Everyone 👋,

Today in this article we are going to learn about one of the functional programming phenomena in JS known as "Function Currying".

Let's dive deep into the concepts! 🏊 🏊

So before starting with the definition and all the other stuff, let's give it a try with the examples below :

function x (a , b , c){
  let result = a + b + c ;
  return result ;
}

console.log(x(1 , 2 , 3))  // 6

So the above function looks good and works perfectly fine but, we can refactor it using function curring as :

function fn1(a){
  return function fn2(b) {
    return function fn3(c) {
      let result = a + b + c;
      return result;
} } }

let resultOfA = fn1(1) ;
let result = resultOfA(2);
console.log(result(3))    // 6

I hope you might have got a gist of what function curring is with the above example, If not then relax, we will look into it with more examples in the later section. First, let's see what curring is in JS.

What is Currying ?

It is a technique for evaluating functions in JS with multiple parameters into the sequence of functions with a single argument.

In other words, when a function, instead of taking all arguments at one time, takes the first one and returns a new function that takes the second one and returns a new function that takes the third one, and so on until all arguments have been fulfilled, this is called as function currying.

Advantages of currying :

The main benefit of currying is when you need to call the same functions with some of the same parameters a lot. In these situations, currying becomes a good technique to use as it will make your code easier to refactor.

How it can be used in our program?

Currying can be achieved using either the Function closure or by using the bind method in JS.

Let's take a look into these concepts one by one and identify how we can use them with an example:-

1. Using bind() method

/* Let's create a function multiply using arrow function syntax which accepts 
two parameters and returns a multiplication result */

let multiply = (x,y) => {
  return x * y ;
 } 

/* So now with help of the above function, we can create as many functions 
as we want by specifying the arguments for the function call and reusing the
code */

let multiplyByTwo = multiply.bind(this,2);
console.log(multiplyByTwo(5))  //  10

/* So using the existing function we can bound that function to return 
the double of the value passed as an argument. Similarly, we can extend it to 
any value we want and can reuse the code */

let multiplyByTen = multiply.bind(this,10);
console.log(multiplyByTen(4))   //  40

bind() method returns the copy of the original function to be used as its
function. It accepts two arguments, 1st is the object reference to refer to and the second is the comma-separated list of params.

2. Using Function Closure


let multiply = (x,y) => {
  return x*y ;
 }

/* With the help of function closure we can convert it to the below function 
syntax as */

let multiply = (x) => {
    return function (y) {
        console.log(x * y);
    }
}

/* Because when the function is returned from multiply it will remember the value of x in its lexical scope using Function Closure, we 
can use it as  */

let multiplyByTwo = multiply(2);
multiplyByTwo(4)   //  8

let multiplyByTen = multiply(10);
multiplyByTen(4)   //  40

I hope this article will help you understand the concepts related to the Function Curring.

If you liked this article, please be sure to ❤ it. Thanks in Advance😊.

@AJ-Writes