Demystifying Asynchronous JavaScript
In this blog, you will be able to understand what is asynchronous JavaScript.
What are Synchronous and Asynchronous JavaScript?
Suppose you and your friends are having a face-to-face conversation. This is the synchronous way of communicating as both of you are talking at the same time. Similarly, JavaScript is also very synchronous in nature i.e it can execute only one statement at a time. As JS code always runs from top to bottom.
console.log("Hello");
console.log("World");
Here first Hello will be executed then the only World will be executed. Similarly, in the Synchronous Programming world, only one statement can run at a time i.e Single-threaded language.
But imagine a scenario, where you need to get some data from the database or from the API. This action will take some time. So JS being a Synchronous language will wait for the completion of the task i.e until and unless we get our data the program will be stuck making blocking of code. (it blocks the next line of code from running until and unless it gets the data or the function is complete). This fetching will stall our program.
To solve this purpose we have Asynchronous JavaScript.
Asynchronous JavaScript is like a text message where we can reply to the message later. i.e start now and finish later. With the help of asynchronous JavaScript, we can perform tasks that take some time like requesting data from a database or from an API. The async code is non-blocking( as we pass some kind of callback function which runs and finishes later).
When we are using the async function, which means the browser takes that request and handles it outside of the scope of the single thread in another part of the browser. also takes a callback function with it so that it can execute it later on when the data comes back. Since this request is taken out of the thread and is running on different parts of the browser, JavaScript can carry on down the queue and run the remaining functions., all the while the database function is still going on.
What is a Callback function?
In simple words, any function that is sent as a function argument is called a callback function. It is invoked inside the outer function to do some tasks. This callback function can be synchronous or asynchronous. If it is a synchronous callback function then it will be executed immediately and if it is an asynchronous callback function then it will be executed when a promise is either fulfills or rejects. i.e An asynchronous callback is a callback that runs somewhere in the future.
The Callback is a function passed into another function
Why do they even exist
We have callbacks as they allow the browser to continue responding to user input instead of blocking and waiting until a function has finished executing.
What is a Promise?
Let's take a real-life scenario. Suppose the Government promises to give free money to its citizens after winning the next election 😲. There are 3 possible outcomes i.e either they will fulfill their promise (i.e you will get the money) or you are scammed i.e they reject their promise or we need to wait and see whether they fulfill their promise or not. i.e pending their promise.
Similarly in JavaScript, there are 3 states of promises i.e
1) Pending
2) Fulfilled
3) Rejected
But let us first understand what is a promise..
- A promise is nothing but a feature of JavaScript that helps us to schedule our work in the future and runs a callback based on the outcome of the promise(state of promise).
- When we create a promise, it will start in the pending state. When it has been completed successfully, then it becomes in the fulfilled state.
- When a function returns a promise, we can call .then(callback) on its result. The callback will be scheduled in the future when the promise completes successfully.
Therefore, promise lets us run a callback sometimes in the future when the promise has been completed successfully.
