Language: EN
LuisLlamas Logo
Search
⏲️ ~ 3 minutes Intermediate
javascript-callbacks

Callbacks in JavaScript

In JavaScript, one of the most common ways to implement asynchronous programming is through the use of callbacks.

A callback is a function that is passed as an argument to another function and is executed after the latter completes its task.

The basic idea of a callback function is that it is “called back” once a task is performed.

A common example of using callbacks in JavaScript is event handling. For instance, when a button is clicked on a web page, a callback function can be passed as an argument to the addEventListener() function to execute when the button is clicked.

It doesn’t matter if the callback function is an anonymous function, a declared function, or an expressed function; as long as it is passed as an argument and executed afterward, it is a callback.

How Callbacks Work

  1. Defining a Callback Function.
    A callback function is defined as any function that can be passed as an argument to another function.
  2. Passing the callback as an argument.
    The callback is passed as an argument to the main function. This main function will execute the callback at the appropriate time.
  3. Executing the Callback.
    Once the main function completes its primary task, it invokes the callback.

Let’s see it with a simple example.

function greeting(name, callback) {
  console.log(`Hello, ${name}!`);
  callback(); // Calling the callback function
}

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

greeting('Luis', farewell);
// Output:
// Hello, Luis!
// Goodbye!

In this example,

  • farewell is a callback function
  • farewell is passed as a parameter to the main function greeting
  • greeting executes farewell after it has finished its execution.

Using Callbacks in Asynchronous Operations

Callbacks are used to perform asynchronous operations. Unlike synchronous operations, which are executed in sequence, asynchronous operations allow the program to continue running while waiting for an operation to complete.

To see this asynchronous behavior, let’s look at an example using the setTimeout function.

console.log('Start');

setTimeout(() => {
  console.log('Asynchronous Task Completed');
}, 2000);

console.log('End');

In this example,

  • setTimeout takes a callback function (in this case, a lambda)
  • The lambda function will execute after a delay of 2000 milliseconds.
  • The result is that End is printed before Asynchronous Task Completed.

Using Callbacks to Handle Errors

One of the advantages of callbacks in JavaScript is that they can be used to handle errors.

It is common to follow the error-first pattern, where the first argument of the callback is the error and the second argument is the result.

If an asynchronous task fails, an error callback can be called to handle the situation.

function myCallback() {
  console.log('The task has completed');
}

function myErrorCallback() {
  console.error('The task has failed');
}

function myFunction(callback, callbackError) {
  setTimeout(function() {
    if (Math.random() < 0.5) {
      callback();
    } else {
      callbackError();
    }
  }, 3000);
}

myFunction(myCallback, myErrorCallback);

In this example,

  • myFunction() accepts two callbacks as arguments
  • myCallback() for the success case and myErrorCallback() for the error case.
  • If the task succeeds, myCallback() is called, and if it fails, myErrorCallback() is called.

Callback Hell

Callback hell (or pyramid of doom) occurs when we have many nested callbacks. For example,

doSomething(function(result1) {
  doSomethingElse(result1, function(result2) {
    doAnotherThing(result2, function(result3) {
      // More code here
    });
  });
});

As we have more and more callbacks, it becomes increasingly messy. In the end, the code can become very difficult to read and maintain.

For more complex operations consider using promises and async/await. These techniques offer a cleaner and more manageable way to work with asynchronous code.

On this page