Callbacks

A callback is a function passed as an argument to another function, which is executed later, usually after a task is completed.

In simple terms:

A callback is a function that runs after somthing finishes.

Why Callbacks are Needed

JavaScript is single-threaded and non-blocking.

This means:

It does not wait for long operations (like API calls, timers)

It continues executing other code

Callbacks help JavaScript handle asynchronous operations.

Example

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

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

greet("Nikhil", sayBye);

Output

Hello Nikhil
Goodbye!

Explanation

sayBye is passed as a callback

It executes after greeting

Functions can be passed just like variables

Callback with Asynchronous Task

setTimeout(function () {
    console.log("This runs after 2 seconds");
}, 2000);

Explanation

setTimeout takes a callback function

The callback runs after the delay

JavaScript continues executing other code meanwhile

Callback Flow (Step-by-Step)

Function is called

Task starts (sync or async)

Callback is registered

Callback executes when task finishes

Callback with Data

function calculate(a, b, callback) {
    let result = a + b;
    callback(result);
}

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

calculate(5, 3, display);

Output

Result: 8

Callback receives data

Makes code flexible

Real World Use Cases of Callbacks

1. Event Handling

button.addEventListener("click", function () {
    console.log("Button clicked");
});

2. API Calls (Old Style)

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

3. Timers

setInterval(() => {
    console.log("Running...");
}, 1000);

Callback Hell (Major Problem)

Example

setTimeout(() => {
    console.log("Step 1");

    setTimeout(() => {
        console.log("Step 2");

        setTimeout(() => {
            console.log("Step 3");
        }, 1000);

    }, 1000);

}, 1000);

Problems

Hard to read

Hard to debug

Difficult to maintain

This is called Callback Hell or Pyramid of Doom.

How Callback Hell is Solved

Promises

Async / Await

(Callbacks are still important to understand the foundation.)

Synchronous vs Asynchronous Callbacks

Synchronous Callback

[1, 2, 3].forEach(function (num) {
    console.log(num);
});

Executes immediately

Asynchronous Callback

setTimeout(() => {
    console.log("Async callback");
}, 1000);

Executes later

Advantages of Callbacks

Simple and lightweight

Core concept of JavaScript

Used heavily in events and async operations

Flexible function execution

Disadvantages of Callbacks

Can lead to callback hell

Harder error handling

Less readable for complex logic

When to Use Callbacks

Event handling

Simple async tasks

Timers

Array methods (map, filter, forEach)

Two Minute Drill

A callback is a function passed to another function
It runs after a task is completed
Used for asynchronous behavior
Can be synchronous or asynchronous
Callback hell happens with nested callbacks
Foundation for Promises and Async/Await

Practice Exercises Interview Questions Take Quiz

Need more clarification?

Drop us an email at career@quipoinfotech.com

Welcome to Quipoin

Quipoin Menu

Callbacks

Need more clarification?