How does JavaScript work?
JavaScript is a single-threaded that can be a non-blocking programming language. Did you know what that means? 🤔 Don’t worry in this article will help you to get a clear idea about what is single-threaded means and what is non-blocking means.
The program has two things. It has to allocated memory and parse and execute a script which means read and run commands. We also know the JavaScript engine which each browser implements in the chrome it’s V8 read the JavaScript code convert into machine-executable instructions. The JavaScript engine (V8) contains two parts, memory heap and call stack.
Memory heap
The memory allocation happens in this memory heap. When you define a variable, object, array or function in the JavaScript code it all definition that in your code store in memory heap.
Call stack
Call sack simply does read and execute our script. It can run one thing at a time and the JavaScript engine (V8) has a single call stack that’s why we said JavaScript is a single-threaded programming language. Then How the call stack work? The call stack is basically a data structure that recodes where we are in the program. If our program has a function call it will push that function on to the stack and go inside that function, see whether there are anything if there is console.log(), push that on to the top of the function in the stack and immediately execute that and remove it from the stack. Let’s look at this example.👇
function printB(){
console.log('printB');
}function printA(){
printB();
console.log('printA');
}printA();
- This code has a function call
printa(). then put that print function and go inside that function.
- Inside a
printA()function, it has another function call andconsole.log(). Inside that function, the first thing isprintB()function. Then push that on to the call stack and immediately go inside that function.
printB()function includeconsole.log('printB'). Then put that on to the stack and execute that. after executingconsole.log('printB')it removes from the stack.
printB()also remove from the because there no more things to execute butprintA()not remove from the stack becauseconsole.log('printA')in theprintA()function did not execute yet.
- Then come back to
printA()function and pushconsole.log('printA')on to the stack. After executing that, it removes from the stack. Finally,printA()also remove from the stack.
Is the V8 engine enough to execute the javascript program? Is it not a problem? Yes, it is a problem. The problem will happen when we run our code in the browser. Look at this example.👇
<body>
<button onclick="loop()">loop</button>
<script >
function loop(){
for(let i = 0; i<1000000000000; i++){
console.log(i);
}
}
</script>
</body>If you run this on a browser and you click the loop button, the browser will freeze. you wouldn’t be able to do anything until that loop function is done. It isn’t good for the user. We need something that non-blocking user behaviour. The asynchronous callback is the solution.
when JavaScript run time(v8) has one call sack, then how we can do an asynchronous task in the browser. Cause the browser is more than just the runtime (v8). The browser has web APIs, callback queue and event loop other than the V8 engine.
How asynchronous tasks work?
console.log('A');setTimeout(() => {
console.log('B');
}, 5000);console.log('C');
In the above code console.log('A') is in the first. Then that push on to the stack and execute it. after that remove that from the stack and come to setTimeout() function. Then that push on to the stack and call the setTimeout() function. Then pass this callback function and five-second delay to the setTimeout in the web APIs. setTimeout start a countdown and after the five-second callback function moves to the callback queue. The event loop checks whether the call stack is free. Meanwhile, the console.log('c') push, execute and remove from the stack. If the call stack is free gets the first thing in the callback queue and push it on to the stack. When something currently executing in the call stack, the event loop can’t interrupt that. an event loop has to wait until the stack is free. after executing the callback function, it removes from the stack.
I think now you have a better idea about how JavaScript run time work and how asynchronous work in JavaScript. If you are interested in how the JavaScript engine work, you can refer link in the below.
