Hi ~ I am speechless and I am very happy to share my learning experience here.

Some notes on functional programming are uniformly recorded in the functional programming column

What is a higher-order function?

In JavaScript, a function that takes another function as an argument or returns the function as output is called a higher-order function.

  • Higher-order functions can operate on other functions:
    1. As some other functionparameter
    2. As some other functionReturns the result

Used as arguments to other functions

Example: Simulate array.prototype.map ()

The array.prototype.map () method creates a new Array with the result that each element in the Array is the value returned by calling the provided function once.

 let array = [1.2.3.4.5] // An array of numbers
 const square = item= >item ** 2 // call back to power 2
 const newArr = array.map(square) // Use map to calculate the data in array
 console.log(newArr); // Print the result: [1, 4, 9, 16, 25]
Copy the code

When we call array.map(square), the square argument is a callback function that takes the map argument and powers the data to the second power, eventually returning a new array.

We can simulate the map() method:

  let array = [1.2.3.4.5] // An array of numbers

  // array: original array fn: callback function
  const map = (array, fn) = > { 
    let results = [] 

    // Iterate over the array
    for (const value of array) { 
        results.push(fn(value)) // Each item in the data is processed by the callback function fn() before being placed in the new array Results
    }
    return results Return a new array
  }
  const newArr = map(array, v= > v ** 2)
  console.log(newArr) // Print the result: [1, 4, 9, 16, 25]
Copy the code

Used as the result of another function

In addition to accepting functions as arguments, higher-order functions can also return functions as result values.

// One function returns another function
function sum (arr) {
    let msg = 'Hi~ wuyanfeiying' 
    return function () { 
        console.log(msg) 
    } 
}

// The first call
const fn = sayHi() 
fn() //Hi~ wuyanfeiying

// The second call
sayHi()()//Hi~ wuyanfeiying
Copy the code

A closure is one in which a function is returned and a member inside the function is accessed.

closure

Closure: A function is bundled with references to its surrounding state (lexical environment) to form a closure that calls a function’s inner function and accesses members of that function’s scope in another scope

The above example (used as a return from another function) is actually a closure,

// Take a number to the second power
function makePower (power) {
  return function (number) {
    return Math.pow(number, power)
  }
}

/ / square
let power2 = makePower(2) // Return a function

// execute only when called
console.log(power2(4)) / / 16
console.log(power2(5)) / / 25

Copy the code

Each call returns a new function, even if the same argument is passed:

/ / square
// Create two new functions:
let power2_1 = makePower(2)
let power2_2 = makePower(2)
power2_1 === power2_2 // false
Copy the code

The call results of power2_1() and power2_2() do not affect each other.

The role of closures

Extends the scope of a function’s internal members

  1. Is a function that reads variables inside other functions, essentially parsing variables (inside out)

The function is on the execution stack at the time of execution and removed from the execution stack after execution, freeing the memory of the internal member. However, after the function is removed, the memory of the internal member cannot be freed if there is an external reference.

  1. Can be used to encapsulate private variables, to achieve simulation

  2. You can save variables to memory

The meaning of using higher-order functions

  • Reduced code length, increased readability, and simplified accessibility.
  • Higher-order functions are used to abstract common problems and are called without considering how they are implemented internally.

The appendix

  • Higher order function – Liao Xuefeng
  • Understand high-level functions in JavaScript – Ant RichLab front end team
  • Array.prototype.map()-MDN
  • Closure – Liao Xuefeng
  • Closed heart is inclusive of the world, you are not alone