(Pt2): Callbacks

the first part of this tutorial, we’ve seen how asynchronous JavaScript code works behind the scenes. Additionally, we’ve mentioned, that there are two main ways to write asynchronous code with JavaScript. In this story, you’ll learn about one of these ways which is the asynchronous-callback style.

Asynchronous Callbacks: who are we?

Again, in one of my previous writings on Medium about functions in JavaScript, we said that,

Functions are first-class citizens.

This is due to the fact that functions in JavaScript are treated as any other kind of variable. Indeed, a function can be passed as an argument to another function or/and returned from another function.

Asynchronous callbacks are often not immediately called. They actually wait for something to happen in the background before they get called. Basically, that’s the reason why they are called “callbacks” after all.

One example we could give about this style of asynchronous programming is the use of addEventListner() function (method) which is part of the Web APIs in your browser. This function accepts at least two parameters: the type of the event, and a callback to call when the event is fired.

In this example, the button is going to listen for any ‘click’ event. If it is clicked, then the function ()=> console.log(‘clicked’) gets called. Therefore ‘clicked’ is printed to the console.

Asynchronous Callbacks: why us?

Asynchronous callbacks, being the native way to achieve asynchronous programming in JavaScript, help you to control the order of your code execution. What do we mean by that?

Let’s have a look at the following example,

Assuming that we want to fetch some data from an external source, then do something with the fetched data.

In this example, to fake the fact that fetching data could take some time, we used the setTimeout() function.

The thing is if you try this code on your end, you’ll get something like the following,

Despite the fact that we invoked fetchSomeData() before doSomethingWithData() as it seems to be the natural order of invoking them, we’re not getting the expected behavior. Doing something with the data cannot come before fetching it.

Why is this happening? What’s wrong with the code sample above?

The short answer is because of the synchronous nature of JavaScript. the functions are invoked and run in the order they appear. However, because fetchSomeData() is doing some asynchronous work behind the scenes, it delays the output. This is why the order of our code execution got messed up!

No problem! asynchronous callbacks to the rescue. Let’s do it…

This quick fix helped to control the order in which the execution of our code happen. The result would look something like this,

We just passed a callback, that is the doSomethingWithData function, to our fetchSomeData() function and made sure it is being called when the fetched data is ready. How cool is that?

Asynchronous callbacks: we’re amazing, but…

Asynchronous callbacks are awesome, but…There are always buts in every story…There is one pitfall you might consider while using asynchronous callbacks…

Let’s take the previous example scenario and develop it a little bit.

Assuming, now, that besides fetching some data and doing something with it, we want to send that data back, and then notify someone that the data is sent back.

Look at this, guys…We end up having a nested structure of callbacks. What if we got some more asynchronous stuff to do? maybe millions of other things to do? If we follow this asynchronous programming style, we will get messy complex code that is impossible to read and understand. In JavaScript, we often refer to this pitfall as “the callback hell”.

It is just something I want you to be aware of if one day you decide to approach asynchronous programming in JavaScript using callbacks.

Asynchronous callbacks: are you leaving us?

You might use asynchronous callbacks for simple problems, but JavaScript provides you with a better alternative to not fall into the callback hell issue.

For that, Promises in JavaScript are going to be your new friends. They are going to be the object of the next part of this tutorial.

So, stay tuned…