๐ Asynchronous Javascript:
๐ค How does Asynchronous Javascript even work?
{A 16 tweets' thread }
๐ค How does Asynchronous Javascript even work?
{A 16 tweets' thread }
๐ Javascript is a single threaded language.
๐ It can only do one thing at a time.
๐ค But web requires it to to multiple things at a time.
โ๏ธ Ex- Page should be responsive while API is fetching data in background.
๐ It can only do one thing at a time.
๐ค But web requires it to to multiple things at a time.
โ๏ธ Ex- Page should be responsive while API is fetching data in background.
โ But Javascript can't handle both the background task as well as keeping the page responsive at the same time.
๐ก Remember, it is a single-threaded language.
โ It can only do ONE task at a time.
๐ก Remember, it is a single-threaded language.
โ It can only do ONE task at a time.
๐ This mismatch of our requirements and what Javascript can do gave rise to web APIs.
๐ค They are sort of mini helpers of Javascript that handle async (background tasks) while Javascript does its 'one' task.
๐ค They are sort of mini helpers of Javascript that handle async (background tasks) while Javascript does its 'one' task.
โ Web APIs aren't provided natively in Javascript language.
๐ But because Javascript we use runs in a special environment (our browsers), it gets access to the web APIs.
๐บ I.E., browsers provide Javascript the ability to handle async tasks through web APIs.
๐ But because Javascript we use runs in a special environment (our browsers), it gets access to the web APIs.
๐บ I.E., browsers provide Javascript the ability to handle async tasks through web APIs.
๐ I've covered why we need asynchronicity in Javascript as web developers here:
๐ I've also explained how Javascript manages to have asynchronous functionality while being a synchronous language here:
โ
I'm assuming you've read both of the above-linked threads because in this thread I'll be relying on information from both of those and focusing specifically on how this handling of async tasks to web APIs work. In detail.
๐ Execution context
๐ผ๏ธ Notice the attached image.
๐ It is the technical landscape of the browser's environment.
๐ญ It has three main parts:
1๏ธโฃ Javascript's call stack,
2๏ธโฃ Web APIs, and
3๏ธโฃ Job queue
๐ฌ Let's look at each one of them, in detail, below.
๐ผ๏ธ Notice the attached image.
๐ It is the technical landscape of the browser's environment.
๐ญ It has three main parts:
1๏ธโฃ Javascript's call stack,
2๏ธโฃ Web APIs, and
3๏ธโฃ Job queue
๐ฌ Let's look at each one of them, in detail, below.
๐ Call stack:
โ๏ธ The Stack is a Last In First Out data structure (LIFO).
โฌ ๏ธ Meaning data that enters last is the first one to leave.
๐ Think of a stack of books. The book that was placed at the end (top) is the first to get picked up.
๐ It helps JS do its 'one' thing
โ๏ธ The Stack is a Last In First Out data structure (LIFO).
โฌ ๏ธ Meaning data that enters last is the first one to leave.
๐ Think of a stack of books. The book that was placed at the end (top) is the first to get picked up.
๐ It helps JS do its 'one' thing
๐ Queue:
โก๏ธ A queue is a First In First Out data structure (FIFO).
๐ก Meaning data that enters first leaves first.
๐คญ I think you've been in enough queues to know that the first one in is the first one out!
โก๏ธ A queue is a First In First Out data structure (FIFO).
๐ก Meaning data that enters first leaves first.
๐คญ I think you've been in enough queues to know that the first one in is the first one out!
๐ง Now the meaty part:
โ๏ธ In our browsers, Javascript runs inside a Javascript engine.
๐ For Chrome, it is the V8 engine.
โ This engine isn't a compiler because it has more things like memory management, garbage collection etc.
โ๏ธ In our browsers, Javascript runs inside a Javascript engine.
๐ For Chrome, it is the V8 engine.
โ This engine isn't a compiler because it has more things like memory management, garbage collection etc.
๐ก๏ธ Now, when the JS call stack encounters an async task(async function at the top of JS stack), it shifts it to the Web API (async function popped off from stack).
โก Now, JS stack is free to do more execution (keeping the page responsive).
โก Now, JS stack is free to do more execution (keeping the page responsive).
๐ค Meanwhile the Web APIs performs the task and pushes the result on to the job queue.
๐ค The job queue holds the result (and further results from more async requests keep lining up in the queue)
๐ค The job queue holds the result (and further results from more async requests keep lining up in the queue)
๐ The Event loop keeps checking if the call stack of JS has become empty or not.
๐ If it is, it takes one result (whatever entered the job queue first, since queue is FIFO) and pushes it to JS stack.
๐ If it is, it takes one result (whatever entered the job queue first, since queue is FIFO) and pushes it to JS stack.
๐ค The JS stack now has an item to deal with (meaning stack is non-empty, so event loop can't push more)
๐ง And since JS is single-threaded (and stack is LIFO) => it can only do one thing (the pushed result is on top so it'll be dealt with) => it deals with the result.
๐ง And since JS is single-threaded (and stack is LIFO) => it can only do one thing (the pushed result is on top so it'll be dealt with) => it deals with the result.
๐ค When it is done, event loop again notices that the stack is empty and takes the 'latest' stuff from job queue and gives it to JS' stack for JS to deal with it.
โค๏ธ This is how async tasks are handled by Javascript!
โค๏ธ This is how async tasks are handled by Javascript!
I write daily threads on web dev so if you enjoyed this thread, please:
โ Follow me @sumitsaurabh927 for more of these.
โ RT the tweet below to show me some ๐งก and comment your thoughts.
๐ Your each like, every comment motivates me to come up with awesome new stuff!
โ Follow me @sumitsaurabh927 for more of these.
โ RT the tweet below to show me some ๐งก and comment your thoughts.
๐ Your each like, every comment motivates me to come up with awesome new stuff!
Loading suggestions...