What are callback functions and how are they used?

TL;DR

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. They are commonly used for asynchronous operations like handling events, making API calls, or reading files. For example:

function fetchData(callback) {
  setTimeout(() => {
    const data = { name: 'John Doe' };
    callback(data);
  }, 1000);
}

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

fetchData(handleData);

What are callback functions and how are they used?

Definition

A callback function is a function that is passed as an argument to another function and is executed after some operation has been completed. This allows other code to run in the meantime and prevents blocking.

Synchronous callbacks

Synchronous callbacks are executed immediately within the function they are passed to. They are often used for tasks that need to be completed before moving on to the next line of code.

function greet(name, callback) {
  console.log('Hello ' + name);
  callback();
}

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

greet('Alice', sayGoodbye);

Asynchronous callbacks

Asynchronous callbacks are used for operations that take some time to complete, such as reading files, making HTTP requests, or handling events. These callbacks are executed after the asynchronous operation has finished.

function fetchData(callback) {
  setTimeout(() => {
    const data = { name: 'John Doe' };
    callback(data);
  }, 1000);
}

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

fetchData(handleData);

Common use cases

Event handling

Callbacks are often used in event handling. For example, in JavaScript, you can pass a callback function to an event listener.

document.getElementById('myButton').addEventListener('click', function () {
  console.log('Button clicked!');
});

API calls

Callbacks are frequently used in making API calls to handle the response data.

function getUserData(userId, callback) {
  fetch(`https://api.example.com/users/${userId}`)
    .then((response) => response.json())
    .then((data) => callback(data))
    .catch((error) => console.error('Error:', error));
}

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

getUserData(1, displayUserData);

Timers

Callbacks are also used with timers like setTimeout and setInterval.

function sayHello() {
  console.log('Hello, world!');
}

setTimeout(sayHello, 2000);

What are callback functions and how are they used?

TL;DR