Callback Function in JavaScript

A callback function is an important concept in JavaScript. It is commonly used when one function needs another function to be executed at a particular time.

The concept may sound difficult at first, but the basic idea is simple:

A callback is a function passed as an argument to another function.

Let's understand it step by step.

---

What is a Callback Function?

In JavaScript, functions can be passed as arguments to other functions.

When a function is passed to another function and the receiving function executes it, that function is called a callback function.

Example

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

    callback();
}

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

greet("Abishek", sayBye);

Output

Hello Abishek
Goodbye!

Here, sayBye is passed to the greet() function.

greet("Abishek", sayBye);

Inside the greet() function, the callback is executed using:

callback();

This calls the sayBye() function.

Flow

greet()
   ↓
Print "Hello Abishek"
   ↓
callback()
   ↓
sayBye()
   ↓
Print "Goodbye!"

So, sayBye is called a callback function because it is passed to another function.

---

Why Do We Use Callback Functions?

Callbacks are mainly used when we want to tell a function what to do after or during an operation.

Consider this example:

function processTask(callback) {
    console.log("Task completed");

    callback();
}

function showMessage() {
    console.log("Task completed successfully!");
}

processTask(showMessage);

Output

Task completed
Task completed successfully!

Here, processTask() performs its work first.

After that, it calls the callback:

callback();

The benefit is that we can pass different functions depending on what we want to happen next.

For example:

function celebrate() {
    console.log("Let's celebrate!");
}

processTask(celebrate);

Now the output is:

Task completed
Let's celebrate!

The same processTask() function can perform different actions based on the callback we pass.

Therefore, callbacks make functions more flexible and reusable.

---

How Does a Callback Work?

A callback can be understood using three simple steps.

Step 1: Create a function

function sayHello() {
    console.log("Hello!");
}

Step 2: Create another function that accepts a callback

function execute(callback) {
    callback();
}

Here, callback is a parameter that will receive a function.

Step 3: Pass the function

execute(sayHello);

Now sayHello is passed to execute().

Inside execute():

callback();

executes the sayHello() function.

Flow

sayHello()
    ↓
Passed to execute()
    ↓
Received as callback
    ↓
callback()
    ↓
sayHello() executes

---

Callback vs callback()

It is important to understand the difference between callback and callback().

callback

execute(sayHello);

Here, sayHello means:

"Pass this function."

callback()

callback();

Here, callback() means:

"Execute the function."

So:

callback
→ refers to the function

callback()
→ executes the function

This is why we usually write:

execute(sayHello);

instead of:

execute(sayHello());

Conclusion

A callback is a function passed to another function and called when needed. It helps make JavaScript code more flexible and reusable.