Introduction
Hi Coders! As you know that we can pass an argument to a function, right? But Javascript also allows users to pass functions as an argument to some other function. This property of Javascript is known as ‘Callback’. Callback hell in Javascript occurs when multiple callbacks are nested inside each other, leads to create a complex and hard-to-manage code. Which makes it difficult to follow the flow of the program.
In this blog, we are going to learn all about Callback hell in Javascript with some examples. So let’s start learning!
What is Callback in Javascript?
The Callback in Javascript is a type of function that is passed as an argument to some other function. Every entity (array, string, function) is treated as an object in Javascript. Thus the user is able to pass functions as an argument.
Let us now see a simple example to understand the Callback function better.
- Javascript
Javascript
function printHello(){
console.log("Hello Ninjas!");
}
function printMessage(){
console.log("I'm a pro coder!")
}
function helper(callback){
// Calling the callback() function
callback();
}
// First call
helper(printHello);
// Second call
helper(printMessage);
Output
Explanation
Let’s now discuss the execution of the above example of Callback hell in Javascript.
-
First, the execution command goes to the helper function with printHello as a parameter.
-
This helper function calls the printHello function inside itself using Callback. After that, the ‘Hello Ninjas!’ message gets printed, and the execution command goes again to the helper function with printMessage as a parameter.
-
Now this time, the helper function calls the printMessage function inside it, and the second print statement gets printed.
From the above example, we can conclude that printHello() and printMessage() are Callback functions that are passed as an argument to the helper() function.
Synchronous Programming
In this programming method, the programmer can only perform a single task at a time. We cannot start another task until the first is completed. As the name itself suggest, synchronous means in sequence. This method of programming is also called blocking code, as one process needs to wait for the completion of another.
In the synchronous method, Callback is executed whenever the calling functions make a call to it. Let’s now see an example to understand Callback in the synchronous method.
- Javascript
Javascript
function print_message(){
console.log("Welcome to my blog viewers ")
}
function Caller_function(callback){
console.log("Before calling the callback function");
// Calling the callback() function
callback();
console.log("After calling the callback function")
}
// Making the call
Caller_function(print_message);
Output
Explanation
In the above example, initially, the execution command goes to the Caller_function, and the first print statement gets printed. Later, Callback() function gets executed, and we get our second print statement. This way, the program flow is in a sequence in the synchronous method.
Asynchronous Programming
In this method of programming, the users do not need to wait for the main thread to be completed. Instead, parallel processing is possible in the asynchronous method. Thus the user can execute a current task without worrying about the completion of the previous one. Due to this behaviour, an asynchronous method is called a non-blocking code.
Let us now understand this asynchronous way of programming with an example.
- Javascript
Javascript
function print_message(){
console.log("Welcome to my blog viewers ")
}
function Caller_function(callback){
console.log("Before calling the callback function");
// Calling the callback function in setTimeout
setTimeout(callback, 3000);
console.log("After calling the callback function")
}
// Making the call
Caller_function(print_message);
Output
Explanation
In the above example, we notice that our program didn’t wait for the Callback function to finish. Instead, it executed the next statements after the Callback, and parallelly the Callback function completed its execution. Here the setTimeout() method will halt the callback execution for exactly 3 seconds.
You can read more about the setTimeout() method here - setTimeout jQuery.
569+ registered 
