👉 A function that is passed as an argument to another function.
♦️ JavaScript runs code sequentially in top-down order. However, there are some cases where code runs (or must run) after something else happens and not sequentially. This is called asynchronous programming.
♦️ Callbacks help you control the order of execution. It makes sure that a function is not going to run before a task is completed, but will run right after the task has completed. It helps us develop asynchronous JavaScript code and keeps us safe from problems and errors.
JavaScript
function greetUser(name, callback) {
console.log("Hi " + name);
callback();
}
function sayBye() {
console.log("Bye!");
}
greetUser("Rahul", sayBye);
JavaScript
setTimeout(function() {
console.log("This message is shown after 3 seconds");
}, 3000);
JavaScript
setTimeout(() => {
console.log("This message is shown after 3 seconds");
}, 3000);
All 3 will do the same job.
👉 Callback helps in executing code only after a following response.
Here, the function will wait for 3 seconds to print, allowing us to control execution according to our need:
JavaScript
const printMeAfter3sec = () => {
console.log("hello");
}
setTimeout(printMeAfter3sec, 3000);
JavaScript
console.log("Loading...")
function fetchDataCallback(callback) {
console.log("Fetching data...")
setTimeout(() => {
const data = { id: 1, name: "John Doe" } // Simulating fetched data
callback(data) // Call the callback with the data after fetching
}, 2000) // Simulate a 2-second delay
}
// Using the function with a callback
fetchDataCallback((result) => {
console.log("Data fetched:", result)
})
console.log("End...")
When JavaScript starts executing this code, it first creates a Global Execution Context. This includes all the variables, function declarations, and any code that needs to run at the top level. The function fetchDataCallback is defined and stored in memory (it isn't executed yet).
JavaScript
fetchDataCallback((result) => {
console.log('Data fetched:', result);
});
fetchDataCallback is invoked with a callback function passed as an argument. A new execution context is created for this function call, where the callback parameter is assigned the anonymous function (result) => { console.log('Data fetched:', result); }.
Inside fetchDataCallback, the first statement is:
JavaScript
console.log('Fetching data...');
This is a synchronous operation, so it immediately logs "Fetching data..." to the console.
Next, we encounter:
JavaScript
setTimeout(() => {
const data = { id: 1, name: 'John Doe' };
callback(data);
}, 2000);
setTimeout is a Web API provided by the browser (or Node.js). It takes two arguments:
When JavaScript encounters setTimeout, it offloads this task to the Web API environment.
Important: The Web API handles the timer in the background while the main JavaScript thread continues executing other code.
After setTimeout is sent to the Web API, the synchronous code inside fetchDataCallback finishes execution. At this point, the JavaScript call stack is empty.
While the main thread is free, the Web API timer runs in the background for 2 seconds (2000ms). After 2 seconds, the timer expires, and the callback function inside setTimeout is sent to the task queue.
The event loop continuously monitors the call stack and the task queue. Once the call stack is empty, the event loop pushes tasks from the task queue to the call stack.
After 2 seconds, the event loop pushes the callback function inside setTimeout to the call stack:
JavaScript
() => {
const data = { id: 1, name: 'John Doe' };
callback(data);
}
Inside this function:
Now, (result) => { console.log('Data fetched:', result); } is called with data as result.
A new execution context is created for this callback, logging:
Data fetched: { id: 1, name: 'John Doe' }.
The Web API (setTimeout) is responsible for the timer. The event loop ensures that after the timer expires, the callback is executed asynchronously once the call stack is clear. Callbacks allow us to handle asynchronous operations where some tasks (like waiting for data) are handled outside of the JavaScript execution engine.
In the code below, the output of message returns undefined:
JavaScript
console.log("hello");
function asyncMe(name) {
setTimeout(function () {
return `${name}`;
}, 1000);
}
const message = asyncMe("himanshu");
console.log(message);
console.log("bye");
Reason: The message output is undefined because asyncMe() is an asynchronous function, meaning the timer callback executes later, after the synchronous return has already resolved to undefined.
Define a function inside a parameter (i.e., callback) and pass it inside setTimeout():
JavaScript
console.log("hello");
function asyncMe(name, callback) {
setTimeout(function () {
const message = `print to ${name}`;
callback(message); // Call the callback function with the message
}, 1000);
}
asyncMe("himanshu", function(message) {
console.log(message); // Executed after the timeout
});
console.log("bye");
JavaScript
function getUserData(id) {
setTimeout(() => {
if (!id) {
throw new Error("User ID is required!");
}
return { id, name: "John Doe" }; // This return won't work properly in async code
}, 1000);
}
const user = getUserData(1);
console.log(user); // This will be undefined
JavaScript
function getUserData(id, callback) {
setTimeout(() => {
if (!id) {
return callback(new Error("User ID is required!"), null);
}
const user = { id, name: "John Doe" };
callback(null, user);
}, 1000);
}
// Using the function with a callback
getUserData(1, (error, user) => {
if (error) {
console.error("Error:", error.message);
} else {
console.log("User Data:", user);
}
});
// Testing the error case
getUserData(null, (error, user) => {
if (error) {
console.error("Error:", error.message);
} else {
console.log("User Data:", user);
}
});
HTML
<!-- HTML -->
<button id="callback-btn">Click here</button>
JavaScript
// JavaScript
document.querySelector("#callback-btn")
.addEventListener("click", function() {
console.log("User has clicked on the button!");
});
The first parameter is its type ("click"), and the second parameter is a callback function which logs the message when the button is clicked.
For example, creating a polyfill for forEach:
JavaScript
let arr = [2, 4, 5, 3, 5];
const myForEach = (arr, cb) => {
for (let i = 0; i < arr.length; i++) {
const element = arr[i];
cb(element);
}
};
myForEach(arr, (name) => console.log(name));
🏠 Homework: Try creating polyfills for map, filter, and reduce.
Advertisement