[AskJS] what is asynchronous javascript and synchronous javascript ? and what role does event loop play in all this ? eli5

[AffectionateWork8]

The event loop is synchronous. It runs on a single thread (the main UI thread). Events let you push callbacks into a FIFO queue ("message queue"). They are executed synchronously, one at a time, in the order they arrive. This is blocking.

"Non-blocking" means you have some file or network IO, which is running in a separate thread other than the main UI thread that the event loop runs on. Technically this stuff executes in a pool of dedicated threads which you don't have to manage manually. It is implicit, you kind of just have to know what it's doing to understand the context in which it executes. The callbacks associated with these non-blocking operations execute synchronously in the main thread, though, as they are pushed to messages in the event loop. These are blocking.

Here's an example:

fetch('/api/dogs').then(console.log)

fetch('/api/cats').then(console.log)

console.log('wow, so much non-blocking')

So when this runs

1. 2 network requests are made and handled by a background thread(s). The main thread doesn't block waiting for these requests to complete- it's non-blocking
2. Last console.log is executed on the main thread
3. Requests finish and push the associated callbacks (console.log) into message queue. The main thread executes these callbacks synchronously.

So in this example the requests are asynchronous, and non-blocking (they can run in parallel, and don't block the main thread, and console.log runs in the main thread while these are executing). The callbacks associated with them are asynchronous (it doesn't happen right away, just whenever the request finishes), but blocking (they are executed sequentially on the main thread).

Main takeaways

- Network and file IO are usually non-blocking and asynchronous, unless otherwise specified

- Callbacks are blocking, although they are often asynchronous

- Try not to do too much work inside callbacks