Callbacks.md

Callbacks in JavaScript with ES6+

Table of Contents

1. Introduction to Callbacks
2. Types of Callbacks
   • Synchronous Callbacks
   • Asynchronous Callbacks
3. Callback Hell
4. ES6+ Improvements
   • Arrow Functions
   • Promises
   • Async/Await
5. Examples
   • Basic Callback Example
   • Handling Asynchronous Operations
   • Using Promises
   • Using Async/Await

Introduction to Callbacks

Callbacks are functions passed as arguments to other functions and are executed after some operation has been completed. They are a fundamental concept in JavaScript, especially for handling asynchronous operations.

Types of Callbacks

Synchronous Callbacks

Synchronous callbacks are executed immediately and block the execution of the program until they are completed.

function greet(name, callback) {
  console.log(`Hello, ${name}!`);
  callback();
}

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

greet('Alice', sayGoodbye);
// Output:
// Hello, Alice!
// Goodbye!

Asynchronous Callbacks

Asynchronous callbacks are executed after some asynchronous operation has completed, such as reading a file, making an HTTP request, or handling a timer.

javascript function greet(name, callback) { console.log(Hello, ${name}!); callback(); }

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

greet('Alice', sayGoodbye); // Output: // Hello, Alice! // Goodbye!

Callback Hell

Callback hell, also known as the pyramid of doom, occurs when multiple nested callbacks make the code difficult to read and maintain.

asyncOperation1(function(result1) {
  asyncOperation2(result1, function(result2) {
    asyncOperation3(result2, function(result3) {
      console.log(result3);
    });
  });
});

ES6+ Improvements

Arrow Functions

Arrow functions provide a more concise syntax for writing callbacks.

setTimeout(() => {
  console.log('This message is delayed by 2 seconds.');
}, 2000);

Promises

Promises provide a cleaner way to handle asynchronous operations and avoid callback hell.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise resolved!');
  }, 2000);
});

promise.then(result => {
  console.log(result);
});

Async/Await

Async/await is syntactic sugar built on top of promises, making asynchronous code look more like synchronous code.

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
}

fetchData();

Examples

Basic Callback Example

function greet(name, callback) {
  console.log(`Hello, ${name}!`);
  callback();
}

greet('Alice', () => {
  console.log('Goodbye!');
});
// Output:
// Hello, Alice!
// Goodbye!

Handling Asynchronous Operations

function fetchData(callback) {
  setTimeout(() => {
    callback('Data fetched!');
  }, 2000);
}

fetchData(result => {
  console.log(result);
});
// Output after 2 seconds:
// Data fetched!

Using Promises

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched!');
    }, 2000);
  });
};

fetchData().then(result => {
  console.log(result);
});
// Output after 2 seconds:
// Data fetched!

Using Async/Await

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched!');
    }, 2000);
  });
};

async function getData() {
  const result = await fetchData();
  console.log(result);
}

getData();
// Output after 2 seconds:
// Data fetched!

Tip

Use arrow functions for concise callback syntax. Leverage promises and async/await to avoid callback hell. Always consider the readability and maintainability of your code when using callbacks.

[EOF]