Understanding and using JavaScript callback functions | JavaScript is very sexy and javascript callback Functions

Understanding and using JavaScript callback functions | JavaScript is very sexy and javascript callback Functions

In JavaScript, a function is the first class Object. This means that the function is of the Object type and can be used in the first class like other objects (such as String, Array, and Number, because they are all objects. They can be "stored in a variable, passed into a function as a parameter, created in the function, and returned in the function ".

Because a function is the first type of object, we can pass a function as a parameter to another function and then execute the passed function or even return the function for later execution. This is the essence of using callback functions in JavaScript. In the remaining articles, we will learn about all aspects of JavaScript callback functions. Callback functions are probably the most widely used functional programming technology in JavaScript. You can probably see them in any JavaScript code or jQuery code, however, it remains mysterious for many JavaScript developers. When you read this article, it will no longer be mysterious.

Callback functions come from a programming paradigm called functional programming. Basically, functional programming specifies that functions are used as parameters. Functional programming used to be-Of course it is, but to a lesser extent-is considered a special skill of a programming master.

Fortunately, the function programming technology has been clearly explained, so that ordinary people like you and me can easily understand and use it. One of the main techniques in functional programming is the callback function. Soon you will read that implementing a callback function is as simple as passing in a common variable as a parameter. This technique is so simple that I am always surprised that it is often put under the advanced JavaScript topic.

What is a callback or high-level function?

A callback function, also known as a high-order function, is to pass a function as a parameter to "another function", and then the callback function is called in "another function. A callback function is essentially a mode (a solution for determining a problem). Therefore, a callback function is also called a callback mode.

Think about the following common usage of callback functions in jQuery:

Copy code

In the above example, we can see that we pass the function as a parameter to a click method. The click method calls the callback function we passed in. This example shows the use of a typical callback function, which is widely used in jQuery.

Consider another typical callback function example:

Copy code

Like above, note that we use an anonymous function as a parameter to give the forEach method.

So far, we have passed the anonymous function as a parameter to another function or method. Next, let's take a look at more specific examples. Let's first understand how callback works and start to create our own callback function.

How does the callback function work?

We can pass and return functions in the function like variables, and use them in another function. When we pass a function as a parameter to another function, we only pass the function definition. We didn't call the function in the parameter. In other words, we didn't pass the function just like executing a function with a pair of parentheses.

In addition, because the include function has a callback function defined as a parameter, it can be called at any time.

Note that the callback function is not executed immediately. It is "called Back" in the specified part of the contained function body ". Therefore, even if the first jQuery example is as follows:

Copy code

The anonymous function will be called in the function body later. Even if it is not named, it can be obtained through the arguments object in the function body.

The callback function is a closure.

When we pass a callback function as a parameter to another function, the callback is called at a location in the body of the function, as if the callback is defined in the body of the function. This means that the callback is a closure. Read my other blog post Understand JavaScript Closures With libraries, learn more