JavaScript Callback Functions
In JavaScript, functions are queued in an asynchronous structure. And after the operations of the functions are finished, they return the answer. So let’s explain this with an example:
In the example above, there is a product list named “products”, functions that add products to the product list named “addProduct’’ and return the names of the products in the product list named “getProducts”.
The addProduct function is called before the getProducts function in order. However, when we look at the output, we see only three products. The fourth product is nowhere to be seen.
But why can’t we see the fourth product?
Because of the asynchronous structure in JavaScript, the processes are queued. This means that the addProducts and getProducts functions are queued, and the getProducts function completes its operation until the addProduct function works with a delay of 2 seconds.
In an asynchronous structure, it may be desirable to manage the order of these operations. For example, it may be preferred to query after adding a product to the database and not preferred to query before the insertion process is complete.
These sorting operations can be done with callback functions. Alternatively, the same procedures can be done using the promise and “async” and “await” keywords.
So let’s start explaining!
1. Callback Functions
As can be seen in the output, unlike the first example, we’ve brought all the products with the added product after the addition process. Thanks to the callback parameter sent in the addProduct function, it will be able to do this.
It can be challenging to control this structure when multiple callback parameters are needed, and the callback function encounters an error or a different situation. At this point, Promise objects come to our aid.
2. “Promise” Object
It takes two parameters; resolve and reject. “Resolve” works when there is no error and the desired action runs smoothly, while “reject” works when an error is encountered. The values returned from resolve and reject fall into the “then” and “catch” fields.
Resolve and reject values run once. Either successful or unsuccessful.
The “then” function runs when the operation is successful, and the parameter sent in “resolve” falls into this field. When a failed or unexpected error is rejected, the “catch” function runs, and the parameter sent in “reject” falls into this field.
In case the “resolve” field works:
In case the “reject” field works:
2.1. Promise Chaining
As a sequence, the output from one “then” function can be sent as input to the other “then”, that is, a promise chain is created.
One “ then “ output is sent as a frame to the other “then” input. As can be seen, each parameter is passed to the following parameter as a promise object. If multiple “then” functions are written, a “catch” is enough to debug. If an error occurs in a “then”, the remaining “then” is skipped, and the “catch” is passed.
2.2. Using Fetch API
The JSON data returned from the first “then” is sent to the next “then” and printed to the console. See how easy it is to use the Promise structure!
Read more: Working with Fetch API in JavaScript
3. Use of the Keywords “Async” and “Await”
The async and await keywords included with ES7 make asynchronous programming more effortless than ever. Functions with asyn sign return a promise object, while functions with await sign wait for the process with the promise object to complete.
User1 is printed first, and then user2 is printed. In the use of async and await:
- The code becomes more readable
- The “try-catch” structure can be used
- The spiral structure in the “promise” usage is more controllable.
