Diving deep into how the nightmare of asynchronous code in Javascript works!
Synchronous vs Asynchronous
Before making comparisons and judging both like we always tend to do. Let's just get a basic understanding of how things work among them and then throw in our judgment of them.
Synchronous
We wait in silence when the forsaken javascript code that we wrote tends to take its time to execute in sequence. Okay, enough of this, Let's get real here.
I was not sure how synchronous code in javascript would work when I started to learn javascript. It was only when I started to fancy new libraries in Javascript that I finally understood how javascript works under the hood.
The Call Stack
Normally when a javascript code executed its puts every function that needs to be executed into a stack called as the infamous "call stack".
This is what Mozilla tells us about the call stack.
A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple functions — what function is currently being run and what functions are called from within that function, etc.
If you're confused right now then you're the same as me. Heres an example to make you understand it even better.
function greeting() {
// [1] Some codes here
sayHi();
// [2] Some codes here
}
function sayHi() {
return "Hi!";
}
// Invoke the `greeting` function
greeting();This code above is a typical example of synchronous code. You can understand from reading this code that the function greeting is getting called first and then while executing greeting the function sayHi is called.
This is how the call stack would look like when the function greeting is invoked.
The greeting function would get added to the call stack and then when the greeting method calls the sayHi method the call stack would change again.
Call stack list:
- greeting
Execute all lines of code inside the greeting() function. Get to the sayHi() function invocation. Add the sayHi() function to the call stack list.
Call stack list:
- greeting
- sayHi
Execute all lines of code inside the sayHi() function, until reaches its end.
Return execution to the line that invoked sayHi() and continue executing the rest of the greeting() function.
Call stack list:
- greeting
When everything inside the greeting() function has been executed, return to its invoking line to continue executing the rest of the JS code. Delete the greeting() function from the call stack list.
Call stack list:
EMPTY
We started with an empty Call Stack, and whenever we invoke a function, it is automatically added to the Call Stack, after executing all of its codes, it is automatically removed from the Call Stack. In the end, we ended up with an empty stack too.
Asynchronous
The asynchronous stuff goes into the stuff called event queue which we check repeatedly with something called as the event loop. A lot of new stuff I know let me explain.
Let us take the most common javascript async function that's not technically written in Javascript but in C/C++ the setTimeout
setTimeout(function(){
alert("Hello");
}, 3000);the setTimeout goes into what we called the event queue after 3 seconds and gets executed only if the call stack is empty.
