How JavaScript become Non-blocking and Asynchronous Concurrent Language
24 Months ago
About 24 months ago, I’m a Intern JavaScript Developer.
I thought to myself , how does, like JavaScript actually work? I wasn’t entirely sure, I’d heard V8 as a term, chrome’s runtime didn’t really know what that meant, what that did.I’d heard things like single-threaded.
I’m Curious To Know
I started a journey of like reading and research and experimenting in the browser.
JavaScript What Are You?
What i got sources from internet is
I’m a Single-threaded , non-blocking, asynchronous concurrent language.
I have a Call Stack, an Event loop, a Callback queue some other api’s and stuff.
Q: Hey, V8 do you have a Call Stack, an Event loop, a Callback Queue some other api’s and stuff?
A: I have a Call Stack and Heap. (Wait, What!! , what are those other things??)
3 Months Later… [I think I get this]
Hopefully, this will be useful if you’re relatively new to JavaScript, help you understand why JavaScript is so weird when you compare to other languages you might used why callbacks are a thing, cause us hell but are required.
So, if you look at the JavaScript Runtime itself like V8 which is the Runtime inside chrome
If you like clone the V8 code base and grep for things like setTimeout or DOM or HTTP requests, they are not in there, they don’t exist in V8 , which was surprise to me.
So, over this 24 months of discovery i come to realize this is really, the bigger picture, this is what i am hoping to get you on board.
We have the V8 Runtime but, then we have these things called Web APIs which are extra things that the browser provides and we have this Event loop and Callback Queue.
Call Stack
one thread == one Call Stack == one thing at a time
Call Stack is basically it’s a data structure which responds basically where in the program we are, if we step into a function, we put something on to the stack, if we return from a function, we pop off from the top of the stack.
Example of Code Execution with Call Stack
Program execution starts with main() and top to bottom approach it visits all three functions, in third function it got printSquare() function call printSquare(4) and then into the printSquare() { var squared = square(n)} another function call that is square(n) it is pushed into stack and in that function square(n) { return multiply(n, n)} another function call, now multiply(n, n) is pushed into the stack.
In that multiply(a,b) { return a* b; } . Once a function return it is pop off from the stack
In, the same linear fashion, square(n) and printSquare(n) pops out from the stack and end of function.
If you’ve heard the term like blowing the stack, this is an example of that
Let’s take a look at this example
Blocking
What happens when things are slow?
What actually blocking means, the code which makes execution slow and stays in the call stack long time it leads to blocking a simple example console.log(‘hello..’). is not slow but, while(i≤100000000) definitely slow.
What’s the solution for this? Why is this a problem?
Because, browsers(we are running code in browsers)
Solution: asynchronous callbacks
Async Callbacks and Call Stack
So, Asynchronous Callbacks with Stack how does this work. let’s take a look at this code.
console.log(‘hi’);
setTimeout(function () { console.log(‘there’); }, 5000);
console.log(‘Welcome, to my blog’);
Debugging the code with stack
console.log(‘hi’); push into the stack and prints into the browser console.
setTimeout(cb, 5000); we know that it doesn’t run immediately,we know it’s going to run in 5 seconds. so, we can’t push it on to the stack, and where it will stay?? we move to next
console.log(“Welcome, to my blog”); push into the stack and prints.
After, 5 seconds console.log(‘there’); push into the stack and prints.
How does that happen??
Ans: Concurrency and Event loop (one thing at a time, except not really)
This is basically, where the event loop comes in on concurrency.
JavaScript Runtime can do one thing at a time. That’s true.The reason we can do things concurrently is that the browser is more than just the Runtime.
JavaScript Runtime can do one thing at a time, but the browser gives us these other things, such as Web API’s these are effectively threads, you can just make calls to, and those pieces of the browser are aware of this “concurrency kicks in”.
Let’s take a look how the things are changed when concurrency and queue comes into the picture.
console.log(‘hi’);
setTimeout(function () {
console.log(‘How are you!’);
}, 5000);
console.log(‘Welcome’);
First it goes to console.log(‘hi’); immediately it push into stack and prints
Then, here comes setTimeout(cb, 5000) now, its going to complete immediately and push it on to the queue,remember about event loop, it has to wait still the stack is clear before it can push the callback on to the stack, so your stack is continue to going to run. console.log(‘Welcome to My Blog’); clear, now the event loop can kick in and call you callback and push on to the stack and prints .
This is how JavaScript becomes Non-blocking and asynchronous concurrent language. That’s it. Feel free to comment i am always curious and passionate to learn new thinks and share .Thank you
