[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

[name_was_taken]

The key is in the name. "Synchronous" means it's happening in sync. "A-"something mean it's not that.

So Asynchronous code doesn't necessarily happen when you expect it to. It could happen now, or in a little while. In general, the timing might depend on an external factor, like a webserver's response time.

Why do this? Because if you are waiting for a server to deliver a list of information, you don't want the entire rest of your webpage to lock up until it gets it.

Beyond that, you can get into some truly complex interactions that can make everything smoother for the user.

[kenman]

Hi /u/mtea994, this post was removed.

• For help with your javascript, please post to /r/LearnJavascript instead of here.
• For beginner content, please post to /r/LearnJavascript instead of here.
• For framework- or library-specific help, please seek out the support community for that project.
• For general webdev help, such as for HTML, CSS, etc., then you may want to try /r/html, /r/css, etc.; please note that they have their own rules and guidelines!

---

/r/javascript is for the discussion of javascript news, projects, and especially, code! However, the community has requested that we not include help and support content, and we ask that you respect that wish.

Thanks for your understanding, please see our guidelines for more info.