Offer to come, dig friends take it! I am participating in the 2022 Spring Recruit Punch card activity. Click here for details.

⭐ ⭐

A:

Coriolization function is a programming technique to convert a multi-parameter function into multiple single-parameter functions, that is, to convert an n-yuan function into n unary functions.

A partial function is a programming technique in which a series of arguments are fixed to one function to produce another function with a smaller arithmetic number.

The difference between a Currified function and a partial function is:

The Currization function f(x, y, z) can only be converted to f(x)(y)(z), as many function calls as there are argumentsCopy the code
The partial function F (x, y, z) can be converted to f(x, y)(z) or f(x)(y, z).Copy the code

The goal of both is to avoid frequent calls to functions with the same parameters while making it easy to reuse.

Important: Both implementations use closures.

Currization function

Suppose we have a function for finding the volume of a cube.

function getVolume(width, length, height) {
  return width * length * height
}
Copy the code

If we encounter a cube whose length and width are always the same, only its height changes constantly.

const volume1 = getVolume(1.2.3)
const volume2 = getVolume(1.2.4)
const volume3 = getVolume(1.2.5)

console.log(volume1) / / 6
console.log(volume1) / / 8
console.log(volume1) / / 10
Copy the code

Let’s write it like this:

function getVolume (width) {
  return length= > {
    return height= > {
      return width * length * height
    }
  }
}
Copy the code

And then when you have a cube with the same length and width, you can calculate the volume this way.

const getTwoWithVolume = getVolume(1) (2)

const volume1 = getTwoWithVolume(3) 
const volume2 = getTwoWithVolume(4)
const volume3 = getTwoWithVolume(5)

console.log(volume1) / / 6
console.log(volume1) / / 8
console.log(volume1) / / 10
Copy the code

The first argument width is recorded in the closure of the getVolume function, and the second argument length is recorded in the closure of the anonymous function.

The getVolume function above is written as an arrow function. The arrow function code is really neat, but it can be hard to understand.

const getVolume = width= > length= > height= > width * length * height
Copy the code

Partial function

Partial functions are implemented using closures as follows:

const partial = function (fn, ... args) {
  return function (. rest) {
    returnfn(... args, ... rest) } }const getVolume = (width, length, height) = > width * length * height

const twoMultiplyHeight = partial(getVolume, 1.2) // The width is fixed at 1, the length is fixed at 2, and the height is changing
console.log(twoMultiplyHeight(3)) / / 6
console.log(twoMultiplyHeight(4)) / / 8
console.log(twoMultiplyHeight(5)) / / 10

const tenMultiplyHeight = partial(getVolume, 5.2) // The width is fixed at 5, the length is fixed at 2, and the height is constantly changing
console.log(tenMultiplyHeight(2)) / / 20
console.log(tenMultiplyHeight(3)) / / 30
console.log(tenMultiplyHeight(4)) / / 40

const tenMultiplyLengthAndHeight = partial(getVolume, 10) // The width is fixed at 10, and the length and height are constantly changing
console.log(tenMultiplyLengthAndHeight(2.5)) / / 100
console.log(tenMultiplyLengthAndHeight(3.4)) / / 120
console.log(tenMultiplyLengthAndHeight(3.3)) / / 90
Copy the code

For example, if the width is fixed at 1, the length is fixed at 2, and the height is constantly changing, the first two parameters that are fixed are recorded in the closure.

expand

We often write Ajax requests that unconsciously use partial functions.

For example, if all requests have the same token in headers, or if you separate out get and POST requests that are used more often based on the request method, you might write something like this:

function request (method, url, headers) {
  // ...
}

const headers = {
  authorization: 'xxx'
}

const getRequest = url= > request('get', url, headers)
const postRequest = url= > request('post', url, headers)

getRequest('/api/getBookList')
postRequest('/api/login')
Copy the code

At the end

If my article is helpful to you, your 👍 is my biggest support ^_^

You can also follow the front End Daily Question column in case you lose contact

I’m Allyn, export insight technology, goodbye!

The last:

How do CLOSURES implement a singleton pattern?

Next up:

“Front-end Daily Ask (34)” closures and loop traps