Callback Functions

Many JavaScript activities are asynchronous, which means they don't really stop the program (or a function) from running until they're finished, as you're probably used to, which is why we require callback functions. Instead, it will run in the background whilst the other code is being executed.

What is Callback Function?

It's a function that passed as an argument to another function. The callback function will be executed after the parent function has finished executing, and it will be executed inside the parent function. Check out the example below.

note

In JavaScript, functions are executed in the sequence they are called. Not in the sequence they are declared.

function greet(callback) {
  console.log("Hello");
  callback();
}

greet(() => {
  console.log("World");
});

In the above example, greet() is a function that takes a callback function as an argument. It executes the callback function after executing its own code. The callback function is executed inside the greet() function.

Fetching Data from an API using Callback

function getData(callback) {
  fetch("https://jsonplaceholder.typicode.com/todos/1")
    .then((response) => response.json())
    .then((data) => callback(data));
}

// Here passing a function as callback, which is logging data
getData((data) => {
  console.log(data);
});

In the above example, getData() is a function that takes a callback function as an argument. It executes the callback function after fetching the data from the API. The callback function receives the data as an argument and then it executes the code inside it to log the data.

You can also send callback functions like this.

function getData(callback) {
  fetch("https://jsonplaceholder.typicode.com/todos/1")
    .then((response) => response.json())
    .then((data) => callback(data));
}

function consoleData(data) {
  console.log(data);
}

// Here, first I defined the callback function consoleData() and then I passed it as an argument to getData().
getData(consoleData);

note

It is a common practice to name the callback function as callback or cb. You can name it anything you want.

Callback Hell

What if you have to make multiple API calls? You will have to nest the callback functions inside each other. This is called callback hell.

function getData(callback) {
  fetch("https://jsonplaceholder.typicode.com/todos/1")
    .then((response) => response.json())
    .then((data) => callback(data));
}

getData((data) => {
  console.log(data);
  getData((data) => {
    console.log(data);
    getData((data) => {
      console.log(data);
      getData((data) => {
        console.log(data);
        getData((data) => {
          console.log(data);
        });
      });
    });
  });
});

This is a very bad practice. It makes the code difficult to read and maintain. It is also called callback pyramid. If you have to make multiple API calls, you can use Promise or async/await to handle this. We will learn about them in the next chapters.

Conclusion

In this chapter, we learned about callback functions. We also learned about callback hell. We will learn about Promise and async/await in the next chapters.