Callback Functions and Promises in JavaScript

Callback functions and promises are key concepts in asynchronous programming in JavaScript. Let’s delve deeper into each of them:

Callback Functions

Callback functions are functions passed as arguments to other functions. They are executed once a certain task is completed or an event occurs. Callbacks are commonly used in asynchronous operations to handle responses or results.

Example of Callbacks:

function fetchData(callback) {
  setTimeout(function() {
    callback('Data fetched');
  }, 1000);
}

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

fetchData(displayData); // Output after 1 second: 'Data fetched'

In the above example:

• fetchData is an asynchronous function that simulates fetching data after a delay.
• displayData is a callback function passed to fetchData, which is executed once the data is fetched.

Promises

Promises provide a more structured and flexible way to handle asynchronous operations and avoid callback hell. A promise represents the eventual completion (or failure) of an asynchronous task and allows chaining of multiple operations.

Creating a Promise:

function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('Data fetched');
    }, 1000);
  });
}

In the fetchData function:

• resolve is called when the asynchronous task is successful.
• reject is called when there’s an error or the task fails.

Using Promises:

fetchData()
  .then(function(result) {
    console.log(result); // Output after 1 second: 'Data fetched'
  })
  .catch(function(error) {
    console.error(error);
  });

In this example:

• .then() is used to handle the resolved value (success case).
• .catch() is used to handle errors or rejections.

Chaining Promises:

Promises allow chaining multiple asynchronous operations:

function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('Data fetched');
    }, 1000);
  });
}

function processData(data) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('Processed: ' + data);
    }, 1000);
  });
}

fetchData()
  .then(processData)
  .then(function(result) {
    console.log(result); // Output after 2 seconds: 'Processed: Data fetched'
  })
  .catch(function(error) {
    console.error(error);
  });

In this chaining example:

• fetchData fetches data.
• processData processes the fetched data.
• .then(processData) chains the processing step after fetching.

Comparison:

Callbacks:

• Pros: Simplicity, wide browser support.
• Cons: Callback hell, harder error handling.

Promises:

• Pros: Better structure, chaining, improved error handling.
• Cons: Requires modern JavaScript (ES6+), slightly more complex syntax.

Promises are generally preferred for handling asynchronous operations due to their cleaner syntax, error handling capabilities, and support for chaining multiple operations. However, both callbacks and promises are essential concepts in JavaScript’s asynchronous programming paradigm.