JavaScript pipe principle in practice

The pipe principle in JavaScript

Code sample

const pipe = (... fns) => x => fns.reduce((y, f) => f(y), x);Copy the code

The principle of

The amount of information in a single line of code is very rich, which can be analyzed in the following aspects

(… fns)

• . Is the ES6 standard array extension operator

• The extension operator expands an array: math.max (… [1,2,3]) is equivalent to math.max (1,2,3)

• [… FNS] =[1,2,3] then FNS =[1,2,3]

  • Destruct assignment: ES6 allows extracting values from arrays and objects in a pattern and then assigning values to variables. This is called destruct; Example:Let [a, b, c] = [1, 2, 3]

= >

• This is the arrow function, with the parameters on the left and the body on the right
• Arrow functions have their own characteristics, such as this pointing to
  • This refers to the object where it was defined, not where it was used
  • It cannot be used as a constructor
  • Do not use arguments objects. Use rest arguments instead
    • Rest parameters are a way of referring to (… VariableName). This method is used to pass parameters to functions
  • You cannot use the yield command
  • Arrow functions do not have a Prototype property
  • Cannot be used with new

reduce

• This function operates on an array object
• Receive a function as an accumulator, and each value in the array (from left to right) begins to shrink, eventually calculating to a single value
• Array. Reduce (function(total, currentValue, currentIndex, arR), initialValue)
  • We can define the function(total, currentValue, currentIndex, arr) as part of the logical processing of personalization and manually specify the initialValue initialValue
  • The purpose of the initialValue is that when the custom function is executed for the first time, the value of the total parameter is the initialValue we set
  • CurrentValue === arr[currentIndex]

Function coriatization

• Currie function which is a kind of by the need to accept multiple parameters function into a only accepts a parameter function: if a function needs three parameters, that after the curry function will accept a parameter and returns a function to receive the next function, this function returns the function to pass into the third argument, the last function results are applied to all of the parameters of the function.

• Convert the above code sample to the following form:

  const pipe = function(x, ... fns) { fns.reduce((y, f) => f(y), x); }Copy the code

Further disassemble

• In order to see the pipe function in action, the above functions are further broken down and expressed in the simplest syntax to get a better look at its inner workings

  	functionpipe(x, ... fns){let total = x;
  		for(let f in fns){
  			total = f(total)
  		}
  		return total;
  	}
  Copy the code

The sample

• When we call pipe(x, f1, f2), return f2(f1(x))

• Code sample

  const pipe = (... fns) => x => fns.reduce((y, f) => f(y), x); const f1 = x => {return x+1;
  }
  
  const f2 = x => {
      return 2 * x;
  }
  
  // (1+1)*2 = 4
  let result = pipe(f1, f2)(1);
  console.log(result);
  Copy the code