Share 5 JS high-order functions

1. Introduction

In JavaScript, a function is actually a data, which means that a function can also be assigned to a variable. This article will introduce some uses of higher-order functions in JavaScript.

2. Recursion

The so-called recursion refers to a function calling itself. To put it in a story: Once upon a time there was a mountain, in the mountain there was a temple, in the temple there was an old monk who was telling a story to a young monk! What is the story? "A long time ago there was a mountain, in the mountain there was a temple, in the temple there was an old monk, he was telling a story to a young monk! What was the story? 'A long time ago there was a mountain, in the mountain there was a temple, in the temple there was an old monk, he was telling a story to a young monk! What was the story?...'"

In a sense, recursion is similar to looping. Both execute the same code repeatedly, and both require a termination condition to avoid infinite loops or infinite recursion.

The necessary conditions for recursion are as follows:

• The subproblem is the same as the original problem, but simpler
• There must be an exit
  

There are two ways to make recursive calls in JavaScript:

• By using the function name
• This is done using the arguments.callee property.

The following code shows simple recursion:

var v = 1 // exit condition function fun() {
  console.log('first' + v + 'second function call')
  v++
  if (v <= 3) {
    fun()
  }
}
fun()

The execution results are as follows

First call to the function Second call to the function Third call to the function

3. Callback function

Since a function is the same as any data that can be assigned to a variable, it can certainly be defined, deleted, copied, and passed as an argument to other functions like any other data.

When a function is passed as an argument to another function, the function that is passed as an argument is called a callback function. The function that uses the callback function is called the target function (outer function)

The sample code is as follows:

// Define a function that has two function type parameters, then execute the two functions separately and return their sum.
function sum(a, b) {
  // Target function return a() + b()
}

function one() {
  // callback function return 1
}

function two() {
  // callback function return 2
}

console.log(sum(one, two)) // 3

The code execution process is as follows:

When executing the sum function, two actual parameters are passed in. In the sum function, the two actual parameters are executed as functions, and the return value is calculated and returned.

3.1 Anonymous callback function

The so-called anonymous callback function is a function whose parameter in the target function is a function without a name. Modify the previous code to use an anonymous callback function.

// Define a function that has two function type parameters, then execute the two functions separately and return their sum.
function sum(a, b) {
  // Target function return a() + b()
}

console.log(
  sum(
    function () {
      // Anonymous callback function return 1
    },
    function () {
      // Anonymous callback function return 2
    },
  ),
) // 3

3.2 Callback function with parameters

The callback function can add parameters. The sample code is as follows:

function multiplyByTwo(list, callback) {
  list.forEach(function (v, i) {
    callback(v * 2, i)
  })
}
var list = [1, 2, 3]
multiplyByTwo(list, function (v, i) {
  list[i] = v
})
console.log(list) // [ 2, 4, 6 ]

3.3 Advantages and Disadvantages of Callback Functions

• Anonymous callback functions save global namespace
• Open private data content to the specified location for use
• Encapsulation is guaranteed - private data can be used, but the source is unknown
• Helps improve performance
  

However, callback functions also have shortcomings. When the parameter of the target function is a callback function, the parameter of the callback function is another callback function, and the parameter of the other callback function is also a callback function...that is, nesting dolls, which forms a callback trap. In more serious cases, it can be called callback hell.

4. Self-tuning function

The so-called self-tuning function is a function that is called immediately after definition. The sample code is as follows:

;(function () {
  console.log('self-tuning function')
})()

This syntax may look a bit intimidating, but it is actually nothing. We just put the definition of the anonymous function inside a pair of parentheses, followed by another pair of parentheses outside.

The grammatical structure is shown in the figure below:

In addition to the above two methods, there are several other uncommon methods for self-tuning functions. The sample code is as follows:

;+(function (v) {
  // Formal parameter var w = 100 // Local variable console.log('self-tuning function' + v)
})(1) // Parameters!(function (v) {
  var w = 100 // local variable console.log('self-tuning function' + v)
})(2)

~(function (v) {
  var w = 100 // local variable console.log('self-tuning function' + v)
})(3)

The advantage of using a self-adjusting anonymous function is that no global variables are created.

The disadvantage is that such a function cannot be executed repeatedly (unless it is placed in a loop or another function). This also makes immediate functions very suitable for performing some one-time or initialization tasks.

5. Function of value

When a function is returned as the result of another function, the function returned as a result is called a function as a value.

The sample code is as follows:

function outer() {
  var v = 100
  // Define another function in the body of a function -> internal (private) function return function () {
    // Use anonymous function to return v * 2
  }
}
var result = outer()
console.log(result) // [Function]

The benefits of doing this are:

• It helps us ensure that the global namespace is pure (which means there is less chance of naming conflicts).
• Ensuring privacy — This gives us the option to expose only necessary functions to the “outside world”, while keeping functions that are our own and not used by other parts of the application.
  

6. Closure

Closure is a concept proposed in functions. Simply put, a function definition refers to variables defined outside the function, and the function can be executed outside its definition environment. A closure occurs when an inner function is accessed in some way from any outer function scope.

In fact, closure can be seen as a more general concept of function. Because it is no longer a function defined in the traditional sense.

Closure conditions:

• An inner function is defined within an outer function.
• An external function has a return value, and the return value is the internal function.
• The inner function also references the variables of the outer function.
  

Disadvantages of closures:

• Scope is less intuitive.
• Because variables will not be garbage collected, there is a certain memory usage problem.
  

The role of closure:

• You can use peer scopes.
• Read the internal variables of other elements.
• Extend the scope.
• Avoid polluting global variables
  

The principle of closure:

We can divide the execution of a function into two stages, the precompilation stage and the execution stage;

• During the pre-compilation phase, if an inner function is found to use variables of an outer function, it will create a closure object in memory and save the corresponding values. If a closure already exists, you only need to add the corresponding property value.
• After the execution is completed, the function execution context will be deleted, and the function's reference to the closure object will be destroyed, but its inner function still holds a reference to the closure, so the inner function can continue to use the variables of the outer function.
  

Closures mainly utilize the characteristics of scope chains. A function defined inside a function will add the active object containing the function to its own scope chain. When the function is executed, its execution scope chain is destroyed, but because the scope chain of the inner function still references this active object, its active object will not be destroyed until the inner function is destroyed.

Demo of closure implementation:

// 1. Operate the local variables in the function through the returned internal function function fun () {
    var v = 100; // local variable // Access the local variable v by returning an object to complete the closure return {
        set: function (x) {
            v = x;
        },
        get: function () {
            return v
        }
    }
}
var result = fun();
result.set(200)
console.log(result.get()); // 200

// 2. Define a local variable to count how many times the function is called var generate_count = function () {
    var container = 0;
    return function () {
        container++
        console.log(`This is the ${container}th call`);
    }
}

var result = generate_count();
result(); // This is the first call result(); // This is the second call result(); // This is the third call

// 3. Modify the Math.pow() function so that when finding the square or cube of a number, there is no need to pass the second parameter each time/*
Math.pow(4, 2) // 4 squared Math.pow(4, 3) // 4 cubed */

// Write a function generator function makePower (power) {
    return (number) => {
        return Math.pow(number, power)
    }
}
// Square let power2 = makePower(2)
// Cube let power3 = makePower(3)
// Calculate the square of 4 console.log(power2(4)) // 16
// Calculate the cube of 4 console.log(power3(4)) // 62

Summarize:

This article introduces five higher-order functions in JavaScript, namely recursion, callback functions, self-adjusting functions, value functions, and the use and implementation of closures.

This is the end of this article about JS higher-order functions. For more related JS higher-order functions, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!