Callbacks function in JS

Hello, programmer. Welcome to my new blog post. This blog digs deeper into the callbacks function in javascript. But first, to understand the callbacks function, we must understand synchronous and asynchronous programming in Javascript.

Synchronous Programming

"Javascript is a synchronous single-threaded language." - MDN

This indicates that JavaScript executes lines of code sequentially, one line at a time. It functions like a queue, starting the subsequent task once the previous one is finished. Let's clarify with the help of the following example.

console.log("This is  first line.");
console.log("This is second line");
console.log("This is third liine");

//Output :
//This is  first line.
//This is second line
//This is third liine

In the above example, we can see that the second line is executed after the first line and the third line is executed after the second line. This is very easy to understand how the program works and its flow but what if a function takes a longer time to complete? In such circumstances, the program is stopped and the next line of code won't run and it will block the main thread. This will affect the user experience too.

Here, asynchronous programming came to the rescue.

Asynchronous Programming

Asynchronous programming allows code to run concurrently and without blocking the main thread. This means that multiple operations can be performed concurrently without causing the main thread to be blocked. Asynchronous programming is commonly used for tasks that take a long time to complete, such as HTTP requests, while the main thread is still running.

In JavaScript, callbacks are a popular way to handle asynchronous programming.

What is the callback function?

A callback function is passed as an argument to another function and is triggered after the main function has completed its execution. When the main function is called with a callback function as an argument, it calls the callback function to return a result.

A JavaScript callback function can be used in the following manner, as an example:

function doSomething(callback) {
  console.log("Performing task...");
  callback();
}
function callbackFunction() {
  console.log("Callback executed.");
}
doSomething(callbackFunction);

//OUTPUT : 
//Performing task...
//Callback executed.

The doSomething function accepts a callback function as an argument. The callback function is then called after the doSomething function has completed its task.

The callbackFunction in the above example is passed as an argument to the doSomething function. When the doSomething function is called, it logs a message to the console and then calls the callbackFunction.

Pros of callback function:

For asynchronous tasks like waiting for a server response, callbacks are frequently used. We can make sure that a function's code is only executed once the operation is finished by passing a callback function as an argument.
By allowing you to execute specific actions only after a previous action has finished, callback functions give a way to control the flow of our code.
In user interfaces, callbacks are frequently used for event handling. When a button is clicked, for example, we can perform a specific action by attaching a callback function to the event.

Cons of callback function:

Callback functions may result in callback hell, a situation in which there are many nested callbacks and code is challenging to read, debug, and maintain.
It can be difficult to handle errors when using callbacks. It can be difficult to return an error from the callback function to the calling function if one occurs.
Debugging callback functions can be difficult, especially when there are several nested callbacks.

Conclusion

In conclusion, callbacks are required for JavaScript asynchronous programming. They allow us to execute code after a particular process or event is finished. Callbacks make it easier to write more maintainable, modular code that is also easier to debug and troubleshoot.

Bijaylaxmi Behera's Blog