What is JavaScript all about: callback function

Photo by Pavan Trikutam on Unsplash

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action

Why do we use callbacks?

JavaScript runtime engine is a single threaded and can only do one thing at a time, means, it is synchronized. However, there are some cases that code runs (or must run) after something else happens and also not sequentially. This is called asynchronous programming.

Callbacks make sure that a function is not going to run before a task is completed but will run right after the task has completed. It helps us develop asynchronous JavaScript code and keeps us safe from problems and errors.

a callback function gives us the ability to execute a function/event/action in an asynchronous way

How do we use callbacks?

In JavaScript, functions are objects. Because of this, functions can take functions as arguments, and can be returned by other functions. Functions that do this are called higher-order functions.
Any function that is passed as an argument is called a callback function.

When do we use callbacks?

User interaction events
JavaScript gives your program the ability to react to browser events, specially user events.

The snippet above simply assign the profile element to a const and adds event listener when a user clicks on this element, sayMyName() is called and logs my name.

In this case, sayMyName() is a callback function. It passed as an argument to another function and it is executed after an event has happened, in this case, a click event.

The above snippet is exactly the same as the one above it but only written in jQuery. Here, an anonymous function being passed into the click() function/event and is a callback function.

Waiting for a response

It is not a tricky snippet, and what you expect to happen will happen.
JavaScript will log

one
two

in this order.

The tricky part comes when the first function needs to wait for some kind of a response to be returned or a process to be finished for example — api call, read a file, get data from DB, etc. To mimic this process, we can use setTimeout function.

setTimeout() takes two arguments. First, a function to execute and second, the time in milliseconds of which the code should be executed after.

We can say that the first argument setTimeout takes is a callback function. It is passed as an argument to another function (the setTimeout() function) and it executes after some action/process (after the milliseconds argument).

With that being said, this time our code will print

two
one

in this order.

We can’t relay on JavaScript to execute functions in the order we write them. Callbacks give us the option to control on the order of the code execution.

We can use callback to make sure a function or a code is being executed after another function finish its process.

This time, we pass a callback to one() function. one() will wait for setTimeout() to finish (after 1000 milliseconds) and only then will log one to the console and execute the callback function, which in our case, will simply log two to the console.

Pyramid of doom

While callback functions are an essential part in JavaScript, they can become very messy and hard to work with.

Let’s look at the above example in a different way

The above snippet does exactly the same as the other one above it, I just wrote it differently. This time I created nested callback functions. Now, let’s imagine we want to print not only the numbers one and two, but also three and four.

It just doesn’t make sense to continue and add more and more callback functions. It looks bad, un readable, un maintainable and un scaleable.

Nesting many asynchronous functions inside callbacks is known as the pyramid of doom or the callback hell.

To avoid the those, you use promises or async/await functions.