Day 2: How Javascript performs Asynchronous tasks?
😱 OMG!! Today you came with really big question!!🤪 Yeah, I know but I am ready, In the previous article you mentioned that you don’t know how javascript performs asynchronous tasks. do you know it now?
Yeah, I did research but it will be too much information.I am ready!!
Okay, Let's start with simple Javascript example and try to execute program.
As you already know, Javascript will execute this code in two phases.Memory Creation Phase where function y will be allocated/reserved space in Memory Component.And in Code Execution phase each line will be executed.
Yeah, I know,
- Line 6 will be executed and it will print “Start” on console.
- Then line 5 to 3 will be skipped as there is nothing to execute.
- Then on line 2 function invocation happens, new execution context will be created and line 4 will be executed. So we see “I am inside function y” on console.
- And then Line 1 is executed, so it logs into console “END”.
I know this drill 🤪, It’s all synchronous code.
🤩 Perfect!! It also deletes Global Execution Context and also Execution Context created for the function y is deleted.But What if you want to execute some code after some time? Let's say 5 seconds later. How will you do that?
I will use setTimeout . That’s easy one!
Okay, What if I say setTimeout is not part of Javascript!!🙄 Really?
Yes, Check 👇 this.https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#specificationssetTimeout is actually an API which is exposed by the browser.It is one of the Web APIs offered by browser.
For example: console, setTimeout, DOM APIs etc are not part of Javascript.
hmm okay but how it relates to asynchronous tasks in Javascript?
hehehe Let's take another Javascript example.
Now in this example, same as above example line 8 will be executed. It will call Console Web API exposed by browser on window object.Side note calling window.setTimeout and setTimeout is exactly same.Now line 7 to 3 will be skipped as nothing to execute there and then on line 2 function invocation takes place and new Execution Context is created for function y.Now line 6 will be executed and you see in setTimeout function first parameter is callback (I will cover callback and closures some other day, for now just consider it as function passed as parameter) and second parameter is time in milliseconds (ie. 5 seconds).Now setTimeout Web API exposed by the browser is called and browser stores this timer inside the browser and Javascript moves to next lines.😏 Javascript waits for nothing, It moves as soon as possible hehe.Now inside function y there is nothing to be executed so its Execution Context is deleted because javascript don't need this context right!!Then Javascript executes line 1 and console logs "END".And then Global Execution Context is also deleted as it is also not needed anymore.
If both execution contexts are deleted then Call Stack must be empty now.
Call Stack is something where Javascript code is executed instantly. Consider it as an array which stores Global Execution Context and Execution Context created by functions.
😉 Perfect!! Call Stack is empty now!!Then what happens to setTimeout stored in browser?
That's a good question!!When browser stored timer inside browser, It's still waiting for 5000 milliseconds to pass.Once 5 seconds are passed, That callback ( function passed as a first parameter ) is passed to the Callback Queue.
You are using too many new terms 😏
Yeah, I told you, It will be too much information.But imagine Callback Queue as an array which stores all the callbacks in sequence in execution order.
hmm okay, Whats next?
Let me tell you about one more term, Event Loop.Event Loops job is to continuously check Call Stack if it is empty and if it is empty then it fills it from Callback Queue.So when Call Stack is empty, Event Loop fills it with callback from Callback Queue.
Okay, so once the callback is passed to Call Stack, callback is executed instantly and it logs in console “I am inside setTimeout”.
Correct!! and once the execution is completed then it is also deleted from call stack and program execution ends.Okay, So with the help of setTimeout, I can write asynchronous code in Javascript right?
It is actually one way of achieving asynchronous functionality in Javascript. We can use Promises as well for the asynchronous tasks.What is Promises?
hehehe Let's check it some other day. I think you got the gist right? How asynchronous tasks are performed in Javascript.hmmm, Let me go through our conversation again but i got the overall idea.
I will explain some of the concepts in much more detail but for now I think let's keep it simple 😉.Fair enough..
Hey, did you joined me on Twitter, LinkedIn and Github.I share lot of cool tips and tricks regarding PHP, Laravel, Javascript, Vuejs, Nuxtjs, Reactjs, databases, workflows, productivity etc etc. https://twitter.com/rckstrbhushanhttps://www.linkedin.com/in/rckstrbhushanhttps://github.com/bhushanDon't forget 👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻Take care and stay safe. Cheers 🥂
👋
see you tomorrow!!
Yep!! 🤘