Master the art of using promises and callbacks in JavaScript to tackle asynchronous operations effortlessly!

Javascript is a synchronous single-threaded language, i.e., it executes all the code in a specific sequence one line at a time. However, there are situations where we must perform some asynchronous operations in the JS runtime. That’s where promises and callbacks come to the rescue.

Callbacks are javascript functions passed as arguments in another function called the higher order function. Now, this higher-order function might perform some asynchronous tasks and after its completion, we need to run that callback function (See image below).

These callbacks perform very well in these scenarios but have some limitations. For example, there can be a use case where we need to call the higher-order function with another callback as an argument in the parent callback function (See image below). In such situations, the entire code starts shifting on the right-hand side of the editor and hampers the code resulting in pyramid formation of doom in the codebase.

Another downside of using callbacks is that it can generate security flaws in the codebase, especially during the usage of third-party API services that use callbacks under the hood. For example, if we are invoking a higher order function provided by the API for performing some asynchronous operation and after its successful / failed completion it will execute the callback passed as argument in the HOF. So, here comes the catch, the API now has full access to that callback in its HOF and there is no guarantee how the HOF will execute that callback. This issue of giving away the control of the subroutines to some other APIs is known as Inversion of Control.

To overcome all these issues of callbacks, JavaScript provides us with Promise API. Promise API helps to detect the eventual completion/failure of an asynchronous operation. The promise class instantiates a promise object using its constructor. A callback function is passed in the constructor function. Resolve and reject functions are passed inside this callback that will run on successful/failed completion of the asynchronous task (see image below).

Now, to call this apiFn function provided by a third-party API service, there are 2 ways, which are:

1. Using then/catch methods: As the apiFn function returns a promise object, 'then and catch' methods can be chained on apiFn. Hence, we can pass our defined resolve and reject the functions inside them and catch methods respectively. One key point is that no inversion of control is taking place over here. Promise API hides away the actual function definition of the resolve and reject function making it more secure.

Also, if multiple asynchronous operations must be executed in a sequence then that can be done using multiple chaining of the methods as a result no pyramid of doom will be formed.

2. Using async/await syntax: