JavaScript callback functions are one of the most confusing concepts for beginners.
I’ll be honest.
When I first saw callback functions in JavaScript, I didn’t understand what was so special about them.
It looked like:
“Just a function inside another function.”
Why give a function as a parameter?
Why not just call it directly?
It didn’t make sense.
Until something broke.
And that’s when I finally understood.
Today I want to explain callbacks in the simplest way possible — so even a 5-year-old can understand it.
First, What Is a Callback?
A callback is simply:
"A function that is passed into another function and executed later."
That’s it.
Nothing scary.
Nothing magical.
Just one function asking another function to run at the right time.
Let Me Explain Like You’re 5 Years Old
Imagine this.
You tell your friend:
“Make cookies. When you finish, call me.”
You don’t wait there staring at them.
You go play.
After the cookies are ready, they call you.
That “call me when done” part?
That’s the callback.
Let’s Build Something Simple 🏗
Here’s a small example:
Output:
Hello Ebenezer
What happened here?
processUser takes a function as a parameter.
It calls that function.
greet runs.
Instead of calling greet("Ebenezer") directly, we passed it.
Why?
That’s where the real story begins.
Everything Works… Until It Breaks 💥
Now let’s try this:
Output:
`Eating cookies!
Cookies are ready!`
Wait… what? 😳
We’re eating cookies before they’re ready?
Yes.
And this is the exact moment I understood callbacks.
Why Did This Happen? ⏳
Because JavaScript does not wait.
When it sees setTimeout, it says:
“Okay, I’ll run this after 3 seconds. Let me continue the rest of the code.”
So eatCookies() runs immediately.
This is called asynchronous behavior.
And this is where callbacks shine.
Now Let’s Fix It Properly 🛠
function makeCookies(callback) {
setTimeout(function() {
console.log("Cookies are ready!");
callback();
}, 3000);
}
function eatCookies() {
console.log("Eating cookies!");
}
makeCookies(eatCookies);
Output:
Cookies are ready!
Eating cookies!
Now it works perfectly.
Why?
Because:
We passed eatCookies into makeCookies
After cookies are ready, makeCookies calls it
The order is now correct
That’s a callback solving a real problem.
A Slightly More Real Example 🌍
Let’s simulate fetching data:
function fetchData(callback) {
console.log("Fetching data...");
setTimeout(function() {
let user = {
name: "Ebenezer",
role: "Developer"
};
callback(user);
}, 2000);
}
function displayUser(user) {
console.log("Name:", user.name);
console.log("Role:", user.role);
}
fetchData(displayUser);
After 2 seconds:
Fetching data...
Name: Ebenezer
Role: Developer
Here, we didn’t know when the data would come.
So we said:
“When data is ready, call displayUser.”
That’s it.
Anonymous Callback Example ✨
You’ve already used callbacks without realizing it.
setTimeout(function() {
console.log("Hello after 2 seconds!");
}, 2000);
That function inside setTimeout?
That’s a callback.
One Important Thing I Learned 🔑
Callbacks work because:
JavaScript treats functions like values.
You can:
Store them in variables
Pass them as arguments
Return them from other functions
That’s called first-class functions.
And without that, callbacks wouldn’t exist.
So What Is a Callback Really? 🧩
After struggling, breaking my code, and fixing it again and again, this is how I finally understand callbacks.
A callback is simply a function that is given to another function so it can run later — usually after some task finishes.
It’s not complex. It’s not magic. It’s just a way of controlling timing in JavaScript.
Final Thoughts
The day I stopped seeing callbacks as just “syntax” and started seeing them as “call me when you’re done,” everything became clear.
JavaScript isn’t weird or confusing. It’s event-driven.
And callbacks are simply JavaScript’s way of handling real-world delays in a clean and practical way.


Top comments (0)