JavaScript code runs on a single thread, in event loop when method push to web apis return callback function to queue, listener queue and callstack is empty push callback function execute it in callstack, so the asynchronous execution is really just changing the execution order of the functions? Why?

JavaScript code runs on a single thread, in event loop when method push to web apis return callback function to queue, listener queue and callstack is empty push callback function execute it in callstack, so the asynchronous execution is really just changing the execution order of the functions? Why?

• javascript
• asynchronous
• concurrency
• callstack
• event-loop

• Please provide enough code so others can better understand or reproduce the problem. – Community Bot Commented Apr 28, 2022 at 14:17

1 Answer 1

Due to JavaScript being single-threaded, it is technically only concurrent, not parallel. That is, no two instructions are ever executed at the same time, but the event loop allows us to coordinate the order in which instructions are executed such that certain instructions are non-blocking.

To see why this is useful, consider the following sequence of steps:

1. Make a call to an API
2. Do some other work

Step 1 could take quite some time, and we may want to do some other work in the meantime while we wait for it to plete, making it a blocking call. In a purely sequential world, this means that step 2 will not execute until step 1 has been pleted. In parison, if we make this asynchronous, and therefore non-blocking, we can execute steps 1 and 2 concurrently. This happens because the event loop will run an iteration of our synchronous code first (step 2), then run our asynchronous code (step 1) - it is changing the order instructions are executed in such a way that our code is non-blocking. Interestingly, this means an asynchronous delay of 0 seconds will run after the next synchronous iteration of code.

Say we introduce step 3, in which we need the response from the API call in step 1. To do this, we can use an async-await, which will be blocking until step 1 pletes. This is not purely sequential, as Step 2 does not need to wait for step 1 to plete, but at step 3 we are able to create a synchronous point in our code via async-await. So we are able to keep our code non-blocking where it matters, and still introduce a particular sequence of events.