Imagine you are working on a project and you write some request which takes time to load, So as per convention JavaScript should wait until the request is responded.
But here is a catch, while request is loading JavaScript interpreter will not sit idle it will jump to next line and start executing it.
Let's understand with an example, look at this code
// print 1
function one() {
console.log(1);
}
// print 2
function two() {
console.log(2);
}
// print 3
function three() {
console.log(3);
}
// delay by 2s
setTimeout(one, 2000);
// delay by 1s
setTimeout(two, 1000);
three();
/* output will be:-
3
2
1 */
you must be thinking that output should be in this order
1
2
3
But output is in different order, this is called Asynchronous JavaScript.
Asynchronous means not in sequential order, and this what exactly happened in above example.
But why JavaScript Behave like this ?
To Understand this, first we need to understand how a function is executed in JavaScript.
// print 1
function one() {
console.log(1);
}
// print 2
function two() {
console.log(2);
}
// print 3
function three() {
console.log(3);
}
one()
two()
threee()
/* output will be:-
1
2
3 */
Now through a diagram let's understand, how this code got executed.
Function Queue:- when a function is ready to execute it goes to function queue.
Execution Stack:- an execution stack is a stack that carries track of all the functions developed during the script life cycle, from function queue it goes to execution stack to get executed.
Now let's move to Asynchronous JavaScript.
Let's go back to first example that we have taken at the beginning.
- In that example, Something called Browser API came into the picture.
Browser API:- when a function or a request takes some time to load or retrieve information, for that time they stay in Browser API and when they are ready to execute, they are sent to function queue and then to execution stack.
- function one() waited for 2s
- function two() waited for 1s
- function three() was ready to execute
Both one() and two() were in Browser API till their respective waiting time was not over and as three() has no waiting, it directly goes to function queue and got executed.
On the other hand two() was in Browser API after 1s when it was ready to execute, it was sent to function queue, similar happened with one().
As one() and two() are in Browser API, three() is ready so it will get executed.
Now after 1s two() will be ready to execute, so two() will be executed
- After 2s three() will be ready and it will be executed.
In short
- As one() and two() will not be loaded instantly, they will be send to browser API.
- three() is ready so first three() will be executed.
- As waiting time one() and two() will be over they will be executed as per their waiting time .
This article will be followed by Callback functions and Promises.