Callbacks are a fundamental concept in JavaScript and are commonly used in asynchronous programming. In this article, we'll explore what callbacks are, why they were the main approach to async operations when async/await didn't exist in JavaScript, why they are not much used in modern projects, but it is important to understand the concept to work on legacy projects. We'll also give an example of a use case in modern JavaScript with the React Query mutation.

What are callbacks?

A callback is simply a function that is passed as an argument to another function, thats it. The function that receives the callback is responsible for calling it when the appropriate time comes.

For example, consider the following code snippet:

function greet(name, callback) {
  console.log(`Hello, ${name}!`);
  callback();
}

function sayGoodbye() {
  console.log("Goodbye!");
}

greet("Alice", sayGoodbye);

In this example, the greet function takes a name argument and a callback argument. It logs a greeting to the console with the name, and then calls the callback function. The sayGoodbye function is passed as the callback argument and logs "Goodbye!" to the console.

When we run this code, it outputs:

Hello, Alice!
Goodbye!

Here, the sayGoodbye function is executed as a callback to the greet function.

Why callbacks were the main approach to async operations when async/await didn't exist in JavaScript

Before the introduction of Promises and async/await in modern JavaScript, callbacks were the main approach to handling asynchronous operations. This is because JavaScript is a single-threaded language, and blocking operations could cause the entire program to freeze, making it unresponsive.

Callbacks allowed developers to execute asynchronous operations without blocking the main thread. For example, if you needed to make an AJAX request to a server and perform some operation on the result, you could pass a callback function to the XMLHttpRequest object's onreadystatechange event, which would be executed when the response was received.

// Don't be scared, this is legacy 
// code using the XMLHttpRequest API to make an HTTP request

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data.json');

// Set up a callback function to be 
// called when the request is complete
xhr.onreadystatechange = function() {
    const data = JSON.parse(xhr.responseText);

    // Do something with the 
    // JSON data (e.g. log it to the console)
    console.log(data);
};

// Effectively call the HTTP request
xhr.send();

Understanding Callback Hell in JavaScript

One of the main problems with callbacks in JavaScript is that they can lead to code that is difficult to read and maintain, especially when dealing with multiple nested callbacks. This phenomenon is commonly referred to as "callback hell".

Callback hell occurs when you have several asynchronous operations that depend on each other and need to be executed in a specific order. As a result, you end up with deeply nested functions that are difficult to read and debug.

Here's a simple example of callback hell:

setTimeout(function() {
  console.log('First operation completed');

  setTimeout(function() {
    console.log('Second operation completed');

    setTimeout(function() {
      console.log('Third operation completed');
    }, 1000);
  }, 1000);
}, 1000);

In this example, we have three asynchronous operations that need to be executed in a specific order. To achieve this, we've nested three setTimeout functions inside each other. As you can see, the code quickly becomes hard to read and understand.

The solution

One way to solve callback hell is to use Promises, which provide a more structured way to handle asynchronous code. With Promises, you can chain together multiple asynchronous operations and handle errors in a more elegant way. Here's the same example using async/await:

function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function runOperations() {
  await wait(1000);
  console.log('First operation completed');

  await wait(1000);
  console.log('Second operation completed');

  await wait(1000);
  console.log('Third operation completed');
}

runOperations();

In this example, the wait function returns a Promise that resolves after a certain number of milliseconds. We use this function with the async/await syntax to execute the asynchronous operations in sequence. As you can see, the code is much cleaner and easier to understand compared to the nested callback approach.

Why it is not much used in modern projects, but it is important to understand the concept to work on legacy projects

In modern JavaScript, Promises and async/await have largely replaced callbacks as the preferred way of handling asynchronous operations. Promises provide a more structured way to handle asynchronous code and make it easier to avoid callback hell, a situation where callback functions are nested inside each other, making the code difficult to read and maintain.

Async/await syntax provides a more concise and readable way to write asynchronous code, and it can be easier to handle errors and control the flow of execution. However, understanding callbacks is still important because you may encounter them in some situations, especially when working on legacy codebases or integrating with third-party libraries that use callback-style APIs. Additionally, callbacks are still commonly used in non-async code such as some array methods, where they provide a simple and flexible way to customize the behavior of the method.

Here is an example:

const numbers = [1, 2, 3];

const evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0;
});

console.log(evenNumbers); // [2]

Modern Usage of Callbacks

Callbacks are still a relevant concept, even in modern programming practices. They can be particularly useful when working with libraries or frameworks that use callback-based APIs.