JavaScript JS Tutorial JS Objects JS Functions JS Classes JS Async JS HTML DOM JS Browser BOM JS Web APIs JS AJAX JS JSON JS vs jQuery JS Graphics



JS Callbacks

JavaScript (JS) is a popular programming language used for creating interactive web pages. One of the key features of JS is its ability to handle asynchronous operations. Asynchronous operations are those that do not block the execution of the program while waiting for a response. JS Callbacks are a way to handle asynchronous operations in JS.

A callback is a function that is passed as an argument to another function and is executed after the completion of the first function. Callbacks are used to handle asynchronous operations such as fetching data from a server, reading a file, or waiting for user input. Callbacks are essential in JS because they allow the program to continue executing while waiting for a response from an asynchronous operation.

Here is an example of a simple callback function:


function myCallbackFunction() {
  console.log("Callback function executed");
}

function myFunction(callback) {
  console.log("Function executed");
  callback();
}

myFunction(myCallbackFunction);

In this example, we have defined two functions: myCallbackFunction and myFunction. The myFunction function takes a callback function as an argument and executes it after printing "Function executed" to the console. We pass the myCallbackFunction function as an argument to myFunction and it is executed after "Function executed" is printed to the console.

Callbacks can also be used to handle errors in asynchronous operations. Here is an example:


function myCallbackFunction(error, data) {
  if (error) {
    console.log("Error occurred: " + error);
  } else {
    console.log("Data received: " + data);
  }
}

function fetchData(callback) {
  setTimeout(function() {
    var error = null;
    var data = "Some data";
    callback(error, data);
  }, 2000);
}

fetchData(myCallbackFunction);

In this example, we have defined a fetchData function that simulates fetching data from a server using the setTimeout function. The fetchData function takes a callback function as an argument and executes it after 2 seconds. The callback function takes two arguments: error and data. If an error occurs during the fetch operation, the error argument will be non-null. Otherwise, the data argument will contain the fetched data.

Callbacks can also be used to handle user input. Here is an example:


function myCallbackFunction(event) {
  console.log("User clicked button");
}

var button = document.getElementById("myButton");
button.addEventListener("click", myCallbackFunction);

In this example, we have defined a myCallbackFunction function that is executed when the user clicks a button on the web page. We use the addEventListener method to attach the myCallbackFunction function to the button's click event.

Callbacks are an essential part of JS programming. They allow us to handle asynchronous operations and user input in a non-blocking way. By using callbacks, we can write more efficient and responsive programs.

References

Activity