preface

This article contains 1454 words and takes about 4 minutes to read.

Summary: This article explains the concept of Currization in Javascript and how to use it at work from a beginner’s perspective.

  • Understand the Currization of Javascript

  • Zhihu column: front – end attacker

  • Blog address: Damonare’s personal blog

Things close to respect, the United States more than three.

The body of the

Functional programming is a popular programming paradigm that advocates passing functions as arguments and then returning a function with no side effects. In plain English, you expect a function to do only one thing.

Programming languages like Javascript, Haskell, Clojure, and others support functional programming.

This programming philosophy covers three important concepts:

  • Pure functions
  • Currie,
  • Higher-order functions

The main purpose of this article is to clarify the concept of Currization.

What is Corrification

Let’s start with an example:

function sum(a, b, c) {
  return a + b + c;
}
/ / call
sum(1.2.3); / / 6
Copy the code

The above function implements the addition of three parameters a,b,c, and can be written into the Currization function as follows:

function sum(a) {
  return function (b) {
    return function(c) {
    	returna + b + c; }}}/ / call
let sum1 = sum(1);
let sum2 = sum1(2);
sum2(3); / / 6
Copy the code

Currization is the process of converting a function with more parameters into a function with fewer parameters.

The first step is to call sum(1), where the variable sum1 equals:

sum1 = function(b) {
 	return function(c) {
    // Notice that the variable a exists in the closure and can be called, a = 1
    returna + b + c; }}Copy the code

Then call sum1(2), which assigns to the variable sum2 equivalent to:

sum2 = function(c) {
  // The variables a and b are in the closure, a = 1, b = 2
  return a + b + c;
}
Copy the code

Finally, call sum2(3), which returns the result 6 of 1 + 2 + 3;

This is the simplest Curryization function, isn’t it?

The role of the Currization function

So the question is, the above rewritten Coriolization function and the original function compared to a lot of code, but also not as easy to understand the original function, what is the use of coriolization function?

It’s true that the Currization function looks bloated and unwieldy here, but it can be very useful in many situations, and many people are already using currization functions without even realizing it. Here’s a simple example:

Suppose we have a batch of cuboids, and we need to calculate the volume of these cuboids to achieve a function as follows:

function volume(length, width, height) {
	return length * width * height;
}
volume(200.100.200);
volume(200.150.100);
volume(200.50.80);
volume(100.50.60);
Copy the code

It can be found that there are many cuboids of the same length when calculating the volume function of cuboids above. Let’s use the Currization function to realize it:

function volume(length, width, height) {
	return function(width) {
    	return function(height) {
         returnlength * width * height; }}}let len200 = volume(200);
len200(100) (200);
len200(150) (100);
len200(50) (80);
volume(100) (50) (60);
Copy the code

As mentioned above, by implementing a Len200 function, we uniformly deal with the volume of cuboid with the length of 200, thus realizing parameter multiplexing.

Here’s another example of a function that executes only once:

function execOnce(fun) {
 	let flag = true;
  return function() {
    if (flag) {
      fun && fun();
      flag = false; }}}let onceConsole = execOnce(function() {
	console.log('Print once only');
});
onceConsole();
onceConsole();
Copy the code

As shown above, we implement a function execOnce that takes a function argument and returns a function with flag in a closure to determine whether the returned function has been executed. OnceConsole is equivalent to:

let onceConsole = function() {
  if (flag) {
     	(function() {
        console.log('Print once only');
      })()
      flag = false; }}Copy the code

This is also a simple application of the Currization function.

The implementation of general Currization functions

Since the Currization function is so useful, can we implement a general Currization function? This function can convert a function argument to a Currified function.

 / / the first edition
var curry = function (fn) {
  var args = [].slice.call(arguments.1);
  return function() {
    var newArgs = args.concat([].slice.call(arguments));
    return fn.apply(null, newArgs);
  };
};
 function add(a, b) {
   return a + b;
 }

var addFun = curry(add, 1.2);
addFun() / / 3
/ / or
var addOne = curry(add, 1);
Copy the code

In the code above, we take a function as an argument, collect other arguments, and pass them to the function argument to execute. There is a problem with the above code. The arguments are not free enough. For example, if we want to call it this way, we will get an error:

var addFun = curry(function(a, b,c) {
  return a + b + c;
}, 1);
addFun(2) (3); / / error addFun (...). is not a function
Copy the code

This seems to violate our principle of parameter reuse, which is improved as follows:

function curry(fn, ... args) {
  var length = fn.length;
  args = args || [];
  return function(. rest) {
    var _args = [...args, ...rest];
    return _args.length < length
      ? curry(fn, _args)
    : fn.apply(this, _args); }}var fn = curry(function(a, b, c) {
  console.log(a + b + c);
});
fn('a'.'b'.'c'); // abc
fn('a'.'b') ('c'); // abc
fn('a') ('b') ('c'); // abc
Copy the code

The above implementation is perfect, and the implementation of the tool function can be summed up in one sentence:

Closure is used to store the parameters of the function and execute the function when the parameters reach a certain number.

Afterword.

Currization is based on closures. Not understanding closures may hinder the understanding of Currization. I hope this article will let you know and understand the currization of Javascript.

The ability is limited, the level is general, welcome to erratum, greatly appreciated.

Subscribe for more articles on Advanced Front-end learning and reply to 666 for a package of front-end technology books

  • Reply “666” to receive a package of front-end technical books;