Understanding Asynchronous programming in JavaScript.

What is Asynchronous programming?

According to MDN official docs,

Asynchronous programming is a technique that enables your program to start a potentially long-running task and still be able to be responsive to other events while that task runs, rather than having to wait until that task has finished. Once that task has finished, your program is presented with the result.

Various functions provided by browsers can potentially take a long time, and therefore, are asynchronous. For example:

• Making HTTP requests using fetch() API
• Accessing a user's camera or microphone using getUserMedia()
• Asking a user to select files using _showOpenFilePicker() _

So even though you may not need to implement your own asynchronous functions very often, you are very likely to need to use other asynchronous functions correctly.

Why are asynchronous functions important?

Lets have a scenario where a function generates large number if prime numbers (generatePrime()).

Even if the generatePrime() is written to be very efficient, it will still take a bit of time to complete (long-running function). During this period when the function is running, the program/app will become totally unresponsive: you won't be able to click anything, type anything, or do anything else.

This is the basic problem with long-running synchronous functions. What we need is a way for our program to:

• Start a long-running operation by calling a function.
• Have that function start the operation and return immediately, so our program can still respond to other events.
• Notify us of the result of the operation when it eventually completes.

These are precisely what asynchronous functions can do and that is why they are so important.

Typical Examples of Asynchronous programming

An example of asynchronous programming is Event handlers: you provide a function (the event handler) that will be called, not right away, but whenever the event happens.

An Event handler is a type of callback function.
A callback is just a function that's passed into another function, with the expectation that the callback will be called at the appropriate time.

Callbacks used to be the main way asynchronous functions were implemented in Javascript.
However, Callbacks have been seen to have a bunch of downsides, for instance :

• Callback-based code can become hard to understand when the callback itself has to call functions that accept a callback.
• The code becomes harder to read as the nesting increase. This is sometimes called "callback hell" or the "pyramid of doom".
• it can also get very hard to handle errors as you often have to handle errors at each level of the "pyramid"/ nesting, instead of having error handling only once at the top level.

For these reasons, most modern asynchronous APIs don't use callbacks anymore. Instead, the foundation of asynchronous programming in JavaScript is the Promise,

In the next post, I'll be discussing Promises, the popular async/await, and how to work with them.

References:
MDN official Documentation