Day 22 of 30 of JavaScript

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.

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.

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".

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.

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 🩵

Comments

[Sandeep Sharma]

Does asynchronous in JavaScript means thing can run in parallel along side main thread?

[Akshat Sharma]

In JavaScript, "asynchronous" does not mean that things run in parallel in the same way that they do in multi-threaded programming. Instead, JavaScript is single-threaded and uses an event loop to handle asynchronous operations.

[Dmytro Shchehlov]

@sandeep6153
everything except of your code in JS works in parallel of your code )

JS has a single-thread runtime. To understand how it works, you need to dive deep into the Event Loop.

In two words it is very similar how nginx works.

In the example above -- everything will work in the same main thread, including blocking rendering in the browser during its running (not waiting).