Callbacks in JavaScript
Callbacks in JavaScript are the most crucial and important part of Javascript and everyone should know about this concept deeply.
I am assuming that everyone is familiar with the definition of callbacks in Javascript. the definition is a callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action well this is good and let me visually tell you what are callbacks actually.
Example 1:-
function greeting(name) {
alert(`Hello, ${name}`);
}
function processUserInput(callback) {
const name = prompt("Please enter your name.");
callback(name);
}
processUserInput(greeting);
Here is a quick example which is mentioned in MDN docs
greeting function is initialized in the call stack and declared and takes a property of the name argument
and after that, another function name processUserInput has initialized in the call stack and declared with a property name callback.
like the definition says the function is passed into another function here in this example processUserInput function is taking the greeting function argument as a parameter and inside the function, processUserInput greeting function is called this is a basic example of a callback mentioned in MDN docs.
Let's take another example of taking callbacks to advance.
Example 2:-
This is a basic Javascript code what will the output of this code will be...?
I hope you guessed the right output. the output of the code will be Hello, My name is Ankit. Now you will be a having a question in your mind how is callback related to this code?
Before answering this let me change the code
Okay, here we go now guess the output for this code. I know it might be tricky for beginners to understand this code. The first code was synchronous in nature and this code is asynchronous. if you don't know about synchronous and asynchronous.
You can read MDN Docs or follow various content on YT and Google.
Okay, the output of the code will be undefined.
Why undefined because of its async nature setTimeout is a web API that gives Javascript the ability to perform an async task.
Now let us visually understand the above code
Here I have written a message function which has a setTimeout inside it which make this code async
Step 1:-
On line, 7 message function is declared and initialized in the call stack
Step 2:-
After that Javascript see setTimeout gives this function to web API to perform and after 0 milliseconds as I didn't give a second parameter to the setTimeout function web API will execute in 0 milliseconds and give this to the task Queue which is also known as callback queue
Step 3:-
Here message function execution is over and it will be removed from the call stack the event loop will see if the call stack is empty so that it will push the setTimeout function to the call stack which was executed by Web API.
now you would have understood why this code was giving us undefined. message function was already removed from the call stack as an undefined value until setTimeout come into the call stack.
Now let's fix this code with a callback.
Here, I just passed a CB parameter to the message function and passed the fix function as an argument to the message. Fix function takes a msg parameter which is called inside a setTimeout inside the message function which has a parameter of Hello, My name is ${name} .
Let's see step by step visually.
Step 1:-
message function is initialized in the call stack.
Step 2:-
Javascript gives setTimeout to web API to execute asynchronously. which is executed in 0 milliseconds and given to the task queue.
Step 3:-
the message function execution is over and removed from the call stack and now the event loop will see if their call stack is empty or not. if it is an empty event loop will push the setTimeout function which was in the task queue to call stack to execute by javascript.
Step 4:-
Now setTimeout is running in the call stack it has a CB function which we passed the fix function as an argument to message it will execute in the call stack.
Step 5:-
Now visualize the CB function as
function fix(msg) {
console.log(msg)
}
fix(`Hello, My name is Ankit`);
Hence we will see Hello, My name is Ankit as an output After the fix function completes executing it will remove from the call stack and setTimeout will also remove from the call stack.
By using callbacks we fixed the code.
I hope this blog makes sense and you understand what I was trying to explain about the callback. If you like reading this blog Like it shares it feels free to connect with me