In-depth explanation of currying of JS functions

1. Supplementary knowledge points: implicit conversion of functions

Here’s a simple question to think about.

function fn() {
    return 20;
}
console.log(fn + 10); // What is the output?

Modify it slightly and think about what the output will be?

function fn() {
    return 20;
}
 
fn.toString = function() {
    return 10;
}
 
console.log(fn + 10); // What is the output?

You can continue to modify it.

function fn() {
    return 20;
}
 
fn.toString = function() {
    return 10;
}
 
fn.valueOf = function() {
    return 5;
}
 
console.log(fn + 10); // What is the output?

// The output results are function fn() {
    return 20;
}
10
 
20
 
15

When using console.log, or performing calculations, implicit conversions may occur. From the above three examples we can draw some conclusions about implicit conversion of functions.

When we do not redefine toString and valueOf, the implicit conversion of the function will call the default toString method, which will return the definition of the function as a string. When we actively define the toString/vauleOf method, the return result of the implicit conversion is controlled by ourselves. Among them, valueOf has a higher priority than toString.

Therefore, the conclusion of the above example is easy to understand. I recommend you to give it a try.

2. Supplementary knowledge points: map method of enclosing arrays using call/apply

map(): Runs a given function on each item in an array, returning an array of the results of each function call.

In layman's terms, it means traversing each element of the array and returning the calculation result after performing calculations in the first parameter of map (callback function). Returns a new array consisting of all the calculation results.

// There are three parameters in the callback function // The first parameter represents each item in newArr, the second parameter represents the index value of the item in the array // The third parameter represents the array itself // In addition, this in the callback function, when the second parameter does not exist in map, this points to the lost object, when the second parameter exists, it points to the object set by the parameter var newArr = [1, 2, 3, 4].map(function(item, i, arr) {
    console.log(item, i, arr, this); // Try it out return item + 1; // Add 1 to each item
}, { a: 1 })
 
console.log(newArr); // [2, 3, 4, 5]

The details of the map method are explained in the comments in the example above. Now we are faced with a difficult problem, which is how to encapsulate the map.

Think of the for loop first. We can use a for loop to implement a map, but when encapsulating, we will consider some issues. When we use the for loop, a loop process is indeed easy to encapsulate, but it is difficult to encapsulate what we need to do for each item in the for loop with a fixed thing. Because in each scenario, the processing of data in the for loop must be different.

So we thought of a good way to handle these different operations with a separate function, and let this function become the first parameter of the map method. The specific operation in this callback function is determined by ourselves when using it. Therefore, the encapsulation implementation based on this idea is as follows.

Array.prototype._map = function(fn, context) {
    var temp = [];
    if(typeof fn == 'function') {
        var k = 0;
        var len = this.length;
        // Encapsulate for loop process for(; k < len; k++) {
            // Throw each operation into fn, and use the call method to specify fn's this pointer and specific parameters temp.push(fn.call(context, this[k], k, this))
        }
    } else {
        console.error('TypeError: '+ fn +' is not a function.');
    }
 
    // Return a new array consisting of the results of each operation return temp;
}
 
var newArr = [1, 2, 3, 4]._map(function(item) {
    return item + 1;
})
// [2, 3, 4, 5]

In the above package, I first defined an empty temp array, which is used to store the final return results. In the for loop, the parameter fn function is executed once each time the loop is executed, and the parameters of fn are passed in using the call method.

After understanding the encapsulation process of map, we can understand why we always expect to have a return value in the first callback function when using map. In the eslint rules, if we do not set a return value when using map, it will be judged as an error.

Ok, now that we understand the implicit conversion rules of functions and how to use call/apply in this scenario, we can try to understand currying through a simple example.

3. Currying from the shallow to the deep

There is a widely circulated interview question about currying in front-end interviews.

Implement an add method so that the calculation results can meet the following expectations:

add(1)(2)(3) = 6
add(1, 2, 3)(4) = 10
add(1)(2)(3)(4)(5) = 15

Obviously, the calculation result is the sum of all parameters. Each time the add method is run, it must return the same function and continue to calculate the remaining parameters.

We can start from the simplest example and look for solutions step by step.

When we only call it twice, we can encapsulate it like this.

function add(a) {
    return function(b) {
        return a + b;
    }
}
 
console.log(add(1)(2)); // 3

If you call it only three times:

function add(a) {
    return function(b) {
        return function (c) {
            return a + b + c;
        }
    }
}
 
console.log(add(1)(2)(3)); // 6

The above encapsulation looks a bit similar to the result we want, but the use of parameters is very restricted, so it is not the final result we want. We need a general encapsulation. What should I do? To summarize the above two examples, we actually use the characteristics of closures to concentrate all parameters in the function returned at the end to calculate and return the results. Therefore, when we encapsulate, our main purpose is to calculate the parameters together.

Let’s take a look at the specific implementation.

function add() {
    // When executing for the first time, define an array to store all parameters var _args = [].slice.call(arguments);
 
    // declare a function inside, use the closure feature to save _args and collect all parameter values ​​var adder = function () {
        var _adder = function() {
            [].push.apply(_args, [].slice.call(arguments));
            return _adder;
        };
 
        // Using the implicit conversion feature, implicit conversion is performed when the function is finally executed, and the final value is calculated and returned _adder.toString = function () {
            return _args.reduce(function (a, b) {
                return a + b;
            });
        }
 
        return _adder;
    }
    return adder.apply(null, [].slice.call(arguments));
}
 
// Output results, freely combinable parameters console.log(add(1, 2, 3, 4, 5)); // 15
console.log(add(1, 2, 3, 4)(5)); // 15
console.log(add(1)(2)(3)(4)(5)); // 15

The above implementation uses the characteristics of closures. The main purpose is to collect all parameters in an array through some clever methods and add up all the items in the array during the final implicit conversion. Therefore, when we call the add method, the parameters are very flexible. Of course, it also easily met our needs.

Now that you understand the demo above, let's take a look at the definition of currying, I believe it will be easier for you to understand.

Currying, also known as partial evaluation, is a technique that transforms a function that accepts multiple parameters into a function that accepts a single parameter (the first parameter of the original function) and returns a new function that accepts the remaining parameters and returns the result of the operation.

• Receiving a single parameter often uses a callback function because it has to carry a lot of information.
• Pass some parameters into the function through callback functions, etc.
• Returns a new function that handles all the parameters you want to pass in.

In the example above, we can transform add(1, 2, 3, 4) into add(1)(2)(3)(4). This is partial evaluation. Each time the parameters passed in are only a part of all the parameters we want to pass in. Of course, in actual applications, parameters are not often processed so complicatedly. In many cases, they are simply divided into two parts.

Let's think about another question related to currying.

Suppose there is a calculation requirement that requires us to connect each item in the array with the characters we want. What should we do? It's very simple to think of using the join method.

var arr = [1, 2, 3, 4, 5];
 
// In actual development, it is not recommended to directly extend Array with new methods // It is just a way to demonstrate it more clearly Array.prototype.merge = function(chars) {
    return this.join(chars);
}
 
var string = arr.merge('-')
 
console.log(string); // 1-2-3-4-5

To increase the difficulty, add a number to each item and then connect them together. Then we need map here to help us perform special operations on each item, generate a new array and then connect them with characters. The implementation is as follows:

var arr = [1, 2, 3, 4, 5];
 
Array.prototype.merge = function(chars, number) {
    return this.map(function(item) {
        return item + number;
    }).join(chars);
}
 
var string = arr.merge('-', 1);
 
console.log(string); // 2-3-4-5-6

But what if we want to subtract an array from each item in the array and then concatenate them together? Of course, the implementation is the same as the addition operation above.

var arr = [1, 2, 3, 4, 5];
 
Array.prototype.merge = function(chars, number) {
    return this.map(function(item) {
        return item-number;
    }).join(chars);
}
 
var string = arr.merge('~', 1);
 
console.log(string); // 0~1~2~3~4

The clever friends must have discovered the confusion. We hope to encapsulate a function that can handle different calculation processes at the same time, but we cannot use a fixed routine to encapsulate each operation. So the problem becomes the same as the problem faced when encapsulating map. We can do this with the help of currying.

The same principle as map encapsulation, since we are not sure in advance how we are going to process each piece of data, I just know that we need to process them and then connect them with characters, so we might as well save the processing content in a function. And only the part that is connected by fixing the package is required.

So we have the following package.

// Encapsulation is very simple, one sentence to get it done Array.prototype.merge = function(fn, chars) {
    return this.map(fn).join(chars);
}
 
var arr = [1, 2, 3, 4];
 
// The difficulty lies in how to define the operation in actual use, and use closure to save the passed num parameter var add = function(num) {
    return function(item) {
        return item + num;
    }
}
 
var red = function(num) {
    return function(item) {
        return item - num;
    }
}
 
// Add 2 to each item and merge var res1 = arr.merge(add(2), '-');
 
// Subtract 2 from each item and merge var res2 = arr.merge(red(1), '-');
 
// You can also use the callback function directly, multiply each item by 2 and merge them var res3 = arr.merge((function(num) {
    return function(item) {
        return item * num
    }
})(2), '-')
 
console.log(res1); // 3-4-5-6
console.log(res2); // 0-1-2-3
console.log(res3); // 2-4-6-8

Can you find the characteristics of currying from the above examples?

4. Currying Generalization

The general currying method is actually much simpler than the add method we encapsulated above.

var currying = function(fn) {
    var args = [].slice.call(arguments, 1);
 
    return function() {
        // The main purpose is to collect all the required parameters into an array for unified calculation var _args = args.concat([].slice.call(arguments));
        return fn.apply(null, _args);
    }
}
 
var sum = currying(function() {
    var args = [].slice.call(arguments);
    return args.reduce(function(a, b) {
        return a + b;
    })
}, 10)
 
console.log(sum(20, 10)); // 40
console.log(sum(10, 5)); // 25

5. Currying and bind

Object.prototype.bind = function(context) {
    var _this = this;
    var args = [].prototype.slice.call(arguments, 1);
 
    return function() {
        return _this.apply(context, args)
    }
}

This example uses the flexible use of call and apply to implement the bind function.

In the previous examples, we can summarize the characteristics of currying:

• Receive a single parameter and pass more parameters through a callback function?
• Return a new function that processes all the parameters you want to pass in;
• You need to use call/apply and arguments objects to collect parameters;
• The returned function is used to process the collected parameters.

I hope that after reading this, everyone will have a general understanding of the concept of currying. If you want to use it proficiently, you need to have more practical experience.

The above is an in-depth explanation of the details of currying of JS functions. For more information about currying of JS functions, please pay attention to other related articles on 123WORDPRESS.COM!