Callback vs Promises in JavaScript
In JavaScript, many tasks take time to complete, such as API calls, reading files, or fetching database data. These are called asynchronous tasks. To manage them, JavaScript uses Callbacks and Promises. Both solve async problems, but promises provide a cleaner and more modern approach.
Why This Topic Matters
Callback and Promise are important JavaScript concepts. They are used in real projects and are also common in frontend interviews.
If you understand their difference, you will write cleaner async code and also understand why modern JavaScript prefers Promises and Async/Await.
1. What is a Callback?
Definition
A callback is a function that is passed as an argument to another function. It runs after the task is completed.
Simple Meaning
You tell a function: “First finish your work, then call this function.”
function fetchData(callback) {
setTimeout(() => {
callback("Data received");
}, 1000);
}
fetchData((data) => {
console.log(data);
});How it works
The fetchData() function waits for 1 second. After that,
it executes the callback function and passes the result.
Output
After 1 second, the console prints: Data received
2. Problem with Callbacks
Callbacks are fine for small tasks. But when multiple async operations depend on each other, the code becomes deeply nested and hard to understand.
loginUser(user, () => {
getProfile(() => {
getPosts(() => {
console.log("All done");
});
});
});What is Callback Hell?
This nested structure is called Callback Hell. It makes code difficult to read, debug, and maintain.
3. What is a Promise?
Definition
A Promise is an object that represents the future result of an asynchronous task. It gives either a success value or an error value later.
Simple Meaning
A promise says: “I will give you the result later — either success or failure.”
Promise States
Pending
The task is still running and the result is not ready yet.
Resolved
The task completed successfully and returned a value.
Rejected
The task failed and returned an error.
const fetchData = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Data received");
}, 1000);
});
fetchData
.then((data) => {
console.log(data);
})
.catch((error) => {
console.log(error);
});How it works
The promise waits for 1 second and then calls resolve().
The .then() block receives the success result.
If something fails, .catch() handles the error.
4. Promise Chaining
One big advantage of promises is that they allow multiple async tasks to be written in a cleaner sequence.
loginUser(user)
.then(() => getProfile())
.then(() => getPosts())
.then(() => console.log("All done"))
.catch((err) => console.log(err));Why it looks better
Each step is written one after another, so the flow is easier to understand.
Error handling
If any step fails, the .catch() block handles the error in one place.
5. Callback vs Promise
| Feature | Callback | Promise |
|---|---|---|
| Structure | Can become nested | Cleaner and chain-based |
| Readability | Hard in complex code | Easier to read |
| Error Handling | Handled manually | Handled with .catch() |
| Multiple Async Tasks | Messy with nesting | Better with chaining |
| Maintenance | Harder in big projects | Easier in big projects |
| Modern Usage | Less preferred | Widely used |
6. When to Use Which?
Use Callback
- For very small tasks
- When only one step happens after completion
- In older callback-based APIs
Use Promise
- For multiple async operations
- When better readability is needed
- When easier error handling is important
- As the base of async/await
7. Conclusion
Callbacks were one of the early ways to handle asynchronous code in JavaScript. They still work, but in complex situations they often create nested and hard-to-read code.
Promises solve this problem by making async code cleaner, more readable, and easier to manage. That is why modern JavaScript mostly prefers Promises and Async/Await.
Quick Summary
Callback is a function passed into another function to run later.
Promise is an object that represents a future success or failure result.
Callbacks can lead to Callback Hell.
Promises make async code cleaner and easier to maintain.