What is JavaScript Callback?

What is a callback?

The callback is a type function that is used as an argument of another function and this way the function is able to call another function.
Sounds a little complicated, right? Let’s try to understand what JavaScript callback is by using some daily real-life examples

How do functions run in JavaScript?

In JavaScript, functions run according to the order you called them not according to the order you defined them.

This is how we define a function:

And then this is how we call a function. But I will try in a reversed order:

Guess which function is going to be called first?

Surprisingly, the one we called first, and as a result, we will see the output “Then add water”.

Sometimes, when we want to control which functions run when we might call them in a specific order, though this is not always enough. Let’s go through some examples of why it’s not always helpful to just control functions by calling them in a specific order.

Case 1

Let’s Define a function:

Let’s call a function in the desired order:

Why the first option is not always useful?

Because you will need to constantly call all the functions every time you need them and when you have a lot of functions it can get messy. You might end up with extra functions you don’t need or forget them eventually.

Case 2

Defining function:

Calling only search function:

Why second option is not always useful?

Because you will not be able to prevent the searchMovies function not to display the results, it will always run displayMovies function inside it.

Reasons to use a callback in this case

Instead of writing the function call manually or running the function when you don’t need it, you can use a callback function.
What you will do this way, is that the second function (the callback function) is not going to run until the first function is ready to return the result.
To be short, if you don’t run the first function, the second one will never run.

Defining function:

Calling only search function :

In the image above, the second argument displayMovies in the searchMovies function is a callback!

Note: when you pass a function as a callback no need to invoke it, simply pass the name of the function, no need for parenthesis.

When to use callbacks in JavaScript?

It’s important to understand what an asynchronous function is before you understand callbacks. There is a lot about asynchronous function however I will try to explain it as simply and as accurately as I can because right now you need just the basic understanding.

JavaScript has functions that are asynchronous – they do not run synchronously compared to other function which do. These functions might have to execute a code that takes a really long time and instead of stopping every single function, they work in the back and do not interrupt other function.

Let’s take a real-life example like McDonald’s (not a big fan of McDonald’s).
When you make an order of a meal you usually move on and wait for its preparation, right?
While you are waiting, other people also make their orders and you do not stop them from ordering. All the people in the queue are not going to wait until one orders and until their meal is ready. And definitely, no one is going to wait until one takes that order. It would take so much time to serve each customer, right?

Not a great example however I believe it is something similar to some extent when it comes to asynchronous functions in JavaScript. Your order preparation function will be asynchronous in this example. While people make orders or wait, the food preparation function is in the process of execution.

So once again, what will be the callback function in this case?

The callback function is called callback for a reason! The function tell you, “call me back!”.
Imagine that finally our asynchronous function of food preparation has finished its execution and is ready to give you a result. And you want to run another function before receiving this result, a callback function that will call your name and the order name!

But you don’t want someone to call your name only when your food is ready, right?

To achieve this, you are going to attach this “call my name” function to the food preparation. So when the food preparation function is finished it will run a callback function that calls your name!

To be short, a callback function is an argument of another function that is executed only when the first one is done executing.

There are a lot of other interesting things about callbacks but let’s stop here just for the basic understanding.

I hope this article helped you to start understanding callbacks and soon you will start using them yourself!