Page Title

Understand Callback in JavaScript

A callback is a function that is passed as an argument to another function and is executed after the outer function has completed. This is a way for a function to specify some code that should be run after it has finished executing.

An example of a callback in action is the

setTimeout()

function, which takes a callback as an argument and runs it after a specified delay. Here's an example of how setTimeout() can be used with a callback:


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

setTimeout(greet, 1000); // This will log 'Hello, world!' to the console after a 1 second delay

Tap to try

Callbacks are often used in JavaScript to perform an action after an asynchronous operation has completed. Asynchrony is important in JavaScript because it allows the program to continue running while waiting for a long-running operation to complete. For example, when reading a file from the filesystem, the program can't simply halt until the file has been read. Instead, it can pass a callback to a function that reads the file, which will be executed once the file has been read.

Callbacks can also be used to handle errors that may occur during an asynchronous operation. For example, consider the following code that uses the fs.readFile() function to read a file from the filesystem:


const fs = require('fs');

fs.readFile('file.txt', 'utf8', function(err, data) {
  if (err) {
    console.error("Bug found, " + err);
    return;
  }
  console.log(data);
});

Tap to try

In this example, the callback function is passed an err argument, which will be set to an error object if an error occurs while reading the file. If an error occurs, the callback function logs the error and returns. If no error occurs, the callback function logs the data that was read from the file.

To practice using callbacks, you could try writing a function that takes a callback and uses it to log a message after a delay. Here's an example of how you might do this:


function logAfterDelay(message, delay) {
  setTimeout(function() {
    console.log(message);
  }, delay);
}

logAfterDelay('Hello, world!', 1000); // This will log 'Hello, world!' to the console after a 1 second delay

Tap to try

You could also try writing a function that uses a callback to handle an error that may occur while performing an asynchronous operation. For example, you could modify the fs.readFile() example from earlier to pass a custom error-handling callback:


const fs = require('fs');

function readFileWithErrorHandler(filename, errorHandler) {
  fs.readFile(filename, 'utf8', function(err, data) {
    if (err) {
      errorHandler(err);
      return;
    }
    console.log(data);
  });
}

readFileWithErrorHandler('file.txt', function(err) {
  console.error("Custom error:" + err);
});

Tap to try