How Does JavaScript Works ?
Did you ever wondered how does JS Works? or What is the difference between synchronous and asynchronous or what does the statement “JavaScript is Single Threaded Language that can be non-blocking” really means?
Well stick with me and let's try to understand what do these things mean?
Okay so, What is a program? A program is an application that can parse and execute the file (read and run). The JavaScript Engine of Chrome is V8 and there 2 components build of which are Memory Heap and Call Stack.
Now you might be wondering what is a Memory Heap or Call Stack? So a memory heap is the storage of the browser where it stores the variables and functions like if you define a variable let's say :
here you are storing the value of the number in a variable and where is saved well in the memory heap. Okay so now what is a call stack? you can imagine of call stack as a stack of bricks one over another and here these bricks are the functions that needed to be executed by the browser and in Javascript, the last function in this stack gets executed one by one that's why it's called single-threaded language.
Okay so functions get executed 1 by 1 in JS Engine so now just imagine what if one of the function is the stack is huge in size or will take a lot of time to run won't that create an issue like we have to wait for it to be executed until it's done so we move on to the next function. To solve this issue we have WebAPIs which work on the event listeners like if I click or scroll by doing an event on screen it will get triggered it's like saying to the browser hey this function will take a long time please execute it when the stack is empty. okay so let me summarise it all for you. You give the javascript engine a file to execute. the functions go one by one in call stack one by one functions gets executed (that's why its called as Single-Threaded Language) then it stored the function output in the memory heap but wherever there is a function which will take time in the execution of a function or because of any issues it will take time the web APIs gets triggered they say okay send that function to me take it out from the call stack and move on to next function and whenever an event happens by the user or when the call stack is empty I will give it back to you.
And when the call stack is single-threaded like in JavaScript we say it's asynchronous ( doesn’t happen at the same time) but when we have a call stack that is multi-threaded it can do all the actions at the same time in Sync That's why it called as Synchronous (happens at the same time).
That's it! Hope you the answers to this question now!
- How does JavaScript Works ?
- Difference Between Synchronous and Asynchronous?
- Why we call JavaScript a “Single Threaded Language that can be non-blocking”? - nonblocking because it can pass the function to the web APIs.
