Front-end JavaScript thoroughly understands function currying

1. What is currying

In mathematics and computer science, currying is a technique for converting a function that takes multiple arguments into a series of functions that take a single argument.

For example, a normal function that takes three parameters, after currying, the curried version of the function takes one parameter and returns a function that takes the next parameter, which returns a function that takes the third parameter. After receiving the third parameter, the last function applies the three parameters received previously to the original ordinary function and returns the final result.

Currying in Mathematics and Computational Science:

// Currying in Mathematics and Computational Science:

//A normal function that receives three parameters function sum(a,b,c) {
    console.log(a+b+c)
}

//A tool function used to convert a normal function into a curried version function curry(fn) {
  //... internal implementation omitted, return a new function }

//Get a curried function let _sum = curry(sum);

//Return a function that receives the second parameter let A = _sum(1);
//Return a function that receives the third parameter let B = A(2);
//Receive the last parameter, apply all previous parameters to the original function, and run B(3) // print : 6

For the Javascript language, the concept of currying function that we usually talk about is not exactly the same as the concept of currying in mathematics and computer science.

In mathematics and computer science, a curried function can only be passed one argument at a time;

The curried functions in our actual Javascript applications can pass one or more parameters.

Let’s look at this example:

//Ordinary function function fn(a,b,c,d,e) {
  console.log(a,b,c,d,e)
}
//Generated curry function let _fn = curry(fn);

_fn(1,2,3,4,5); // print: 1,2,3,4,5
_fn(1)(2)(3,4,5); // print: 1,2,3,4,5
_fn(1,2)(3,4)(5); // print: 1,2,3,4,5
_fn(1)(2)(3)(4)(5); // print: 1,2,3,4,5

For the curried _fn function, when the number of received parameters is the same as the number of formal parameters of the original function, the original function is executed; when the number of received parameters is less than the number of formal parameters of the original function, a function is returned to receive the remaining parameters until the number of received parameters is the same as the number of formal parameters, and the original function is executed.

Now that we know what currying is, let’s take a look at what currying is used for.

2. Uses of Currying

Currying actually complicates the simple answer, but at the same time, we have more freedom when using functions. The free handling of function parameters here is the core of currying. The essence of currying is to reduce generality and increase applicability. Let’s look at an example:

In our work, we will encounter various requirements that require regular expression verification, such as verifying phone numbers, email addresses, ID numbers, passwords, etc. At this time, we will encapsulate a general function checkByRegExp , which receives two parameters, the regular expression object to be verified and the string to be verified.

function checkByRegExp(regExp,string) {
    return regExp.test(string);  
}

checkByRegExp(/^1\d{10}$/, '18642838455'); // Check phone number checkByRegExp(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/, '[email protected]'); // Check email address

At first glance, the above code is fine and can meet all our needs for passing regular expression tests. But let's consider this question: what if we need to verify multiple phone numbers or multiple email addresses?

We might do this:

: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :

We need to enter a string of regular expressions every time we perform a check. When checking the same type of data, we need to write the same regular expression multiple times, which makes us inefficient when using it. And because the checkByRegExp function itself is a tool function and has no meaning, when we look at these codes again after a while, if there are no comments, we must check the content of the regular expression to know whether we are checking a phone number, an email address, or something else.

At this point, we can use currying to encapsulate the checkByRegExp function to simplify code writing and improve code readability.

//Perform currying let _check = curry(checkByRegExp);
//Generate tool function to verify phone number let checkCellPhone = _check(/^1\d{10}$/);
//Generate tool function to verify emaillet checkEmail = _check(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/);

checkCellPhone('18642838455'); // Verify phone numbercheckCellPhone('13109840560'); // Verify phone numbercheckCellPhone('13204061212'); // Verify phone numbercheckEmail('[email protected]'); // Verify emailcheckEmail('[email protected]'); // Verify emailcheckEmail('[email protected]'); // Verify email

Let's see if our code becomes concise and intuitive after currying encapsulation.

After currying, we generated two functions checkCellPhone 和checkEmail， checkCellPhone function can only verify whether the passed string is a phone number, and the checkEmail function can only verify whether the passed string is an email address. Compared with the original function checkByRegExp , their functional versatility is reduced, but their applicability is improved. This use of currying can be understood as: parameter reuse

Let’s look at another example

Suppose we have such data:

let list = [
    {
        name:'lucy'
    },
    {
        name:'jack'
    }
]

We need to get the values ​​of all name attributes in the data. Under normal circumstances, we would do this:

let names = list.map(function(item) {
  return item.name;
})

So how do we implement this with curried thinking?

let prop = curry(function(key,obj) {
    return obj[key];
})
let names = list.map(prop('name'))

Seeing this, you may have questions. For such a simple example, just to get the attribute value of name , why do we need to implement a prop function? This is too troublesome.

We can change our thinking. After the prop function is implemented once, it can be used multiple times in the future. Therefore, when we consider the complexity of the code, we can remove the implementation of prop function.

Our actual code can be understood as only one line let names = list.map(prop('name'))

So, through currying, our code has become more concise and more readable.

3. How to encapsulate currying utility functions

Next, let's think about how to implement the curry function.

Recall our previous definition of currying, which accepts some parameters, returns a function to accept the remaining parameters, and executes the original function after receiving enough parameters.

We already know that when the curried function receives enough parameters, the original function will be executed, so how do we determine when enough parameters are reached?

We have two approaches:

1. Get the number of formal parameters of the function through the length property of the function. The number of formal parameters is the number of parameters required.
2. Manually specify the number of arguments required when calling the curried utility function
   

We combine these two points to implement a simple curry function:

/**
 * Curry the function * @param fn the original function to be curried * @param len the number of parameters required, defaults to the number of formal parameters of the original function */
function curry(fn,len = fn.length) {
    return _curry.call(this,fn,len)
}

/**
 * Transfer function * @param fn original function to be curried * @param len required number of parameters * @param args received parameter list */
function _curry(fn,len,...args) {
    return function (...params) {
        let _args = [...args,...params];
        if(_args.length >= len){
            return fn.apply(this,_args);
        }else{
            return _curry.call(this,fn,len,..._args)
        }
    }
}

Let's verify this:

let _fn = curry(function(a,b,c,d,e){
    console.log(a,b,c,d,e)
});

_fn(1,2,3,4,5); // print: 1,2,3,4,5
_fn(1)(2)(3,4,5); // print: 1,2,3,4,5
_fn(1,2)(3,4)(5); // print: 1,2,3,4,5
_fn(1)(2)(3)(4)(5); // print: 1,2,3,4,5

Our commonly used tool library lodash also provides a curry method, and adds a very interesting placeholder function, which changes the order of incoming parameters by using placeholders.

For example, if we pass in a placeholder, the parameters passed in this call skip the placeholder, and the placeholder is filled with the parameters of the next call, like this:

Take a look at the example of the official website:

Next, let's think about how to implement the placeholder function.

For the curry function of lodash , curry function is mounted on the lodash object, so lodash object is used as a default placeholder.

The curry function we implemented ourselves is not mounted on any object, so we use curry function as a default placeholder.

The purpose of using placeholders is to change the order in which parameters are passed. Therefore, in the implementation of the curry function, it is necessary to record whether a placeholder is used each time and the parameter position represented by the placeholder.

Directly on the code:

/**
 * @param fn the function to be curried* @param length the number of parameters required, defaults to the number of formal parameters of the function* @param holder placeholder, defaults to the current curried function* @return {Function} the function after currying*/
function curry(fn,length = fn.length,holder = curry){
    return _curry.call(this,fn,length,holder,[],[])
}
/**
 * Transfer function* @param fn original function of currying* @param length number of parameters required by the original function* @param holder received placeholder* @param args received parameter list* @param holders received placeholder position list* @return {Function} function to continue currying or final result*/
function _curry(fn,length,holder,args,holders){
    return function(..._args){
        //Copy the parameters to avoid confusion caused by multiple operations on the same function let params = args.slice();
        //Copy the placeholder position list and add the newly added placeholders here let _holders = holders.slice();
        //Loop through parameters, append parameters or replace placeholders_args.forEach((arg,i)=>{
            //There is a placeholder before the real parameter. Replace the placeholder with the real parameter if (arg !== holder && holders.length) {
                let index = holders.shift();
                _holders.splice(_holders.indexOf(index),1);
                params[index] = arg;
            }
            //There is no placeholder before the real parameter. Append the parameter to the parameter list else if (arg !== holder && !holders.length) {
                params.push(arg);
            }
            //The placeholder is passed in. If there is no placeholder before, record the position of the placeholder else if (arg === holder && !holders.length) {
                params.push(arg);
                _holders.push(params.length - 1);
            }
            //The passed in placeholder, there is a placeholder before, delete the original placeholder position else if (arg === holder && holders.length) {
                holders.shift();
            }
        });
        // The first length records in params do not contain placeholders, execute the function if(params.length >= length && params.slice(0,length).every(i=>i!==holder)){
            return fn.apply(this,params);
        }else{
            return _curry.call(this,fn,length,holder,params,_holders)
        }
    }
}

Verify it:

let fn = function(a, b, c, d, e) {
    console.log([a, b, c, d, e]);
}

let _ = {}; // define placeholders let _fn = curry(fn,5,_); // curry the function, specify the required number of parameters, specify the required placeholders _fn(1, 2, 3, 4, 5); // print: 1,2,3,4,5
_fn(_, 2, 3, 4, 5)(1); // print: 1,2,3,4,5
_fn(1, _, 3, 4, 5)(2); // print: 1,2,3,4,5
_fn(1, _, 3)(_, 4,_)(2)(5); // print: 1,2,3,4,5
_fn(1, _, _, 4)(_, 3)(2)(5); // print: 1,2,3,4,5
_fn(_, 2)(_, _, 4)(1)(3)(5); // print: 1,2,3,4,5

We have fully implemented a curry function~~

This concludes this article on how to thoroughly understand function currying in front-end JavaScript. For more information on JavaScript function currying, please search 123WORDPRESS.COM's previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!