Day 22 of 30 of JavaScript
Tags: webdev, javascript, beginners, tutorial
Published: 2024-06-26 12:45:13

Hey reader👋 Hope you are doing well😊
In the last post we have talked about Asynchronous JavaScript. In this post we are going to discuss about Callbacks.
So let's get started🔥

## Callbacks in JavaScript

A callback is a function passed as an argument to another function, which gets invoked after the main function completes its execution. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6j7xrhukof7obzi0x1k.png)
We first define a `mainFunction` that takes a callback as an argument.The `mainFunction` uses `setTimeout` to simulate an asynchronous operation. The `setTimeout` function takes two arguments: a callback function and a delay time in milliseconds.The `setTimeout` function calls the callback function with the result of the operation after the specified delay time.
We then define a `callbackFunction` that logs the result of the operation. Finally, we call the `mainFunction` with the `callbackFunction` as its argument.

Callbacks are useful in Asynchronous Programming. These executes without blocking the code.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/plt39grmjw07lltocvod.png)
So here you can see that `setTimeout` is executing in background and the rest of the code is working alongside.
You can understand it in a way that when you load a website, images can take a while to load, especially if they’re large. If images were loaded synchronously, the website would freeze and wait for each image to load before continuing. With callbacks, you can load the images asynchronously, which means that the website continues to load while the images are being loaded in the background.

## Callback Hell

Now you know that callbacks are very important in Asynchronous Programming but these too have a disadvantage and i.e. Callback Hell.

> 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.
It is also known as "Pyramid of doom".
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ka1txtjx4de077i55eov.png)
Here `getUserData` takes a username that is dependent on the `article` list or needs to be extracted `getArticles` response which is inside the article. `getAddress` also has a similar dependency, which is dependent on the `getUserData's` response. This situation is called callback hell.
The deep nesting of callbacks make the code difficult to read and maintain.
To avoid callback hell, we can use a more modern way of handling async operations known as promises.As using promises the next task will get executed only when the previous one is executed.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1wcogyztmnraxqliogdq.png)
Here until the first task is not resolved the next will not be executed.

I hope you have understood callbacks and the problem with callbacks well. In the next blog we will see more about Promises and Async/Await. Till then stay connected and don't forget to follow me.
Thankyou 🩵