learn2kode.in

Menu

JavaScript Tutorial

Menu

Callback functions in javascript

A callback is a function passed as an argument to another function, which is then executed later—usually after a task is completed.
Callbacks are commonly used for:
  • Handling asynchronous operations
  • Executing code after an action
  • Working with events, timers, and APIs
Call this function back when the work is done.

Why Are Callbacks Important?

JavaScript is single-threaded, meaning it can do only one thing at a time. Callbacks help JavaScript:

  • Perform non-blocking operations
  • Handle delays (timers)
  • Manage API responses
  • Respond to user interactions
Without callbacks, JavaScript would freeze while waiting for tasks to complete.

Basic Callback Example

Copy Text 
function greet(name, callback) {
  console.log("Hello " + name);
  callback();
}

function sayBye() {
  console.log("Goodbye!");
}

greet("Alex", sayBye);
Output
Copy Text 
Hello Alex
Goodbye!
  • Here, sayBye is a callback function passed to greet.

Callback with Parameters

Copy Text 
function calculate(a, b, callback) {
  const result = a + b;
  callback(result);
}

function display(result) {
  console.log("Result:", result);
}

calculate(5, 10, display);
Output
Copy Text 
Result: 15

Callbacks in Asynchronous JavaScript

Example: setTimeout
Copy Text 
setTimeout(function () {
  console.log("This runs after 2 seconds");
}, 2000);
  • The function runs after the delay, not immediately.

Callbacks with Events

Copy Text 
document.getElementById("btn").addEventListener("click", function () {
  alert("Button clicked!");
});
  • The function runs only when the user clicks the button.

Callback Example with API Simulation

Copy Text 
function fetchData(callback) {
  setTimeout(() => {
    callback("Data loaded successfully");
  }, 1500);
}

fetchData(function (message) {
  console.log(message);
});
Output
Copy Text 
Data loaded successfully

Callback Hell (Pyramid of Doom)

When callbacks are nested too deeply, the code becomes hard to read and maintain.
Copy Text 
setTimeout(() => {
  console.log("Step 1");
  setTimeout(() => {
    console.log("Step 2");
    setTimeout(() => {
      console.log("Step 3");
    }, 1000);
  }, 1000);
}, 1000);
This is called Callback Hell.

Problems with Callbacks

  • Difficult to read when nested
  • Harder error handling
  • Required knowledge for React, Node.js, and frameworks
This is why Promises and async/await were introduced.

Callbacks vs Promises

Feature Callbacks Promises / Async
Readability Low (nested) High
Error handling Complex Simple (catch)
Modern usage Limited Preferred
Control flow Hard Clean

When Should You Use Callbacks?

  • Simple tasks
  • Event handling
  • Timers
  • Small async operations
Avoid for complex async flows (use Promises instead)

Real-World Use Cases of Callbacks

  • Button click handlers
  • Form submission handling
  • Timers (setTimeout, setInterval)
  • Reading files (Node.js)
  • API request handling (older code)

Key Takeaways

  • A callback is a function passed into another function
  • Callbacks enable asynchronous programming
  • Overusing callbacks can cause callback hell
  • Modern JavaScript prefers Promises and async/await
ES6 Features
Promises