Explain Synchronous vs. Asynchronous in JavaScript Like I’m Five

In my studies I’ve come across a mentioning of JavaScript’s execution as being single-threaded and synchronous.

• What exactly does this mean?
• How does it differ in comparison to multi-threaded/asynchronous execution?
• Does such thing exist in JavaScript?

Comments

[Nested Software]

Js code can be synchronous or asynchronous, but it does not normally run in parallel (in other words, it is single threaded):

Synchronous: Anna asks her parents for a cookie. The parents start to bake some cookies while Anna stands there frozen, doing nothing.

Waiting frozen is like directly calling a function that uses the CPU. Nothing else happens until the function returns.

Asynchronous: Anna asks her parents for a cookie. The parents say the cookies are in the oven. Anna goes to play with blocks until the oven bell rings, notifying her that the cookies are ready.

Baking in the oven is any kind of I/O-bound operation, like file operations, http requests, etc. Since I/O operations don't require using the CPU, you can often continue your program doing other things while you wait for I/O. The oven bell is a notification that the results are ready. This can be accomplished with a callback function. In other words, once the data you asked for is ready, a callback function you provided can be called and you can use that function to do something with the data.

Asynchronous: Suzy or Jimmy can play with the blocks one at a time, but not simultaneously. While Suzy walks to the toy bin to get a new block, Jimmy can play with the blocks, and vice versa, but they can't actually put blocks on top of one another at the same time.

Walking to the toy bin is also an example of an I/O-bound operation.

It is possible for Suzy and Jimmy to play with the blocks simultaneously, but it requires special support, for example, using Web Workers

This would be useful if you wanted to continue processing your normal code while you waited for a CPU-intensive task to run on another core.

[Frederik 👨‍💻➡️🌐 Creemers]

Here's the 5 year-old's explanation:

Translations to adult language are written like this.

Today, you went to the beach, and you did loads of things like:

• build a sandcastle
• go swimming in the sea
• ask daddy for an ice cream cone
• go looking for shells
• eat your ice cream code

You did all of these things one after another, because you can't do multiple things at the same time.
I made a necklace off 5 of the shells you found that you can show off to your friends at school. It has one shell for each of the things you did. Then you can poit at your shells from left to right when telling your friends about the trip, so you don't foret to talk about anything you did.

You can see the thread going through the shells as the **thread of execution. One thing is being done, then the next, then the next, and so on.

After you asked your dad for an ice cream conde, you went looking for shells. You didn't just wait for him to return. And when he came back with the ice cream, he had to wait until you found your last shell before giving you the ice cream.

In JavaScript, asking daddy for ice cream is akin to running some async function, like making an HTTP request. The script continues running after you made the request, running whatever code is left for it to run. When there's no more code to run, JavaScript checks whether there are any events to act upon. When daddy comes back with the ice cream, he puts an event in the event queue, but you're still running the code to search for shells. When you're done, you check if there's anything waiting for you, and you see daddy has returned with a delicious ice cream cone, so you go and eat it.

The JavaScript code for your day at the beach might look like this:

buildSandCastle();
swim();
askDadForIceCream(function(iceCream){
    eatIceCream();
})
findShells();

Even though eatIceCream() comes before findShells() in the code, it only runs at the end, when you've received the event of Daddy returning with the ice cream.