Have you ever logged into a website like Facebook and wondered why the page is loaded before all the recent posts?
Have you ever wondered why when you are trying to view things you want to buy on Amazon, you see other components before the items you are interested to buy?
To understand this, let’s understand how operations are handled from a synchronous and an asynchronous point of view.
Let’s take the following code as an example:
It adds each one of those instructions and run each one of them one at a time.
How about functions? When we call functions that have their set of statements how does it affect the call stack?
Let’s take a look at the following example:
Right here, we call multTwo, which calls mult of a and b and multiply it by 2. Notice a pattern here? It calls one after the other but the latest call on the stack will always be executed first.
Here’s how the call stack would look like:
multTwo gets called, which triggers the mult function call. 2 times 3 evaluates to 6, popping the top of the stack. Since mult(2*3) turns into 6, 2 * 6 turns into 12, popping another element on the stack. At last, multTwo(2,3) then gets evaluated.
Now one important question comes up:
If everything is running line by line, how come we still hear about concepts such as promises, asynchronous calls, etc?
Imagine going on your Facebook page and you are scrolling up and down. In a few seconds, you will see new posts coming up as there are more recent posts available.
Enter the event loop.
- c: 3
After the first three lines of statements, each line gets ran once, one at a time, with each call being put into the call stack and popped immediately. After these statements, the call stack is empty and the heap contains the value of a, b, and c.
Let’s see what happens when the setTimeout statement and the console log statement is called:
Once the setTimeout timer expires, the callback of setTimeout is getting pushed into the call stack. Because doSomething calls console.log, now console.log gets pushed into the call stack.Console.log then gets popped off the stack and gets called and then doSomething gets popped off the stack.
Wow, there is a lot going on right?
- If it calls a function, it pushes the function call to the call stack and then the inner function calls into the call stack. The inner function call gets popped off the stack and triggered first before the main function call.
- Asynchronous calls are put into the event loop instead of the call stack. Every operation in the call stack must be run before event loop operations are triggered, regardless of when these asynchronous calls received feedback (can be a success or fail response).
Feel free to comment or ask any questions if there are any.
Can you think of how many synchronous vs asynchronous calls are currently running in this article as you read through it?
Happy coding. Cheers.