Learning notes for JavaScript higher-order functions

In JavaScript, there is the concept of higher order functions, so it is ideal for functional programming. That God horse is a higher order function? There is no specific definition of God horse, but higher-order functions have two distinct characteristics:. Use a function to make a parameter or return a function.

function as an argument
As we all know, a function is a first-class citizen in JavaScript, not only can be assigned value, but also as a normal variable, as a function of the parameters.

If you have JavaScript Web programming experience or a front-end developer, you will often encounter callback functions. A function that is executed after an operation is completed is called a callback function. Typically, the callback function is anonymous and is passed to the caller as the last function.

Since JavaScript is single-threaded, it means that only one operation at a time is in progress, while others await the completion of the current operation in the queue. In languages that support higher-order function attributes, the strategy is to pass a function that will be executed after the parent function operation completes, allowing asynchronous behavior, so the script can continue to execute while waiting for the response.

This is useful in web programming because the script may send an AJAX request to the server somewhere, and it needs to handle the server's response, and we don't know when the response will arrive due to network latency or server processing time being uncontrollable. Node.js will use callbacks frequently to make the most of server resources.

For a chestnut, look at the following JavaScript snippet and add a click to the button:

<button id= "Clicker" >so clickable</button>
document.getElementById ("Clicker"). AddEventListener ("click", Function () {
Alert ("You triggered" + this.id);
});

An anonymous function is used in the script to trigger the bomb frame. Of course, you can also define a function individually and pass the function name as a parameter to AddEventListener:

var ProveIt = function () {
Alert ("You triggered" + this.id);
};
document.getElementById ("Clicker"). AddEventListener ("click", ProveIt);

Note that the ProveIt is passed instead of the ProveIt (). When you pass a function with a name without parentheses, the function object itself is passed, and the passed name is passed as the result of the function execution.

function returns as result
In addition to being able to take functions as arguments, JavaScript allows one function to return another function as a result. This is interesting because the function is an object and it can return any other value.

But what does it mean to return a function as a result? Defining a function as the return value of another function allows you to create a function that acts as a template for a new function. This opens another door to JavaScript function programming.

For a chestnut, suppose you are bored with the proper noun millennials in all articles and want to replace all millennials with Snake people. For a moment, you may have only written a simple text substitution function:

var snakify = function (text) {
Return Text.replace (/millenials/ig, "Snake people");
};
Console.log (Snakify ("The millenials are always up to something."));
The Snake people are always up to something.

For this particular situation, this is feasible. But one day, you have an aversion to baby boomers, and you want to invoke a simple function to replace the hateful baby boomers with other text. While the function implementation is simple, you don't want to repeat the code you've written:

var hippify = function (text) {
Return Text.replace (/baby boomers/ig, "aging Hippies");
};
Console.log ("The Baby boomers just look at the other way.");
The aging hippies just look at the other way.
Because a function can be returned as a result, JavaScript can provide a more convenient way:

var attitude = function (original, replacement, source) {
return function (source) {
Return Source.replace (original, replacement);
};
};
var snakify = attitude (/millenials/ig, "Snake people");
var hippify = attitude (/baby boomers/ig, "aging Hippies");
Console.log (Snakify ("The millenials are always up to something."));
The Snake people are always up to something.
Console.log ("The Baby boomers just look at the other way.");
The aging hippies just look at the other way.

Higher-order functions are common in JavaScript, but we are already using higher-order functions.