Asynchronicity in Javascrpit (part 1)

Javascript is a single threaded language and has a synchronous model
(it can do one thing at a time) : LEARN

What if we need to wait some time before we can execute certain function or bits of code ? 🙂
Perhaps we need to wait on fresh data from an API
or for a timer to complete & then execute our code, or …

So we want to delay some code execution but NOT wanting to block the thread from any further code running while we wait 🤔
to avoid scenarios like this :

INFO :

SetTimeout, console, localStorage, fetching… Are web browser features known in javascript as web Browser APIs? -> So we use label’s for those features in javascript to get started a web Browser Feature , like (setTimeout label for the Timer browser feature). So we interface with those features, that’s why we call them APInterfaces.

GUESS THE OUTPUT :

well, the output is : gb’1'joms sfv’3'svds efth’2'kfbxs. 😅
I mean 1 3 2.
Let’s analyse this code:
First when the thread of execution reaches the line 1 it prints “1” to the console.

CONSOLE: 0 ms — — — — → 1

In line 2 it finds that setTimeout is an Asynchronous function that will be executed by the browser by a feature called TIMER.

Let’ jump to the browser side , when the TIMER feature receives the time to wait which is “2000ms” ,
and the reference of the callback function that contains “console.log(‘2')”
It starts counting
1ms -> iscompleted -> NO
DON’T FORGET : we are in the Browser side but the thread of execution go to line 3 and print it to the console probably it will be in 1ms for example.
Because javascript wait for no one 😎

CONSOLE: 1 ms — — — — —> 3

the Timer feature in the browser is still counting :
2ms -> iscompleted -> NO …
100ms -> iscompleted -> NO …
1000ms -> iscompleted -> NO …
2000ms -> iscompleted -> YES -> then it sends the reference of the callback function to a queue called callbackqueue

🚨 HERE where you need to stop and go learn about the eventLoop⚡

Let’s continue :
Now our callbackqueue has our function in it, but as all you know it must be pushed to the callstack so it can execute, this is the job of the eventLoop that check if the callstack is empty or not, so it can push our function for it to be executed.
In our example, the code is short probably the thread of execution will end in 1ms or 2ms so the callStack is empty now and the event loop will push our function from the callbackqueue to the callstack then it will execute the line : console.log(“2”);
Then we will finally see ‘2’ it in the console after 2000ms

CONSOLE: 2000ms — — — — → 2

phew

If you understand the concept, you must guess the output right :

the output is : onethreetwoagain 😏

in this picture : they mean by Macrotask Queue the callbackQueue .

In Fact there is another queue called MicroTaskQueue , if you have listened to me when i said learn about the eventLoop⚡ you must know it
but to understand it more you must know how promises work under the hood and that’s what I will cover in the next Time 😉

وَٱلسَّلَامُ عَلَيْكُمْ